今回はMaterial Design の Checkboxes の使いかたを紹介します。
フォームで使用する場合や、表示内容を絞る際など使用しやすいパーツです。
今回作成するのは以下のようなチェックボックスです。
クリックした際にきれいにチェックが描かれます。
See the Pen mdc checkbox by s-Kuma (@kumatechlab) on CodePen.
Checkboxesの使用方法
上記のチェックボックスの作成方法を紹介します。
CSS
@use "@material/checkbox";
@use "@material/form-field";
@include checkbox.core-styles;
@include form-field.core-styles;チェックボックスとフォームフィールドの読み込みをします。
フォームフィールドを利用するとチェックボックスとラベルがきれいに表示されます。
JS
import {MDCFormField} from '@material/form-field';
import {MDCCheckbox} from '@material/checkbox';
const checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));
const formField = new MDCFormField(document.querySelector('.mdc-form-field'));
formField.input = checkbox;チェックボックス、フォームフィールドどちらもインスタンス化が必要です。
HTML
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="checkbox-1"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
<label for="checkbox-1">クリックしてみて！</label>
</div>使用する場合はラベルを変更します。
また、デフォルトの色については以下のように設定されています。
- チェック前枠色・・・rgba(on-surface, 0.54)
- チェック後チェックボックス内部の色・・・secondary
- チェック後チェックボックスチェックの色・・・on-secondary
mixinの利用
いろの変更やリップルサイズの変更ができます。
色変更をする
.my-checkbox {
@include checkbox.container-colors( rgba( theme.$primary, .54 ), transparent, theme.$primary,theme.$primary );
}mdc-checkboxクラスにmy-checkboxを追加しています。
引数は順に
- チェックなし時の枠線の色
- チェックなし時の背景の色
- チェック時の枠線の色
- チェック時の背景の色
- keyframeの作成(boolean) : default true
となっています。
上記の例ではデフォルトのprimaryを使用しているため紫色に変わっています。
keyframeの作成をfalseにするとデフォルトのkeyframeが適応されるため、チェック時にsecondaryに色が見えるようになります。
色変更をする(disable時)
.my-checkbox2 {
@include checkbox.disabled-container-colors(rgba( theme.$primary, .38 ), transparent, transparent, rgba( theme.$primary, .38 ));
}<div class="mdc-form-field">
<div class="mdc-checkbox mdc-checkbox--disabled my-checkbox2">
<input type="checkbox"
id="basic-disabled-checkbox"
class="mdc-checkbox__native-control"
disabled />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
<label for="basic-disabled-checkbox" id="basic-disabled-checkbox-label">This is my disabled checkbox</label>
</div>
mdc-checkboxクラスにmy-checkbox2を追加しています。
引数は順に
- チェックなし時の枠線の色
- チェックなし時の背景の色
- チェック時の枠線の色
- チェック時の背景の色
となっています。
チェックの色を変える
.my-checkbox {
@include checkbox.ink-color(theme.$secondary);
}
//disabled時
.my-checkbox2 {
@include checkbox.disabled-ink-color(theme.$secondary);
}指定した色でチェックの色が変化します。
上の例ではsecondaryの色で変更しています。
フォーカス時の円の色を変更
.my-checkbox {
@include checkbox.focus-indicator-color(red);
}指定下色でフォーカス時の周りにある円の色を変更できます。
画像の例では赤色に変更しています。
リップルサイズの変更
.my-checkbox {
@include checkbox.ripple-size(70px);
}リップルの影響範囲を指定できます。
上の例ではわかりやすいようかなり大きくしました。
ripple-sizeから変更することで自動的にリップル範囲外にラベルが来るように設定されます。
密度を変更する
.my-checkbox {
@include checkbox.density(-3);
}密度の変更ができます。
上で挙げたリップルサイズに似たような設定です。
(-3,-2,-1,0)で設定できます。
まとめ
汎用性の高いチェックボックスが、UI/UXの面で優れた状態で使用できます。
検索項目などで使用する場合にはぜひ使用していきたい項目です。