エレベーション
エレベーションは、Document Object Model ツリーの間に境界線を描画し、機能のカプセル化を向上します。Sass テーマ ライブラリを使用してエレベーションのセットを作成できます。
概要
Ignite UI for Angular のエレベーションは、25 要素のマップとして宣言されています。各要素はキーと値のペアであり、キーはエレベーション レベル名 (0..24) であり、値は 3 つの box-shadow
宣言のリストです。シャドウの色を定義できる新しいエレベーションのセットを生成できます。さらに、エレベーション マップから特定のエレベーション レベルを取得するための関数を公開します。デフォルトでコンポーネント間で使用されるグローバル変数 $elevations
を公開します。エレベーションに関連する CSS 変数のドキュメントを読んでいない場合は、先に進む前にまず読んでおくことをお勧めします。
使用方法
次のセクションでは、カスタム エレベーションを作成および取得する方法を示します。
エレベーションの構成
デフォルトのエレベーション プリセットで使用されるカラーを変更するには、エレベーション プリセット モジュールを構成する必要があります。
// Define the 3 elevation colors
@use 'igniteui-theming/sass/elevations/presets' as * with(
$color-1: rgb(153, 191, 170), // Umbra
$color-2: rgb(92, 134, 141), // Penumbra
$color-3: rgb(92, 61, 70) // Ambient
);
@include elevations($material-elevations);
エレベーションの取得
エレベーション マップからボックス シャドウのセットを取得するには、最大 2 つの引数 (エレベーション マップと必要なエレベーション レベル ) を elevation
関数に渡すことができます。指定されたレベルの 3 つのボックス シャドウのリストを返します。
デフォルトの $elevations
マップからエレベーションを取得する場合は、最初の引数を省略できます。
// Returns elevation 1 shadows
$elevation-1: elevation(1);
// Returns elevation 1 shadows
$my-elevation-1: elevation($name: 1);
テーマへのエレベーションの渡し
いくつかのテーマ ミックスインを使用すると、エレベーション マップを渡すことができます。特に、theme
には、すべてのコンポーネント テーマのエレベーションを更新できる $elevations
という名前のパラメーターがあります。
すべてのコンポーネント テーマにカスタム エレベーションを使用するように強制します。
@include theme(
//...
$elevations: $my-elevations
);
これに加えて、エレベーションを完全に無視する/使用しないようにテーマに指示できます。
@include theme(
//...
$elevations: $my-elevations,
$elevation: false // disables all elevations
);
一部のコンポーネント テーマは $elevations
パラメーターも受け入れて、インスタンスに対してのみカスタム エレベーションを渡すことができます。
たとえば、カード コンポーネントは、カスタム エレベーションの渡しをサポートしています。カスタム エレベーション マップを受け入れるコンポーネントを見つけるには、Sass のドキュメントを参照してください。各コンポーネントは、エレベーション マップの特定のレベルのみを使用します。それらもコンポーネントの Sass ドキュメントにリストされています。
@include card(card-theme(
//...
$elevations: $my-elevations,
));
elevation
関数はボックス シャドウのリストを返すため、その関数の戻り値を使用して、コンポーネント テーマの特定のエレベーションのみを変更できます。
$card-theme: card-theme(
$resting-shadow: elevation(10)
);
@include card($card-theme);
これは次のようにコンパイルされます:
.igx-card {
box-shadow:
0 6px 6px -3px rgba(0, 0, 0, 0.26),
0 10px 14px 1px rgba(0, 0, 0, 0.12),
0 4px 18px 3px rgba(0, 0, 0, 0.08);
}
elevation
関数を利用せずに、単純なボック スシャドウを渡すこともできます。
$card-theme: card-theme(
$resting-shadow: 0 10px 10px 10px #666
);
.my-card {
@include card($card-theme);
}
上記のスニペットの結果は次のとおりです:
.my-card .igx-card {
/* ... */
box-shadow: 0 10px 10px 10px #666;
}
カスタム エレベーション
elevations
関数によって生成されたマテリアル デザイン ガイドライン (英語)に準拠していないエレベーション マップを作成することができます。カスタム エレベーション マップに少なくとも 25 のエレベーション レベルが含まれていることを確認してください。テーマが正しく構築することを期待しているエレベーション マップのシグネチャは次のとおりです:
// Omitted levels 2 through 23 for brevity
$elevations: (
0: box-shadow(...),
1: box-shadow(...),
...
24: box-shadow(...)
);
エレベーション スキーマの宣言
エレベーション レベルは、テーマ スキーマの宣言でも使用されます。詳細については、ドキュメントのスキーマ セクションをご覧ください。
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。