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

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


原田です。今回はButtonについて解説します。

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

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




スポンサーリンク




Buttonについて

Materialで提供されているボタンは、大きく分けて5種類あります。

Buttonの種類

属性 概要 サンプル
md-button 背景:なし 枠線:なし 四角いボタン
md-raised-button 背景:なし 枠線:あり 四角いボタン
md-icon-button 背景:なし 枠線:なし 丸いボタン
md-fab 背景:あり 枠線:あり 丸いボタン
md-min-fab 背景:あり 枠線:あり 丸いボタン

サンプル

ソースコード

ソースコード解説

md-buttonには、disableRippleのパラメータを設定できる。これは、ボタンを押下した時に出てくる、波紋の設定となる。

clickイベント以外にfocusイベントを設定できる。しかし、ブラウザ依存なのかSafariでは実行されなかった。

また、fabボタンの中にアイコンを入れることで、それっぽいボタンを作ることが可能である。

まとめ

Buttonについて記載した。計5種類と豊富な用意されいる。


スポンサーリンク




コメントを残す