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

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


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

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

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



スポンサーリンク




サンプル

Radiobuttonを利用するには、MdRadioModuleをインポートする必要があります。
インポートすることで、md-radio-groupmd-radio-buttonを利用できるようになります。

ソースコード


https://gist.github.com/shinji5761/ba12e3a92f066d40923f5172b53bc86c

ソースコード解説


Radiobuttonは、md-radio-groupでグループを作り、そのタグの中に、md-radio-buttonでラジオボタンを作成します。

md-radio-group、md-radio-buttonともに、いくつかのパラメータがあります。

md-radio-buttonのパラメータ

種類 パラメータ 概要
Input checked ラジオボタンがチェック状態。
value ラジオボタンの値。
align ラジオボタンの位置。
disabled ラジオボタンの活性状態。
Output change ラジオボタン変更イベント。
md-radio-group

種類 パラメータ 概要
Input align ラジオボタンの位置。
disabled ラジオボタンの活性状態。
Output change ラジオボタン変更イベント。

md-radio-buttonでは、個別で設定することができる。md-radio-groupでは、グループ内にあるボタン全てに設定値が反映される。

まとめ

ラジオボタンについて解説した。


スポンサーリンク




コメントを残す