具有“半”侧面​​模式的角材侧边栏

Question

我正在为我们的项目开发动态侧栏，基本上我们想要做的是在用户单击侧栏时设置动态侧栏，当用户单击后侧栏应该折叠并仅显示图标时，动态侧栏会展开（但不显示）完全折叠，它将保留图标），例如在用户单击图标之前。我们从有角度的材质函数中使用sidenav.toggle（），该函数基本上完全关闭了侧边栏，如果我不使用toggle（）函数，导航栏的“侧边”模式将不起作用。所以我想折叠到侧面模式的图标。（我们需要保留侧边模式的另一个原因是，我们还需要确保当用户展开侧边栏时，右侧内容应向右推送）

用户单击图标后

有没有办法做到这一点？

谢谢。

Answer 1

选项1：自动生成：

您可以使用“ Angular CLI组件示意图”从Material本身提供的模板中创建导航组件。

ng generate @angular/material:nav your-component-name

上面的命令将生成一个新组件，其中包括一个带有应用名称的工具栏和一个基于Material断点的响应式侧面导航。在此处查看有关角形材料原理图的更多信息

选项2：手动实施：

要实现此目的，您只需引用以下两个链接：

• 调整Sidenav的大小| 角材料
• 导航列表| 角材料

浏览以下代码。实现将是这样的：

<mat-drawer-container class="example-container mat-typography" autosize>
  <mat-drawer #drawer mode="side" disableClose="true" opened="true">
    <button mat-mini-fab (click)="isExpanded = !isExpanded" color="warn" style="margin: 10px;">
      <mat-icon aria-label="Menu">menu</mat-icon>
    </button>

    <mat-nav-list>
      <mat-list-item>
        <mat-icon mat-list-icon>person</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management A</h4>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>assignment</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management B</h4>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>domain</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management C</h4>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>folder_shared</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management X</h4>
      </mat-list-item>
    </mat-nav-list>
  </mat-drawer>

  <div class="example-sidenav-content">
    You cards and screen Contents goes here..
    Will be pushed towards right on expanding side navbar.
  </div>
</mat-drawer-container>

Answer 2

有一个功能请求https://github.com/angular/material2/issues/1728

如果您阅读评论，您还会发现一些关于如何在官方尚未提供的情况下自行实现它的示例。