Угловой - панель инструментов скрывается за ящиком вместо sidenav - PullRequest
Новая
       22

Угловой - панель инструментов скрывается за ящиком вместо sidenav

0 голосов
/ 13 ноября 2018

Я пытаюсь создать интерфейс, похожий на панель управления, в котором сверху находится панель инструментов с постоянными заголовками, а слева - разборный sidenav. Я пробовал несколько вещей здесь и там, и это так близко, как я получил:

HTML: 

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">    <button
      type="button"
      aria-label="Toggle sidenav"
      mat-icon-button
      (click)="drawer.toggle()">
      <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
    </button>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink]="['/']">Home</a>
      <a mat-list-item [routerLink]="['/locations']">Current Destinations</a>
      <a mat-list-item [routerLink]="['/orders']">Today's Orders</a>
      <a mat-list-item [routerLink]="['/logout']">Logout</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar class="top-bar" color="primary">
      <span>App Title</span>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

CSS: 

.sidenav-container {
    height: 100%;
}

.sidenav {
    display: flex;
    width: 200px;
    box-shadow: 3px 0 6px rgba(0,0,0,.24);
}
.top-bar {
    position: fixed;
    top: 0;
    z-index:1000;
}

Проблема в том, что sidenav остается на месте, а верхняя панель инструментов - это то, что скрывается вместе с содержимым розетки маршрутизатора. Это должно быть наоборот, но я не могу этого понять. Этот ответ на другой вопрос близок, но в этом случае ссылки слева заканчиваются полосой прокрутки, которая не выходит за пределы нижней части панели инструментов вверху. Кроме того, похоже, что используется более старая версия Material Design или что-то в этом роде. Чего мне не хватает?

1 Ответ

0 голосов
/ 13 ноября 2018

Я наконец-то решил эту проблему, когда наткнулся на пример со стеком на веб-сайте Material. Вот статья:

Материал - Создание адаптивного макета для рабочего стола мобильного приложения

И вот пример стекаблица для него:

https://stackblitz.com/angular/pymganppqmm

...