css - 使用 Angular Material 在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