MDC でよく使われる部品

前回は Material Design Components for Web の導入方法について説明しました。今回は MDC で用意されている部品の中から、アプリ開発でよく使われるものについて説明します。

TextField

TextField は入力欄を提供するコンポーネントです。input 要素を装飾してくれます。

インストール

$ npm install @material/textfield

HTML

<div class="mdc-text-field">
  <input type="text" id="blog-title" class="mdc-text-field__input" />
  <label class="mdc-floating-label" for="blog-title">ブログタイトル</label>
  <div class="mdc-line-ripple"></div>
</div>

scss

@import "@material/textfield/mdc-text-field";

TypeScript

import { MDCTextField } from '@material/textfield';

const textField = new MDCTextField(document.querySelector('.mdc-text-field')!);

表示

フォーカスがあたるとヒント部分がアニメーションします。

Checkbox

ユーザーに複数項目から選択をさせるときに使います。「3つの選択肢のうち 1つだけ選ぶ」というような場面では使用しません。

インストール

$ npm install @material/checkbox

HTML

<div class="mdc-form-field">
    <div class="mdc-checkbox">
    <input
        type="checkbox"
        class="mdc-checkbox__native-control"
        id="keep-login"
    />
    <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="keep-login">ログイン状態を維持する</label>
</div>

scss

@import "@material/form-field/mdc-form-field";
@import "@material/checkbox/mdc-checkbox";

TypeScript

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;

表示

チェック時にアニメーションします。

Select

複数の選択肢から 1 つを選んでもらう時に使用するコンポーネントです。同様の機能を提供するものとしてラジオボタンもありますが、画面の狭いモバイル環境を考慮すると、この Select を使用する場面は多いでしょう。

インストール

$ npm install @material/select

HTML

<div class="mdc-select">
    <div class="mdc-select__anchor demo-width-class">
    <i class="mdc-select__dropdown-icon"></i>
    <div class="mdc-select__selected-text"></div>
    <span class="mdc-floating-label">使用しているOS</span>
    <div class="mdc-line-ripple"></div>
    </div>

    <div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
    <ul class="mdc-list">
        <li
        class="mdc-list-item mdc-list-item--selected"
        data-value=""
        aria-selected="true"
        ></li>
        <li class="mdc-list-item" data-value="android">
        Android
        </li>
        <li class="mdc-list-item" data-value="ios">
        iOS
        </li>
        <li class="mdc-list-item" data-value="windows">
        Windows
        </li>
    </ul>
    </div>
</div>

scss

@import "@material/list/mdc-list";
@import "@material/menu-surface/mdc-menu-surface";
@import "@material/menu/mdc-menu";
@import "@material/select/mdc-select";

// デモ用
.demo-width-class {
    width: 400px;
}

TypeScript

import { MDCSelect } from "@material/select";

const select = new MDCSelect(document.querySelector(".mdc-select")!);

表示

mdc-floating-label がついている部分はラベルになります。

Button

ユーザーにクリックしてもらうためのボタンを提供するコンポーネントです。平面なボタンと盛り上がっているボタンの 2 種類があります。

インストール

$ npm install @material/button

HTML

<button class="mdc-button">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">詳細を表示</span>
</button>

scss

@import "@material/button/mdc-button";

TypeScript

import { MDCRipple } from "@material/ripple";

const buttonRipple = new MDCRipple(document.querySelector(".mdc-button")!);

表示

タップするとリップルエフェクトがかかります。

まとめ

MDCで提供されている部品の内、Web アプリ開発でよく使われる部品について説明しました。他にもたくさん部品は用意されているので、公式サイトを見てみましょう。