使用角材质在sidenav中添加标题

Question

我需要帮助来实现如上图所示的sidenav。我尝试了一些使用Mat-toolbar进行添加的步骤，但不确定如何添加标头并将其他列表放在其下。像图像中一样，配置文件作为标题以及详细信息，活动在其下方释放。 Stackblitz：https://stackblitz.com/edit/angular-ve3igg

谢谢。

Answer 1

您应该在side-nav-container之间而不是在mat-drawer-container中编写代码 如果您的要求是侧面导航；

   <mat-sidenav-container class="example-container">
      <mat-sidenav #sidenav mode="side" [(opened)]="opened" >
      <h1 class="bg-primary"> Header</h1>
    <hr>
    <ul class="pull-right">
      <li> first Element<li>
      <li> second Element<li>
      <li> first Element<li>

      </ul>
      </mat-sidenav>
</mat-sidenav-container>

这是Stackblitz演示，其中包含一些您需要的伪文本： https://stackblitz.com/angular/rmbjojbnxvk

据您所知：https://material.angular.io/components/sidenav/api