具有“半”侧边模式的角状材料侧栏

Question

我正在为我们的项目的动态侧栏工作，基本上我们要做的是设置一个动态侧栏，当用户点击侧栏时，它会扩散，当用户单击返回侧栏应该折叠和显示只显示图标(但不是完全折叠它将保留图标)例如用户单击图标。我们使用的是angular material函数中的sidenav.toggle()函数，它基本上完全关闭了侧边栏，如果我不使用切换()函数，导航栏的"Side“模式就不起作用。所以我想折叠到带有侧边模式的图标。(我们需要保持侧边模式的另一个原因是，我们还需要确保当用户展开侧边栏时，右侧内容应该推送到右侧)

​

​

用户单击图标后

​

有没有办法做到这一点？

谢谢。

Answer 1

选项1:自动生成：

您可以使用'Angular CLI component schematics'根据材料本身提供的模板创建导航组件

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

上面的命令将生成一个新组件，其中包括一个带有应用程序名称的工具栏和一个基于材料断点的响应侧导航。有关angular material schematics here的更多信息，请参阅

选项2:手动实现：

要实现这一点，您只需参考以下两个链接：

• 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

我用一点CSS实现了这一点。

    mat-sidenav:not(.mat-drawer-opened) {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    width: 60px !important;
    overflow: hidden;
  }

因此，当绘图未打开时，sidenav的宽度是60px，而不是0。足够显示你的图标了。

好的，下一个问题是，你需要隐藏一堆东西，比如按钮名称和其他描述性的东西，对我来说，我需要改变个人资料图像的高度，并隐藏额外的文本。我使用:not选择器以与上面相同的方式完成此操作：

  mat-sidenav:not(.mat-drawer-opened) div.leftNav div.navProfile img {
    width: 40px; margin: 16px 0 0px 0;
  }
  mat-sidenav:not(.mat-drawer-opened) .navTitle,
  mat-sidenav:not(.mat-drawer-opened) .profileTitle {
    display: none;
  }

折叠时，我不想显示按钮名称，所以我用*ngIf将名称括起来

 <span class="navName" *ngIf="opened">{{ page?.name }} </span>

这应该是有效的，它确实有效，但存在一个问题。ngIf被绑定到打开的事件，您将注意到当事件触发时(为了说明它的动画)，在抽屉打开时显示您的标签会有延迟。

为了解决这个问题，我不得不深入研究sidenav的api，并找到了一个调用openedStart和closedStart的事件发射器。我在component类中创建了一个新的bool，

showNavLabels: boolean;

然后将事件绑定到HTML中的这个bool。

  <mat-sidenav class="sidenav" #sidenav mode="side" [(opened)]="opened"
      (openedStart)='showNavLabels = !showNavLabels'
      (closedStart)='showNavLabels = !showNavLabels' >

我相信还有更好的方法，因为我还没有使用Angular的经验。

我希望它能帮到你。

Answer 3

此https://github.com/angular/material2/issues/1728存在功能请求

如果你阅读了评论，你还会发现一些关于如何自己实现它的例子，尽管它不是官方提供的。