Альтернатива md-is-locked-open для Angular Материал 2+ - PullRequest
0 голосов
/ 11 января 2020

Я пытаюсь воссоздать следующую раскладку с помощью Angular Материал 2+ (8.2.3): https://codepen.io/kyleledbetter/pen/BjaeYJ

Я хочу заблокировать открытие 2 sidenavs, когда ширина планшета или больше. На мобильном устройстве навигация становится полноэкранной и переключается при нажатии на элемент.

На планшете при нажатии на элемент sidenavs должны оставаться на месте. В материале AngularJS было свойство 'md-is-locked-open', которое не позволяло toggle () закрывать sidenav. Как мне добиться этого в Angular Материал 2 +?

Я пытался добавить свойство disableClose к sidenavs, но безрезультатно.

Компонент:

<mat-sidenav-container class="takNav">
  <mat-sidenav 
  #takDrawer 
  class="sidenav-list" 
  mode="side" 
  opened
  >
    <mat-toolbar class="mat-elevation-z2">Takken</mat-toolbar>
    <mat-list>
      <mat-list-item (click)="takDrawer.toggle()">Bevers</mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>Welpen</mat-list-item>
      <mat-divider></mat-divider
    ></mat-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-sidenav-container class="drinkNav">
      <mat-sidenav #drankDrawer class="sidenav-list" mode="side" opened>

        <mat-toolbar class="mat-elevation-z2">
          <button *ngIf="(isHandset$ | async)" type="button" mat-icon-button (click)="takDrawer.toggle()">
          <mat-icon>arrow_back</mat-icon>
        </button>
          Dranken</mat-toolbar>
        <mat-list>
          <mat-list-item (click)="drankDrawer.toggle()">Cola</mat-list-item>
          <mat-divider></mat-divider>
          <mat-list-item>Fanta</mat-list-item>
          <mat-divider></mat-divider
        ></mat-list>
      </mat-sidenav>
      <mat-sidenav-content>
        <mat-toolbar class="mat-elevation-z2">
           <button *ngIf="(isHandset$ | async)" type="button" mat-icon-button (click)="drankDrawer.toggle()">
          <mat-icon>arrow_back</mat-icon>
        </button>
          Bevers - Cola</mat-toolbar>
        <div class="card-container">
          <app-poef-card leaderName="Thomas" amountOfDrinks="0"></app-poef-card>
        </div>
      </mat-sidenav-content>
    </mat-sidenav-container>
  </mat-sidenav-content>
</mat-sidenav-container>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...