나는 다국어 웹 사이트를 구축하기 위해 Angular Material을 가지고 놀았습니다. 프로젝트에는 토글 가능한 사이드 바가있는 간단한 레이아웃이 있고 콘텐츠 영역 이 Stackblitz에서 코드가 작동하는 모습을 볼 수 있습니다.
마크 업 및 코드 :
<mat-drawer-container>
<mat-drawer mode="side" [opened]="SideBareOpend">
<button (click)="SideBareOpend=false"> close [X] </button>
</mat-drawer>
<mat-drawer-content>
<button (click)="SideBareOpend=!SideBareOpend"> toggle side bare</button>
<br>
<button (click)="changeDir()"> change the direction of page </button>
</mat-drawer-content>
</mat-drawer-container>
페이지 방향이 "왼쪽에서 오른쪽"이면 모든 것이 잘 작동합니다.
하지만 페이지 방향을 "오른쪽에서 왼쪽으로"변경하고 사이드 바를 열려고하면 사이드 바는 여전히 왼쪽에서 콘텐츠를 밀고 독자는 오른쪽에서 콘텐츠를 밀어냅니다.
내가 필요한 것은 사이드 바를 오른쪽에서 렌더링하고 방향이 "RTL"인 경우 오른쪽에서 콘텐츠를 푸시하는 것입니다.
재료 구성 요소에는 모든 재료 구성 요소에 적용 할 수있는 직접 Dir 지침의 빌드가 함께 제공됩니다 .
component.ts
public SideBareOpend: boolean = true;
direction: Direction = "rtl";
changeDir() {
if (this.direction == "rtl") {
this.direction = "ltr";
} else {
this.direction = "rtl";
}
}
component.html
<mat-drawer-container [dir]="direction">
<mat-drawer mode="side" [opened]="SideBareOpend">
<button (click)="SideBareOpend=false"> close [X] </button>
</mat-drawer>
<mat-drawer-content>
<button (click)="SideBareOpend=!SideBareOpend"> toggle side bare</button>
<br>
<button (click)="changeDir()"> change the direction of page </button>
</mat-drawer-content>
</mat-drawer-container>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다