web-dev-qa-db-ja.com

「mat-toolna」を「mat-sidenav」の上に配置する方法Angular Material 5

Angular MaterialからMat ToolbarとMat-sidenavについて質問があるので、ここに書いています。Sidenavをツールバーの下に移動させようとしていますが、ツールバーは常に上部を占めています一部、このようなもの：

例

これが私のコードです：

<mat-sidenav-container class="sidenav-container" autosize>
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'side' : 'Push'"
      [opened]="(isHandset$ | async)">
      <mat-toolbar class="fixed-header">
        <img class="logooTest" src="data:image/gif;base64,test"/>
      </mat-toolbar>
                <mat-nav-list>
                          <mat-list-item>
                                <a routerLink="/dashboard">Test</a>
        <mat-icon mat-list-icon>home</mat-icon>
        </mat-list-item>
        <mat-list-item>
          <a routerLink="/dashboard">Test</a>
          <mat-icon mat-list-icon>home</mat-icon>
          </mat-list-item>
          <mat-list-item>
          <a routerLink="/test">Test</a>
          <mat-icon mat-list-icon>tune</mat-icon>
          </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>settings</mat-icon>
            </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>layers</mat-icon>
            </mat-list-item>
            <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
              <span class="full-width" *ngIf="isExpanded || isShowing">Test dropdown</span>
              <mat-icon mat-list-icon>flash_on</mat-icon>
              <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
            </mat-list-item>
                        <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
          <mat-list-item>
              <a routerLink="/#">Test</a>
              </mat-list-item>
              <mat-list-item>
                <a routerLink="/#">Test</a>
                </mat-list-item>
        <h2 matSubheader><mat-icon>account_balance</mat-icon>  Test</h2>
                                <mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
                                        <span class="full-width" *ngIf="isExpanded || isShowing">Test</span>
                                        <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
                                </mat-list-item>
                                <div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded">
          <mat-list-item>
            <a routerLink="/test">Test</a>
            </mat-list-item>
            <mat-list-item>
              <a routerLink="/#">Test</a>
              </mat-list-item>
            <h2 matSubheader><mat-icon>card_travel</mat-icon> Test</h2>
            <mat-list-item>
              <a routerLink="/#">Test</a>
              </mat-list-item>
              <mat-list-item>
                <a routerLink="/#">Test</a>
                </mat-list-item>
        </div>

                        </div>
                </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary" class="mat-elevation-z5">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
       <span class="spacer"></span>
       <div class="navigation">
        <a class="button" href="">
          <mat-icon class="logoutIcon">exit_to_app</mat-icon>
        <div class="logout"><span class="aligned-with-icon">Salir</span></div>
        </a>

      </div>
    </mat-toolbar>

  </mat-sidenav-content>
</mat-sidenav-container>

Angular and Angular Materialのバージョン5.6.0を使用しています。CSSを使用して、コードの構造の順序も変更しましたが、最後の1つでは、エラーが発生し、アプリケーションが実行できなくなりました。

angularangular-materialangular5angular-material2angular-material-5
4
S. A

あなたが中に入れたものmat-sidenav-contentが表示されます横メニュー。ツールバーの基本的なレイアウト構造above sidenavメニューとコンテンツは次のとおりです。

<mat-toolbar>...</mat-toolbar>
<mat-sidenav-container>...</mat-sidenav-container>

StackBlitz の例を次に示します。

8
G. Tranter

私にとっては、G。Tranterのようにhtmlを変更して、mat-sidenavのfixedInViewportをtrueからfalseに設定します

2
ananta radityawan

これを行う非常に簡単な方法は、マットツールバーで10にz-indexを追加することです。これはそのためのCSSです。

.mat-toolbar-example{
  position: fixed;
  z-index:10;
}

<mat-toolbar class="mat-toolbar-example"></mat-toolbar>
2
Tejaswi Kasat
.example-mat-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; 
    z-index: 10;
}
.example-sidenav-container {
    position: relative;
    height: 100%;
    display: block;
    transform: inherit;
}
1
sonnet1414

プロジェクトにAngular 6を使用している場合は、cliを介して次のコマンドを実行することにより、Mat-toolbarおよびMat-sidenavのボイラープレートを簡単に生成できます。

ng generate @angular/material:materialNav --name myNav

Sidenavコンポーネントを表示すると、次の結果が表示されます。

マットSidenavコンポーネント

0
Simon Daniel