【Material Design】Radio Buttonsの使い方
今回はMaterial Design の Radio Buttonsの使いかたを紹介します。
Checkboxの同様にフォームで使用する場合や、表示内容を絞る際など使用しやすいパーツです。
今回作成するのは以下のようなラジオボタンです。
ブラウザのデフォルトより視覚性に優れてます。
RadioButtonsの使用方法
上記のラジオボタンの作成方法を紹介します。
CSS
@use "@material/radio/styles";@use "@material/form-field";@include form-field.core-styles;
radioスタイルの読み込みとformfieldの取り込みで表示を整えます。
JS
import {MDCFormField} from '@material/form-field';import {MDCRadio} from '@material/radio';const radio = new MDCRadio(document.querySelector('.mdc-radio'));const formField = new MDCFormField(document.querySelector('.mdc-form-field'));formField.input = radio;
radio、form-fieldのどちらもインスタンスの作成が必要です。
HTML
<div class="mdc-form-field"><div class="mdc-radio"><input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked><div class="mdc-radio__background"><div class="mdc-radio__outer-circle"></div><div class="mdc-radio__inner-circle"></div></div><div class="mdc-radio__ripple"></div></div><label for="radio-1">ラジオボタン1</label></div>
label、inputで使用する場合に付属がいろいろとついた形をしています。
使いかたの基本は変わらず、nameを同一にすれば択一式になります。
また、デフォルトの色については以下のように設定されています。
- チェック前枠色・・・rgba(on-surface, 0.54)
- チェック後ボタンの色・・・secondary
mixinの利用
色の変更やリップルサイズの変更ができます。
mixinを利用するために読み込むCSSを少し変更します。
「@use “@material/radio”;」を追加します。
@use "@material/radio/styles";@use "@material/radio";@use "@material/form-field";
枠色の変更
.my-radio {@include radio.unchecked-stroke-color(theme.$primary); //チェックなし時@include radio.checked-stroke-color(theme.$primary); //チェック時}
チェックされている時、チェックされていない時の枠の色を変えることができます。
今回はテーマのprimaryカラーで作成しています。
枠内の色変更
.my-radio {@include radio.ink-color(theme.$primary);}
checkされた際の枠内の色を変更できます。
disable時の枠色変更
.my-radio2 {@include radio.disabled-unchecked-stroke-color(rgba(theme.$primary, .38)); //非チェック状態@include radio.disabled-checked-stroke-color(rgba(theme.$primary, .38)); //チェック状態}
<div class="mdc-form-field"><div class="mdc-radio mdc-radio--disabled my-radio2"><input class="mdc-radio__native-control" type="radio" id="radio-2" name="radio" disabled><div class="mdc-radio__background"><div class="mdc-radio__outer-circle"></div><div class="mdc-radio__inner-circle"></div></div><div class="mdc-radio__ripple"></div></div><label for="radio-1">ラジオボタン2</label></div>
disable時の枠色を変更できます。
disable時の枠内の色変更
.my-radio2 {@include radio.disabled-ink-color(rgba(theme.$primary, .38));}
disable時かつチェック時の枠内の色を変更できます。
選択可能幅調整
.my-radio {@include radio.touch-target(200px, 100px);}
タッチ可能な幅を調整できます。
どのように計算されているかは直接mixinを見てみてください。
リップルサイズの変更
.my-radio {@include radio.ripple-size(100px);}
リップルサイズを変更することが可能です。
密度変更
.my-radio {@include radio.density(-3);}
タッチ可能サイズやリップルサイズなどを含めた設定です。
全体の大きさを(-3,-2,-1,0)から変更できます。
まとめ
ブラウザデフォルトよりUI/UXの面で優れたものが使用できます。
検索項目で使用する場合や、表示内容切り替えにはぜひ使用していきたい項目です。
