MDC – Checkbox

兴杰(stooges.com.my) / 2023-05-03 / 原文

前言

Checkbox 不是搭配 TextField 使用, 而是搭配 FormField. 所以独立一篇来写.

参考

Docs – Selection controls: checkboxes

效果

Step by Step

install

yarn add @material/checkbox
yarn add @material/form-field

HTML

<div class="mdc-form-field">
  <div class="mdc-checkbox">
    <input type="checkbox" class="mdc-checkbox__native-control" id="rememberMe" />
    <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 class="mdc-checkbox__focus-ring"></div>
  </div>
  <label for="rememberMe">Remember me</label>
</div>

CSS Style

@use '@material/theme' with (
  $secondary: red
);

@use '@material/checkbox';
@use '@material/form-field';

@include checkbox.core-styles;
@include form-field.core-styles;

注: 它的颜色是 secondary 哦.

JavaScript

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;

new 两个实例, 然后让它们 connect 起来. Angular 也是这个概念. 只不过 Angular 是框架, 替我们封装了实现细节. 比如上面这个 connect 在 Angular 只需要在模板 #checkbox 然后 [input]="checkbox" 就表达好了.