1

Angular 2 と Material 2 を使用して sidenav を開発しています。

Open Stateでは、以下のようになります。

ここに画像の説明を入力

しかし、閉じる状態では、サイドナビゲーション全体が非表示になります。代わりに、アイコンではなくメニューテキストのみを非表示にしたいです。

私のコードを見て、

<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

1

こちらの git issue でリンクした plunker の例に従うことができます:クリック

必要なものと似ていますが、アイコンは sidenav の反対側にあるため、その構造を維持するにはさらにアニメーションが必要になります。

しかし、これにより、サイドナビゲーションを折りたたんで、その一部を表示したままにする方法がよくわかると確信しています。

于 2016-11-29T13:34:10.163 に答える