KumaTechLab
2020-11-14/2023-05-23

【Material Design】Checkboxes の使いかた

【Material Design】Checkboxes の使いかた

今回はMaterial Design の Checkboxes の使いかたを紹介します。

フォームで使用する場合や、表示内容を絞る際など使用しやすいパーツです。

今回作成するのは以下のようなチェックボックスです。

クリックした際にきれいにチェックが描かれます。

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の利用

いろの変更やリップルサイズの変更ができます。

色変更をする

material-design-checkbox - 20201114092807
.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時)

material-design-checkbox - 20201114094653
.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を追加しています。

引数は順に

  • チェックなし時の枠線の色
  • チェックなし時の背景の色
  • チェック時の枠線の色
  • チェック時の背景の色

となっています。

チェックの色を変える

material-design-checkbox - 20201114095255
material-design-checkbox - 20201114095448
.my-checkbox {
	@include checkbox.ink-color(theme.$secondary);
}
//disabled時
.my-checkbox2 {
	@include checkbox.disabled-ink-color(theme.$secondary);
}

指定した色でチェックの色が変化します。

上の例ではsecondaryの色で変更しています。

フォーカス時の円の色を変更

material-design-checkbox - 20201114100129
.my-checkbox {
	@include checkbox.focus-indicator-color(red);
}

指定下色でフォーカス時の周りにある円の色を変更できます。

画像の例では赤色に変更しています。

リップルサイズの変更

material-design-checkbox - 20201114100748
.my-checkbox {
	@include checkbox.ripple-size(70px);
}

リップルの影響範囲を指定できます。

上の例ではわかりやすいようかなり大きくしました。

ripple-sizeから変更することで自動的にリップル範囲外にラベルが来るように設定されます。

密度を変更する

material-design-checkbox - 20201114101246
.my-checkbox {
	@include checkbox.density(-3);
}

密度の変更ができます。

上で挙げたリップルサイズに似たような設定です。

(-3,-2,-1,0)で設定できます。

まとめ

汎用性の高いチェックボックスが、UI/UXの面で優れた状態で使用できます。

検索項目などで使用する場合にはぜひ使用していきたい項目です。

また、使用方法、デザイン詳細を参考にして利用してみてください。

2020 KumaTechLab.