エレベーション

エレベーションは、Document Object Model ツリーの間に境界線を描画し、機能のカプセル化を向上します。Ignite UI for Angular でのエレベーションの実装は、マテリアルデザインでのエレベーションをモデルにしています。

概要

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

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

コンポーネント	デフォルトエレベーションレベル	CSS 変数
banner, button, toast	0	--ig-elevation-0
badge, carousel buttons, search input	1	--ig-elevation-1
button group, contained button, card, grid, switch	2	--ig-elevation-2
navbar, snackbar	4	--ig-elevation-4
floating action button,	6	--ig-elevation-6
bottom navigation, ghost chip, dropdown	8	--ig-elevation-8
navdrawer	16	--ig-elevation-16
dialog	24	--ig-elevation-24

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

使用方法

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

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

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

[igxButton="contained"] {
  --resting-shadow: var(--ig-elevation-4);
  --hover-shadow: var(--ig-elevation-12);
  --focus-shadow: var(--ig-elevation-12);
}

各コンポーネントテーマのドキュメントには、各状態で使用されるデフォルトのエレベーションがリストされています。エレベーションがリストされていない場合、コンポーネントは事前定義されたエレベーションレベルを使用しません。

エレベーションの定義

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

例:

/* styles.css */
: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 を使用するすべてのコンポーネントのシャドウが更新されます。

シャドウイング

特定のスコープに対してのみ、グローバルに設定されたエレベーションをシャドーイングすることができます。ボタンコンポーネントが静止状態にエレベーションレベル 2 を使用することはすでに見た通りです。レベル 2 は、カードおよびグリッドコンポーネントでも使用されます。したがって、3 つすべてのシャドウを変更するには、次のことを行う必要があります:

[igxButton="contained"],
igx-grid,
igx-card {
    --ig-elevation-2: 0 3px 9px 0 rgba(0, 0, 0, .24);
}

これにより、Contained ボタンとカードの --resting-shadow、およびグリッドの --grid-shadow が、--ig-elevation-2 に割り当てられた値に設定されます。

エレベーションは、Sass を使用して、より強力な方法で作成および使用することもできます。詳細については、以下の関連トピックを参照してください。

エレベーション

概要

使用方法

エレベーションの定義

シャドウイング

その他のリソース

テーマ設定