1

我正在使用 Angular 2 和 Material 2 开发 sidenav，

在Open State中，如下所示，

在此处输入图像描述

但是在关闭状态下它隐藏了整个sidenav，相反我只想隐藏菜单文本而不是图标。

看我的代码，

<md-toolbar color="primary">
  <button md-icon-button (click)="start.toggle()">
        <md-icon>menu</md-icon>
    </button>Test Project
  <button md-icon-button (click)="logout()">
      <md-icon>exit_to_app</md-icon>
    </button>
</md-toolbar>

<md-sidenav-layout class="left-navigation">
  <md-sidenav #start mode="side" opened="true">
    <md-nav-list>
      <a [routerLink]="view.link" md-list-item *ngFor="let view of views" (click)="sidenav.close()">
        <md-icon md-list-icon>{{view.icon}}</md-icon>
        <span md-line>{{view.name}}</span>
      </a>
    </md-nav-list>
  </md-sidenav>
  <div class="demo-sidenav-content">
    <router-outlet></router-outlet>
  </div>
</md-sidenav-layout>

4

2 回答 2

3

有同样的任务，这就是我解决它的方法：

md-sidenav-container {
  min-width: 60px;
}

md-sidenav {
  transform: translate3d(0, 0, 0);
}

md-sidenav.mat-sidenav-closed {
  visibility: visible;
}

更新：上面的解决方案有一个副作用 - 如果至少触发一次，导航栏永远不会达到“打开”和“关闭”状态。它具有“打开”和“关闭”的中间状态。

为了让它工作并完成动画，我使用了更多hacky解决方案：

md-sidenav-container {
  background-color: transparent;
  min-width: 60px;
}

md-sidenav {
  width: 230px;
  background-color: transparent;
}

.mat-sidenav-closed md-nav-list,
.mat-sidenav-closing md-nav-list {
  margin-left: 230px;
  width: 230px;
  visibility: visible;
 }

:host >>> .mat-sidenav-focus-trap>.cdk-focus-trap-content {
  overflow-y: visible;
}

外观上的唯一区别是动画行为。但对我来说，它甚至更好:)

于 2017-02-19T12:57:26.797 回答
1

您可以在此处按照我在此 git 问题中链接的 plunker 示例进行操作：单击

它与您需要的类似，但图标位于 sidenav 的另一侧，因此您需要更多动画才能保持该结构。

但我很确定这会给你一个好主意如何折叠sidenav，让它的一部分仍然可见。

于 2016-11-29T13:34:10.163 回答