BETA

Angular Materialのsidenavをコンポーネントとして実装する

投稿日:2018-10-17
最終更新:2018-10-24

この記事で書くこと

Angular MaterialのsidenavをAngularプロジェクトに実装する方法を説明します。

Angular Material, Angular CDKのインストール

既にAngularプロジェクトを作成されていると仮定して話を進めます。

プロジェクトフォルダにて以下のコマンドを入力してインストールを実行します。

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

Angular Materialをプロジェクトに追加させる

以下のコマンドを続けて入力して、プロジェクトにAngular Materialライブラリを追加します。

ng add @angular/material

このコマンドを実行することで、Angular Materialライブラリの依存関係をプロジェクトに追加してくれます。

sidenavコンポーネントの実装

コンポーネントの生成

以下のコマンドを実行することで、Angular Materialのsidenavをコンポーネントとして生成して追加します。

ng generate @angular/material:material-nav --name=test-sidenav

test-sidenavの部分はコンポーネントの名前なので、好きな名前にしてください。 ng generate @angular/material:material-navは、Angular 6から実行できるようになりました

コンポーネントの埋め込み

コンポーネントを作成したらHTMLにコンポーネントを埋め込みます。

<app-test-sidenav></app-test-sidenav>

上記を埋め込んで試しにng serveを行いローカル環境で確認すると、このようなバーが表示されます。

デフォルトでレスポンシブデザインとなっているので、PCディスプレイ等の横幅の大きな画面では以下のようになります。

テーマの読み込み

Angular Materialが用意しているテンプレートを使用することが出来ます。 使用するには、style.cssに以下の一行を追加します。

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

テンプレートは以下の4種類あり、好きなものを選ぶ事が出来ます。

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

参考文献

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@roottoolの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう