【Angular】10分で分かるAngularMaterialのSidenavの使い方

0
【Angular】10分で分かるAngularMaterialのSidenavの使い方


原田です。今回はSidenavについて解説を行います。

ソースコードはGitHubで公開しています。

AngularMaterialの環境構築については、こちらを参照してください。
http://issier.com/archives/17#



スポンサーリンク




サンプル

Sidenavを使うには、MdSidenavModuleをインポートしておく必要がある。MdSidenavModuleをインポートすることで、md-sidenav-containerとmd-sidenavが利用できるようになる。

Sidenavには大きく分けて3つのモードがあります。

Sidenavのモードについて

モード 概要
over メインコンテンツに覆いかぶさる形で表示する。メインコンテンツは操作できない。
push メインコンテンツを横にずらして表示する。メインコンテンツは操作できない。
side メインコンテンツを横にずらして表示する。メインコンテンツも操作できる。

ソースコード


https://gist.github.com/shinji5761/57bf68f57a92d03880a7098ebf95124f

ソースコード解説

md-sidenav-containerには2つの領域がある。

  • md-sidenavに囲まれている部分
  • そうでない部分

md-sidenavに囲まれている部分が、サイドバーに表示されるコンテンツとなり、そうでない部分がメインコンテンツとなる。

md-sidenavにIDを設定しする(#sidenav_pushなど)。ボタンを押下したときに、設定したIDのopenメソッドを呼ぶことでサイドバーが表示される。closeメソッドはその逆となり、サイドバーが非表示になる。

また、md-sidenavには、以下の属性を設定することができる。

md-sidenavの属性

種類 属性 概要
Input opened サイドバーの開閉を示す。trueを設定すると、サイドバーが開いた状態となる。
Output open サイドバーが開いた後に呼ばれるイベント。
Output close-start サイドバーが閉じる前に呼ばれるイベント。
Output close サイドバーが閉じた後に呼ばれるイベント。

また、md-sidenav-containerには、以下の属性を設定することができる。

md-sidenav-container

種類 属性 概要
Output backdropClick バックドロップ(黒くなっている部分)をクリックしたときに呼ばれるイベント

まとめ

Sidenavについて記載した。


スポンサーリンク




コメントを残す