【Material Design】elevation の使いかた

今回はMaterial Design の elevation の使いかたです。

boxshadowの調整ができ、通常時ホバー時などで使用できます。

また、使用するには各要素の重なりについてしっかり決めておく必要があります。

以下で使用する「z」の意味は高さを意味していて、単位は「dp」になります。

使用するうえで単位を付けることはありませんが、pxではないことに注意して下さい。

elevationの設定

elevation の使用には以下の読み込みが必要です。

@use "@material/elevation/mdc-elevation";
@use "@material/elevation";

HTMLに直接指定のクラスを付ける場合には上の記述が必要になります。

独自のクラスにmixinで使用する場合には下の記述が必要になります。

クラス指定でelevationを利用する場合

 <div class="mdc-elevation--z1">

「z」以降の部分を変更することで高さを変更することができます。

高さの指定可能な値は「1 ~ 24」です。

mixinでelevationを使用する場合

@include  elevation.elevation(8);

elevation($z-value, $color, $opacity-boost)

となっており、上の例では「z」のみ指定した形です。

さらに、shadowの色指定や、透明度の調整をすることができます。

transition変更をスムーズに行う

<div class="mdc-elevation-transition">

高さ変更要素に対して上のクラスを指定しておくことで自然な移り変わりが行われます。