折角sidenav角度2与材料2

Question

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

它看起来像开放状态，如下所示，

但是在关闭状态它隐藏整个导航，而我只想隐藏菜单文本而不是图标。

看看我的代码，

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

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

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

更新：上面的解决方案有副作用 - 导航栏永远不会丰富状态＆＃34;打开＆＃34; ＆安培; ＆＃34;关闭＆＃34;如果至少触发一次。它有中间状态＆＃34;开放＆＃34; ＆安培; ＆＃34;结束＆＃34;

为了让它工作并完成动画，使用了更多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;
}

外观的唯一区别是动画行为。但就我而言，它更好！:)

Answer 2

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

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

但是我很确定这会让你知道如何折叠sidenav，留下一部分仍然可见。