24

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

在此处输入图像描述

用户点击图标后在此处输入图像描述

有没有办法做到这一点？

谢谢。

4

3 回答 3

45

选项 1：自动生成：

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

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

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

选项 2：手动实施：

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

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

<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>

侧面导航折叠 侧边导航扩展

于 2019-03-20T05:17:02.903 回答
3

我用一点 CSS 做到了这一点

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

因此，当绘图未打开时，sidenav 的宽度为 60 像素而不是 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 调用 opensStart 和 closedStart。我在组件类中创建了一个新的布尔值，

showNavLabels: boolean;

然后将事件绑定到 HTML 中的这个布尔值。

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

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

我希望它可以帮助你。

于 2020-02-10T11:53:09.497 回答
0

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

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

于 2018-01-25T20:21:35.737 回答