Question

在mat-sidenav-content内使用固定工具栏时出现问题。当可以看到leftnav栏时，sidenav-content内的固定toobar会采用另一种宽度，而右键会从屏幕上消失

选中 <mat-toolbar color="primary" style="z-index:10; position:fixed">

<mat-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" style="z-index: 10;">
        <button mat-button>My APP</button>    
</mat-toolbar>


  <!-- Nav list -->
  <mat-nav-list style="background: white; width:200px" class="menuList">
    <h3 mat-subheader>General</h3>
    <mat-list-item *ngFor="let menuItem of menu"class="menuItem">                         
      <a matLine  >{{menuItem.title}} </a>    
      <mat-icon mat-list-icon>{{menuItem.icon}}</mat-icon> 
    </mat-list-item>      
  </mat-nav-list>

  <mat-nav-list style="background: white; width:200px" class="menuList">
    <h3 mat-subheader>System</h3>
    <mat-list-item class="menuItem">       
      <a matLine>Users</a>
      <mat-icon mat-list-icon>person</mat-icon> 
      </mat-list-item>        
      <mat-list-item class="menuItem">       
        <a matLine>Settings</a>
        <mat-icon mat-list-icon>settings</mat-icon> 
        </mat-list-item>
  </mat-nav-list>
</mat-sidenav>

<mat-sidenav-content >   

<!-- Toolbar -->
<mat-toolbar  color="primary" style="padding:0px;margin:0px; z-index: 10; position:fixed">       
    <a mat-button>Page name</a>


    <div fxFlex></div>
    <button mat-icon-button>
        <mat-icon matBadge="15" matBadgeColor="warn">notifications</mat-icon>
    </button>
</mat-toolbar>


<!-- Add Content Here  -->
<div class="pagina">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin risus sit amet nunc vestibulum, ut vehicula nunc auctor. </p>
</div>

</mat-sidenav-content>
</mat-sidenav-container>

Demo stackblitz（您必须展开页面以查看会发生什么情况）

在导航示意图中设置固定的工具栏角度

0 个答案: