css - 使用角度材料在 sidenav 中添加标题

Question

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

谢谢你。

Answer 1

如果您的要求是 side-nav，您应该在 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