web-dev-qa-db-ja.com

Angular「ハーフ」サイドモードのマテリアルサイドバー

私はプロジェクトの動的なサイドバーに取り組んでいます。基本的には、ユーザーがサイドバーをクリックしたときに動的なサイドバーを設定して、ユーザーがバックサイドバーをクリックすると折りたたまれてアイコンのみが表示されるときに展開されるようにします（ただし、完全に折りたたむとアイコンが保持されます）。たとえば、ユーザーがアイコンをクリックする前。 sidenav.toggle（）from angular基本的にサイドバーを完全に閉じるマテリアル関数を使用しており、toggle（）関数を使用しない場合、navbarの「サイド」モードは機能しません。サイドモードでアイコンに折りたたむ（サイドモードを維持する必要があるもう1つの理由は、ユーザーがサイドバーを開いたときに、右側のコンテンツを右にプッシュする必要があることも確認する必要があるためです）

enter image description here

ユーザーがアイコンをクリックした後 enter image description here

それを行う方法はありますか？

ありがとう。

cssangularangular-materialsidebardynamic-sizing
7
Zeqing Zhang

オプション1：自動生成：

'Angular CLIコンポーネントの回路図'を使用して、マテリアル自体によって提供されるテンプレートからナビゲーションコンポーネントを作成できます

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

上記のコマンドは、アプリ名を含むツールバーと、マテリアルブレークポイントに基づいて応答するサイドナビゲーションを含む新しいコンポーネントを生成します。 angular Material Schematics here の詳細を参照してください。

オプション2：手動で実装する：

それを実装するには、次の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>

Side Navigation CollapsedSide Navigation Expanded

16
shaheer shukur

私はこれを少しのCSSで行いました

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

ドローが開いていない場合、サイドナビゲーションの幅は0ではなく60pxです。アイコンを表示するのに十分です。

次の問題は、ボタン名やその他の説明的なものなど、たくさんの要素を非表示にする必要があることです。私にとっては、プロフィール画像の高さを変更し、追加のテキストを非表示にする必要があります。上記と同じ方法で：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を詳しく調べなければならず、openedStartおよびclosedStartのイベントエミッター呼び出しを見つけました。コンポーネントクラスに新しいブール値を作成しました。

showNavLabels: boolean;

次に、イベントをHTMLのこのブール値にバインドしました。

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

Angularの経験がまだないので、もっと良い方法があると思います。

お役に立てば幸いです。

0
Darren Street