angular - Angular material 2を使用して応答性の高いナビゲーションバーを作成するには?

Question

モバイルデバイスやタブレットなどの小さな画面で折りたたまれるAngular マテリアル 2を使用してナビゲーションバーを作成しようとしています。

私は見つけることmd-buttonができmd-menu-barましたが、Angularの資料のようではありませんでした.

score 17 · Accepted Answer

これは、Angular でレスポンシブなナビゲーションバーを作成する私のお気に入りの方法です。Angular 6 を使用する場合は、必ずバージョン 6.1 以降を使用してください Stackblitz
での作業例: https://stackblitz.com/edit/angular-v6xwte

小さい画面での例:

大きな画面での例:

これを行うための正確な手順は次のとおりです。

1) 必要なパッケージをインストールします。端末に次のように入力します。

npm install --save @angular/material @angular/cdk @angular/animations

npm install @angular/flex-layout --save

2) app.module.ts に必要なモジュールをインポートします

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import {
  MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule
} from '@angular/material';

これらのモジュールを以下の imports 配列に忘れずに追加してください。

3) マテリアルアイコンリンクを index.html に追加します
。リンクは、Angular コンテンツの前に配置する必要があります。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

4) styles.css に Angular テーマを追加し、余白を 0% に設定します。

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
body{
    margin: 0%;
}

5) app.component.html にツールバーの HTML コードを追加します。

<div style="height: 100vh;"> 
<mat-toolbar color="primary">
    <div fxShow="true" fxHide.gt-sm="true">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
    </div>
    <a mat-button class="companyName" routerLink="/">
      <span>Site name</span>
    </a>
    <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <a mat-button routerLink="/about-us">About us</a>
      <a mat-button routerLink="/prices">Prices</a>
      <a mat-button routerLink="/start-page">Start page</a>
      <a mat-button routerLink="/offer">Offer</a>
      <a mat-button routerLink="/contact">Contact</a>
    </div>
  </mat-toolbar>
  <mat-sidenav-container fxFlexFill class="example-container">
    <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
      <div fxLayout="column">
        <a mat-button routerLink="/about-us">About us</a>
        <a mat-button routerLink="/prices">Prices</a>
        <a mat-button routerLink="/start-page">Start page</a>
        <a mat-button routerLink="/offer">Offer</a>
        <a mat-button routerLink="/contact">Contact</a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>
      Awesome content
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

6) app.component.css でツールバーのスタイルを設定します

.companyName{
    font-size: 150%;
}
div {
    overflow: inherit;
}
a{
    text-decoration: none;
    font-size: 110%;
    white-space: normal;
}
button{
    font-size: 110%;
    min-width: min-content;
}
.example-icon {
    padding: 0 14px;
  }

  .example-spacer {
    flex: 1 1 auto;
  }
  .mat-sidenav-content{
      font-size: 200%;
      text-align: center;
  }