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

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


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

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

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

※ Snackbarを利用するには、MdSnackBarModuleをインポートする必要があります。



スポンサーリンク




サンプル

ソースコード


https://gist.github.com/shinji5761/1cac557478d73d2dbc95c2284b2bd49b

ソースコード解説


Snackbarは、スクリプトでMdSnackBarのopenメソッドを実行することで表示される。openメソッドには、以下のパラメータを任意に設定することができる。

MdSnackBar.openメソッドのパラメータ

パラメータ 概要
message string メッセージに表示する文字列を設定する。
action any ボタンに表示するラベルの文字列を設定する。
config MdSnackBarConfig その他、追加オプションを設定する。
MdSnackBarConfigについて

パラメータ 概要
duration number 表示する時間を設定する(ms単位)。
direction Direction メッセージの表示位置を設定する。設定は”ltr”(左)、もしくは”rtl”(右)とする。

Snackbarを閉じるには、dismissメソッドを実行する。dismissメソッドは、actionを設定することで表示されるボタンを押下する、またはdurationを設定することでで自動で閉じるようになる。

また、openメソッドの返り値(ref)にあるdismissメソッドを実行することでも閉じる。

まとめ

Snackbarについて解説した。

スポンサーリンク



スポンサーリンク




コメントを残す