Открыть боковую панель углового материала в конце родительского компонента

У меня есть угловой боковой навиг материала, когда я его открываю, он всегда выровнен по левому краю окна

angular material sidenav

Но я хочу всегда открывать его в конце компонента с синим фоном, как на этом экране:

material sidenav

вот мой компонент с синим фоном, я также добавил сюда элемент mat-sidenav-container из материала angular:

<div class="nav">
  <div class="logo">
  </div>
  <div class="nav-links">
   <button (click)="sidenav.toggle()">Open</button>
  </div>
  <div class="nav-items">
  </div>

  <mat-sidenav-container>
   <mat-sidenav #sidenav [mode]="'side'">
    <p>Content</p>
   </mat-sidenav>
  </mat-sidenav-container>
</div>

У вас есть идеи, как открыть боковое меню, как на втором экране? Спасибо


angular angular-material2 sidenav
person Exari Constantin    schedule 20.02.2018    source источник
comment
Это можно сделать, немного взломав, просто добавив margin-left: -width родительского компонента; но я думаю, что это должен быть лучший способ сделать это.   -  person Exari Constantin    schedule 20.02.2018

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, вы ищете такое поведение: https://stackblitz.com/edit/angular-sidenav-example

введите описание изображения здесь

Я использую @angular/flex-layout, чтобы позаботиться о макете.

<mat-toolbar color="primary">
    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
    <h1>Responsive App</h1>
</mat-toolbar>

<div fxLayout="row">
    <div fxFlex="10">
        logo
    </div>


    <mat-drawer-container>
        <mat-drawer #snav [mode]="'side'">
            <mat-nav-list>
                <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
            </mat-nav-list>
        </mat-drawer>

        <mat-drawer-content>
            <p *ngFor="let content of fillerContent">{{content}}</p>
        </mat-drawer-content>
    </mat-drawer-container>
</div>
person julianobrasil    schedule 20.02.2018