带有“半”侧模式的角形材料侧栏

Question

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

用户点击图标后

有没有办法做到这一点？

谢谢。

Answer 1

要实现这一点，您只需要引用这两个链接：

• Resizing Sidenav | Angular Material
• Navigation List | Angular Material

浏览下面的代码。实施将是这样的：

<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有一个功能要求

如果您阅读了这些评论，您还可以找到一些关于如何自己实施这些评论的示例，而这些评论并非正式提供。