【Material Design】Buttonの使い方
今回はMaterial DesignのButtonの使用方法を説明します。
通常よく見るタイプのボタンやテキストのみでクリック時に色がつくタイプのボタンなど使用できます。
リップルを併用することでクリック屋タッチした感覚が明確になります。
今回使用するのは３種類です。
テキストタイプ
外枠タイプ
色塗りタイプ
Buttonの使用方法
上記の３種類をそれぞれ見ていきます。
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);});
ボタンクリック時のリップルの動きを要素に適用します。
要素が複数ある場合には下の方を利用してください。
テキストタイプ
<button class="mdc-button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">テキスト</span></button>
非常な簡単な作りです。
buttonに「mddc-button」を設定し、ボタンテキストには「mdc-button__label」を使用しています。
外枠タイプ
<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クラスを付け足しています。
色塗りタイプ
<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 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;
上記の場合赤色のボタンになります。
色塗りボタンの色変更
色塗りボタンの色の変更方法です。
「filled-accessible」を使用することで変更できます。これで色を変更すると自動的に文字色も適した色(白、黒)に変更され、リップルの色も変わります。
@include button.filled-accessible(#ff0000);
@include button.filled-accessible(#fefee3);
角丸変更
角丸の変更には「shape-radius」を使用します。デフォルトは4pxです。
@include button.shape-radius(8px);
外枠色変更
外枠の色を変更するには「outline-color」で色を指定します。
@include button.outline-color(#6200ee);
ボタンの高さ変更
ボタンの高さを変更するには「height」の変更を行います。
@include button.height(100px);
まとめ
他にもいろいろなmixinがありますが、使用する機会が少なそうなので、割愛します。
色塗りボタンであれば「filled-accessible」を使用することで大体問題ありません。