时间戳

首页 > 解决方案 > 如何在工具栏下使用 sidenav

angular - 如何在工具栏下使用 sidenav

问题描述

我正在尝试使用工具栏组件和 sidenav，但是，如果我以下列方式使用它，则只有我的组件的工具栏会消失：

<!--Toolbar of sidebar-->
<app-toolbar></app-toolbar> 
<mat-sidenav-container class="example-container">
   <mat-sidenav opened mode="side">   
   </mat-sidenav>
   <!--Toolbar of sidebar-->
   <app-toolbar></app-toolbar>
 </mat-sidenav-container>

但是如果我按照下面的方式使用它，工具栏就在sidenav的内容里面；如何使工具栏位于仪表板类型的 sidenav 顶部（我知道如何根据事件隐藏或显示它，但由于限制，最好的选择是保持它在视线范围内）？

 <mat-sidenav-container class="example-container">
   <mat-sidenav opened mode="side">   
   </mat-sidenav>
   <!--Toolbar of sidebar-->
   <app-toolbar></app-toolbar>
 </mat-sidenav-container>

示例（预期）

图像仪表板

标签： angularangular-materialmaterial-design

解决方案

推荐阅读