エレベーション

概要

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

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

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 を使用して、より強力な方法で作成および使用することもできます。詳細については、以下の関連トピックを参照してください。

その他のリソース

関連トピック:

• Sass エレベーション

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)