在 angular 2 和 material 2 中折叠了 sidenav

Question

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

在打开状态，如下图，

但是在 关闭状态 它隐藏了整个 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>

Answer 1

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

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

但我很确定这会让您知道如何折叠 sidenav，使其一部分仍然可见。

Answer 2

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

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

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

在 angular 2 和 material 2 中折叠了 sidenav

Collapsed sidenav in angular 2 with material 2

typescript

angular-material2

angular