今回はMaterial Design の Radio Buttonsの使いかたを紹介します。
Checkboxの同様にフォームで使用する場合や、表示内容を絞る際など使用しやすいパーツです。
今回作成するのは以下のようなラジオボタンです。
ブラウザのデフォルトより視覚性に優れてます。
See the Pen mdc radio by s-Kuma (@kumatechlab) on CodePen.
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の面で優れたものが使用できます。
検索項目で使用する場合や、表示内容切り替えにはぜひ使用していきたい項目です。