Угловая боковая панель перекрывает содержимое страниц - PullRequest
Новая
       9

Угловая боковая панель перекрывает содержимое страниц

0 голосов
/ 02 июля 2018

После создания боковой панели с угловым кли: 

ng generate @angular/material:material-nav --name=navigation

боковая панель работает нормально, но она перекрывает содержимое каждой страницы, как это изменить? или мне нужно написать поле слева на каждой странице, которую я использую?

Ответы [ 3 ]

0 голосов
/ 11 января 2019

Свойство 'autosize' исправило его для меня, но оно поставляется с предупреждением, согласно документации: Angular Documentation

https://material.angular.io/components/sidenav/api

0 голосов
/ 20 мая 2019

Маршрутизатор должен находиться внутри контейнера (генерируется схемами, скажем, «содержимое здесь») и удалять его из app.component.html 

 <mat-sidenav-container class="sidenav-container">
      <mat-sidenav 
          #drawer 
          class="sidenav" 
          fixedInViewport="true" 
          [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
          mode="push"   
          >
        <mat-toolbar color="primary">Menu</mat-toolbar>
        <mat-nav-list>
          <a mat-list-item href="#">Link 1</a>
          <a mat-list-item href="#">Link 2</a>
          <a mat-list-item href="#">Link 3</a>
        </mat-nav-list>
      </mat-sidenav>
      <mat-sidenav-content>
        <mat-toolbar color="primary">
          <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
          </button>
          <span>Application Title</span>
        </mat-toolbar>
       <router-outlet></router-outlet>  <!-- THIS LINE -->
      </mat-sidenav-content>
    </mat-sidenav-container>
0 голосов
/ 02 июля 2018

Вы можете изменить mat-sidenav mode на push или side: 

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav 
      #drawer 
      class="sidenav" 
      fixedInViewport="true" 
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      mode="push"    <!-- THIS LINE -->
      >
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Application Title</span>
    </mat-toolbar>
    <h1>TEST</h1>
  </mat-sidenav-content>
</mat-sidenav-container>
...