web-dev-qa-db-ja.com

Angularマテリアル2を使用してレスポンシブナビゲーションバーを作成する方法

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

Angularマテリアルにあるmd-buttonは見つかりませんでしたが、md-menu-barは見つかりませんでした。

angularangular-material2
32
kero

これは、nav-barアプリでAngular2 + Material 2とflex-layoutを使用してレスポンシブangular-cliを作成するために使用したものです。

（ Angular MaterialおよびAngular CDKをインストールしてください にアクセスしてください）

1）フレックスレイアウトのインストール

npm install @angular/flex-layout -save

2）app.module.tsにflex-layoutを含める

import {FlexLayoutModule} from "@angular/flex-layout";

3）インポート

imports: [
 BrowserModule,
 FormsModule,
 HttpModule,
 RoutingModule,
 FlexLayoutModule,
MyOwnCustomMaterialModule // Please visit the link above "Install Angular Material and Angular CDK", and check (Step 3: Import the component modules).
],

app.component.html

<mat-toolbar color="primary">

    <button mat-button routerLink="/">
    <mat-icon>home</mat-icon> 
        {{title}}</button>

    <!-- This fills the remaining space of the current row -->
    <span class="fill-remaining-space"></span>
    <div fxLayout="row" fxShow="false" fxShow.gt-sm>
        <button mat-button routerLink="/products">Products</button>
        <button mat-button routerLink="/dashboard">Dashboard</button>
    </div>
    <button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
     <mat-icon>menu</mat-icon>
    </button>

</mat-toolbar>
<mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item routerLink="/products">Products</button>
    <button mat-menu-item routerLink="/dashboard">Dashboard</button>
    <!--<button mat-menu-item>Help</button>-->
</mat-menu>

app.component.css

.fill-remaining-space {
   /*This fills the remaining space, by using flexbox.  
  Every toolbar row uses a flexbox row layout. */
  flex: 1 1 auto;
}

注：テストするには、ページのサイズを変更します。

flex-layout docsをご覧ください

47
user2662006

最も簡単な方法は、マテリアルでレスポンシブナビゲーションバーを作成するためにAngularを使用します6 CLI 回路図 。

（ng add @ angular/materialを実行するときに「コレクション "@ angular/material"を解決できません」が表示される場合は、 this ）を参照してください

次に、生成されたコンポーネントを使用します<app-my-nav></app-my-nav>上記のタグをメインコンポーネントに追加します

デスクトップPCのレスポンシブビュー：Responsive view on Desktop PC

低解像度のレスポンシブな折りたたみメニュー：Responsive collapsed menu with low resolution

これは元々 Angularのブログ で見られました。

13
rjdkolb

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

小さな画面の例： Toolbar on a small screen

大きな画面の例： Toolbar on a large screen

正確な手順は次のとおりです。

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;
  }
11
Tomasz Chudzik

Angular-Material 5.0.2以降の新しいコンポーネント名を使用したドロワー実装を備えたツールバーを使用して、答えを修正しようとする粗雑な試み

方法：すべてのヘッダーリンクのCSSを修正する必要があります。メニューアイコンは透明である必要があります。

https://responsivematerial2.stackblitz.io/

.mat-sidenav-container {
  background: rgba(0, 0, 0, 0.08);
}

.blank-grow {
  flex: 1 1 auto;
}
<mat-sidenav-container fullscreen>
  <mat-sidenav #sidenav>
    <mat-nav-list>
      <a mat-list-item>
        <mat-icon mat-list-icon>home</mat-icon>
        <span mat-line>home</span>
      </a>

      <a mat-list-item>
        <mat-icon mat-list-icon>backup</mat-icon>
        <span mat-line>Backup</span>
      </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-toolbar color="primary">
    <button mat-icon-button (click)="sidenav.open()" fxHide="false" fxHide.gt-sm>
      <mat-icon>menu</mat-icon>
    </button>
    <span> Big Header</span>
    <span class="blank-grow"></span>
    <div fxLayout="row" fxShow="false" fxShow.gt-sm>
      <a>
        <mat-icon mat-list-icon>home</mat-icon>
        <span mat-line>home</span>
      </a>

      <a>
        <mat-icon mat-list-icon>backup</mat-icon>
        <span mat-line>Backup</span>
      </a>
    </div>
  </mat-toolbar>
