Ignite UI for Web Components のエレベーション

Ignite UI for Web Components のエレベーションの実装は、マテリアルデザインでのエレベーション (英語) をモデルにしています。これらは、ドキュメントオブジェクトモデルツリー間の機能境界を確立および維持して、より優れた機能カプセル化を可能にするために使用されます。

概要

Ignite UI for Web Components シャドウは、25 のエレベーションレベルに基づく深度階層を確立するためのマテリアルデザインガイドラインに厳密に準拠します。シャドウキャストのサイズは、エレベーションレベル番号に関連しています。エレベーションレベル番号が高いほど、シャドウが大きくなります。Ignite UI for Web Components のエレベーションは、CSS 変数として公開されます。各変数は、3 つの box-shadows のセットを格納します。これらの box-shadows は、実世界で観察されるシャドウのプロパティである本影、半影、および擬本影を表します。

Ignite UI for Web Components のブートストラップテーマのさまざまなコンポーネントで使用される静止エレベーションと、それに対応する CSS 変数名のリストを次に示します:

コンポーネント	デフォルトのエレベーションレベル	CSS 変数
Button	0	--ig-elevation-0
Elevated Card	2	--ig-elevation-2
Toast、Snackbar	10	--ig-elevation-10
Navdrawer	16	--ig-elevation-16

CSS 変数列からわかるように、すべてのエレベーションは --ig-elevation-[level] の形式で定義されています。前述のように、エレベーションレベル番号は 0 から 24 (両端を含む) になります。

使用方法

独自のコンポーネントでエレベーションの使用を開始するには、目的のレベルの変数名を参照するだけです。

.custom-element {
  box-shadow: var(--ig-elevation-6);
}

既存のコンポーネントテーマのエレベーションを変更することも同様に機能します:

igc-navbar {
  box-shadow: var(--ig-elevation-8);
}

エレベーションの定義

デフォルトのエレベーションの更新は、パレットの色の更新と同じように機能します。変数を別の値に再割り当てするだけです。エレベーションの場合、値が box-shadow であることを確認してください。

例:

:root {
    --ig-elevation-1: 0 2px 6px 0 rgba(0, 0, 0, .18);
    --ig-elevation-2: 0 3px 9px 0 rgba(0, 0, 0, .24);
}

これで、エレベーションレベル 1 と 2 を使用するすべてのコンポーネントのシャドウが更新されます。

シャドウイング

特定のスコープに対してのみ、グローバルに設定されたエレベーションをシャドーイングすることができます。スナックバーとトーストコンポーネントがエレベーションレベル 10 を使用していることはすでに見てきました。両方のシャドウを変更するには、次のことを行う必要があります:

igc-snackbar,
igc-toast {
    --ig-elevation-10: 0 3px 9px 0 rgba(0, 0, 0, .24);
}

これにより、トーストとスナックバーのシャドウが --ig-elevation-10 に割り当てられた値に設定されます。

エレベーション係数の使用

エレベーションレベルに加えて、Ignite UI for Web Components は、グローバルエレベーション係数の制御を容易にする CSS 変数を公開します。デフォルト値は 1 に設定されています。これは、すべてのコンポーネントシャドウがコンポーネントテーマで定義されているものと同じになることを意味します。すべてのシャドウを削除する場合は、プロパティ値を 0 に変更するだけです:

:root {
    --ig-elevation-factor: 0;
}

--ig-elevation-factor は、10 進値または 1 より大きい値に設定することもできます。値が大きいほど、シャドウが大きくなります。

API リファレンス

Elevations