エレベーション

エレベーションは、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);
scss

エレベーションの取得

エレベーションマップからボックスシャドウのセットを取得するには、最大 2 つの引数 (エレベーションマップと必要なエレベーションレベル ) を elevation 関数に渡すことができます。指定されたレベルの 3 つのボックスシャドウのリストを返します。

デフォルトの $elevations マップからエレベーションを取得する場合は、最初の引数を省略できます。

// Returns elevation 1 shadows
$elevation-1: elevation(1);

// Returns elevation 1 shadows
$my-elevation-1: elevation($name: 1);
scss

テーマへのエレベーションの渡し

いくつかのテーマミックスインを使用すると、エレベーションマップを渡すことができます。特に、theme には、すべてのコンポーネントテーマのエレベーションを更新できる $elevations という名前のパラメーターがあります。

すべてのコンポーネントテーマにカスタムエレベーションを使用するように強制します。

@include theme(
    //...
    $elevations: $my-elevations
);
scss

これに加えて、エレベーションを完全に無視する/使用しないようにテーマに指示できます。

@include theme(
    //...
    $elevations: $my-elevations,
    $elevation: false // disables all elevations
);
scss

elevation 関数はボックスシャドウのリストを返すため、その関数の戻り値を使用して、コンポーネントテーマの特定のエレベーションのみを変更できます。

$card-theme: card-theme(
    $resting-shadow: elevation(10)
);

@include css-vars($card-theme);
scss

elevation 関数を利用せずに、単純なボックスシャドウを渡すこともできます。

$card-theme: card-theme(
    $resting-shadow: 0 10px 10px 10px #666
);

.my-card {
  @include css-vars($card-theme);
}
scss

カスタムエレベーション

elevations 関数によって生成されたマテリアルデザインガイドライン (英語)に準拠していないエレベーションマップを作成することができます。カスタムエレベーションマップに少なくとも 25 のエレベーションレベルが含まれていることを確認してください。テーマが正しく構築することを期待しているエレベーションマップのシグネチャは次のとおりです:

// Omitted levels 2 through 23 for brevity
$elevations: (
    0: box-shadow(...),
    1: box-shadow(...),
    ...
    24: box-shadow(...)
);
scss

エレベーションスキーマの宣言

エレベーションレベルは、テーマスキーマの宣言でも使用されます。詳細については、ドキュメントのスキーマセクションをご覧ください。

API リファレンス

その他のリソース

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