</mat-sidenav-container>
4
Anup

Githubのangular2-materialプロジェクトをご覧ください。これまでに公開した材料設計コンポーネントのリストは次のとおりです。

https://www.npmjs.com/~angular2-material

また、md-sidenavまたはmd-toolbarがあなたが探しているものだと思います。

md-sidenav- https://www.npmjs.com/package/@angular2-material/sidenav

md-toolbar- https://www.npmjs.com/package/@angular2-material/toolbar

注：このプロジェクトはまだアルファ版であり、APIに重大な変更が加えられる可能性があります。実稼働環境での使用は推奨されません。

4
Cerny

私のプレゼンテーション ユーザーが気に入るエンタープライズUIを作成する は、Angular Materialのこれらのパターンのいくつかをカバーしています。 StackBlitzの例へのリンクは、スピーカーノートにあります。

オーバーフローメニューのあるレスポンシブボタンバー：これはTopNavの中または下に配置できます。 https://stackblitz.com/edit/material-responsive-button-bar?file=app%2Fbutton-bar%2Fbutton-bar.component.ts

動的にネストされたTopNavメニュー：このメニューには完全にアクセスできないことに注意してください。良いa11yエクスペリエンスを完全にサポートするには、さらに作業が必要です。 https://stackblitz.com/edit/dynamic-nested-topnav-menu?file=app/app.component.ts

動的なネストされたSideNavメニュー：変換パターンを使用して、モバイルでTopNavをSideNavに切り替える場合、これは動的なSideNavメニューを作成する方法を示します。 https://stackblitz.com/edit/dynamic-nested-sidenav-menu?file=app%2Fapp.component.html

2
Splaktar

mat-toolbar、mat-sidenav、およびflex-layout（fxFlexFill、...）を使用して、レスポンシブメニューを作成できます。

Stackblitzの例を参照 。

詳細...

2
danger89

私はuser2662006の回答を編集し、以下の修正とコードの最適化を行いました。現在、StackOverflowポイントは低すぎて、編集はもちろんコメントを送信する特権さえも与えられないことに注意してください。

1） Angular MaterialおよびAngular CDKをインストール

2）フレックスレイアウトのインストール

npm install @angular/flex-layout -save

3）app.module.tsにflex-layoutを含める

import {FlexLayoutModule} from "@angular/flex-layout";

4）関連する材料とフレックスモジュールのインポート

imports: [
 ...,
 FlexLayoutModule,
 MatToolbarModule,
 MatIconModule,
 MatMenuModule,
 MatButtonModule,
],

app.component.html

<mat-toolbar color="primary">
    <button mat-button routerLink="/">
        <mat-icon>home</mat-icon> 
        {{title}}
    </button>

    <span class="fill-remaining-space"></span>

    <div fxLayout="row" fxHide fxShow.gt-sm>
        <button mat-button routerLink="/products">Products</button>
        <button mat-button routerLink="/dashboard">Dashboard</button>
    </div>
    <button mat-button [mat-menu-trigger-for]="menu" fxShow fxHide.gt-sm>
     <mat-icon>menu</mat-icon>
    </button>

</mat-toolbar>
<mat-menu x-position="before" #menu>
    <button mat-menu-item routerLink="/products">Products</button>
    <button mat-menu-item routerLink="/dashboard">Dashboard</button>
</mat-menu>

app.component.css

.fill-remaining-space {
   /*This fills the remaining space, by using flexbox.  
  Every toolbar row uses a flexbox row layout. */
  flex: 1 1 auto;
}

ノート：

2
Cengiz