Question

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

用户点击图标

后

有办法吗？

感谢。

Answer 1

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

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

<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，并找到一个eventemitter调用openedStart和closedStart。我在组件类中创建了一个新布尔，

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

有功能请求

如果你阅读了这些评论，你也会找到一些关于如何自己实施这些评论的例子。

角度材料侧栏，带有＆＃34; Half＆＃34;侧模式

3 个答案: