【Material Design】Buttonの使い方

【Material Design】Buttonの使い方

今回はMaterial DesignのButtonの使用方法を説明します。

通常よく見るタイプのボタンやテキストのみでクリック時に色がつくタイプのボタンなど使用できます。

リップルを併用することでクリック屋タッチした感覚が明確になります。

今回使用するのは3種類です。

テキストタイプ

material-deign-button - text-button

外枠タイプ

material-deign-button - outlined-button

色塗りタイプ

material-deign-button - filled-button

Buttonの使用方法

上記の3種類をそれぞれ見ていきます。

HTML部分のみ変化していきますので、先にCSSとJSから見ていきます。

CSS

@use "@material/button";

@include button.core-styles;

ボタンの読み込みと基本スタイルの適用です。

JS

import {MDCRipple} from '@material/ripple';
//要素が一つの場合
//const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));
//要素が複数の場合
const buttonRipples = [].map.call(document.querySelectorAll('.mdc-button'), function(el) {
  return new MDCRipple(el);
});

ボタンクリック時のリップルの動きを要素に適用します。

要素が複数ある場合には下の方を利用してください。

テキストタイプ

material-deign-button - text-button
  <button class="mdc-button">
		<div class="mdc-button__ripple"></div>
		<span class="mdc-button__label">テキスト</span>
	</button>

非常な簡単な作りです。

buttonに「mddc-button」を設定し、ボタンテキストには「mdc-button__label」を使用しています。

外枠タイプ

material-deign-button - outlined-button
 <button class="mdc-button mdc-button--outlined">
		<div class="mdc-button__ripple"></div>
		<span class="mdc-button__label">外枠</span>
	</button>

テキストスタイルに加えてbuttonに「mdc-button–outlined」というModifierクラスを付け足しています。

色塗りタイプ

material-deign-button - filled-button
  <button class="mdc-button mdc-button--raised">
		<div class="mdc-button__ripple"></div>
		<span class="mdc-button__label">色塗り</span>
	</button>

テキストスタイルに加えてbuttonに「mdc-button–raised」というModifierクラスを付け足しています。

アイコン付

material-deign-button - 20201111112013

Material Iconを使用する場合です。

head内に以下を記述してください。fontawesomeと同様です。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

ボタンに以下のようにアイコンを設置します。

  <button class="mdc-button">
		<div class="mdc-button__ripple"></div>
    <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
		<span class="mdc-button__label">テキスト</span>
	</button>

特にCSSを使用せずともデフォルトでいい感じにスタイルされます。

mixinの利用

色の変更やスタイル変更のためのmixinを紹介します。

rippleの色変更

紫色になっている部分の色変更を行う方法です。

これはmixinではなくprimaryカラーを変更します。mdc-buttonクラスと同じところに独自クラスを作成し、スタイルを適用していきます。

--mdc-theme-primary: #ff0000;
--mdc-theme-on-primary: #fff;

上記の場合赤色のボタンになります。

material-deign-button - 20201111112815

色塗りボタンの色変更

色塗りボタンの色の変更方法です。

「filled-accessible」を使用することで変更できます。これで色を変更すると自動的に文字色も適した色(白、黒)に変更され、リップルの色も変わります。

@include button.filled-accessible(#ff0000);
material-deign-button - 20201111113426
@include button.filled-accessible(#fefee3);
material-deign-button - 20201111113519

角丸変更

角丸の変更には「shape-radius」を使用します。デフォルトは4pxです。

@include button.shape-radius(8px);

外枠色変更

外枠の色を変更するには「outline-color」で色を指定します。

@include button.outline-color(#6200ee);
material-deign-button - 20201111121026

ボタンの高さ変更

ボタンの高さを変更するには「height」の変更を行います。

@include button.height(100px);
material-deign-button - 20201111115507

まとめ

他にもいろいろなmixinがありますが、使用する機会が少なそうなので、割愛します。

色塗りボタンであれば「filled-accessible」を使用することで大体問題ありません。

また、使用方法や、デザイン詳細を合わせて確認しておくと良いと思います。