Ignite UI for Web Components のテーマのカスタマイズ

Ignite UI for Web Components のテーマは、さまざまな CSS 変数を変更することでカスタマイズできます。これらの変数を上書きすることで、パレット、タイポグラフィ、エレベーション、丸み、サイズ、間隔をカスタマイズできます。

概要

次のセクションでは、パレット、タイポグラフィ、およびエレベーションについて説明しますが、このセクションでは、単一の変数の変更によってグローバルレベルでコンポーネントのスタイルに影響を与えるオプションについて説明します。

丸み

すべてのコンポーネントは、ある種の丸み (border-radius) を定義します。アバターやバッジなど、コンポーネントの形状を設定するための属性を提供するコンポーネントもあれば、ボタンなど、テーマの一部として border-radius を内部的に定義するだけのコンポーネントもあります。そのような場合、--ig-radius-factor CSS 変数の値を変更することで、これらのコンポーネントの border-radius を操作できます。:root スコープでグローバルに変更することも、コンポーネントごとに変更することもできます。この変数は、0 から 1 の間の実数値を受け入れます。値を 0 に設定すると、境界半径が 0 に設定されます。値を 1 に設定すると、境界半径が定義済みの初期境界半径に設定されます。たとえば 0.5 のような 0 と 1 の間の任意の値は、コンポーネントのスタイルシートで定義されたデフォルトの境界半径の 50% に境界半径を設定します。

例:

/* Set the border-radius for all components to 50% of their default value. */
:root {
    --ig-radius-factor: .5;
}

/* Set the border-radius of the button component to 0. */
igc-button {
    --ig-radius-factor: 0;
}

エレベーション

グローバル半径と同様に、一部のコンポーネントは内部エレベーション (box-shadow) を定義します。すべてのコンポーネントをフラットにするのは、各コンポーネントのボックスシャドウを上書きして行うと面倒な場合があります。--ig-elevation-factor CSS 変数を変更することで、すべてのコンポーネントの box-shadow の動作を変更できます。この変数は、0 から 1 の間の実数値を受け入れます。値を 0 に設定すると、すべてのコンポーネントの box-shadow が none に設定されます。値を 1 に設定すると、エレベーションの値が定義済みの box-shadow の初期値に設定されます。たとえば 0.5 のような 0 と 1 の間の値は、box-shadow の強度をコンポーネントのスタイルシートで定義された元の値の 50% に設定します。

/* Set the elevation for all components to 50% of their original box-shadow values. */
:root {
    --ig-elevation-factor: .5;
}

サイズ

一部のコンポーネントは可変サイズ (small、medium、large) をサポートしており、デフォルトのサイズはコンポーネントスタイルシートで設定されています。--ig-size CSS 変数を使用して、すべてのコンポーネントのサイズを同時にまたは個別に変更できます。可能な値は、var(--ig-size-small)、var(--ig-size-medium)、または var(--ig-size-large) です。

アプリケーション内のすべてのコンポーネントに特定のサイズを設定するには、:root スコープで --ig-size 変数を定義します。

例:

:root {
    --ig-size: var(--ig-size-small);
}

または、特定のコンポーネントのみをターゲットにする場合は、変数のスコープをコンポーネントのタグセレクターに設定します。

igc-avatar {
    --ig-size: var(--ig-size-medium);
}

間隔

間隔とは、コンポーネントのテーマによって設定された内部コンポーネントのパディングとマージンを指します。間隔には、水平方向 (インライン) と垂直方向 (ブロック) があります。各コンポーネントのすべてのパディングとマージンの値を手動で明示的に上書きすることなく、コンポーネント内のさまざまな要素のパディングを簡単に制御できるようにしました。これは、--ig-spacing 変数によって行われます。その値は、任意の正の実数に設定できます。間隔はそれに応じてスケーリングされます。デフォルト値は 1 で、コンポーネントスタイルシートで設定されているデフォルトの水平 / 垂直パディング / マージンを表します。値を 1.5 に変更すると、すべての間隔が 1.5 倍または 150% 拡大されます。逆に、値を 0 に設定すると、すべてがまとめられ、すべての間隔がパディング / マージンなしと同等に縮小されます。間隔係数の変更は、サイズプロパティと連携して機能し、それに応じてスケーリングされます。

一部のコンポーネントでは、一方向 (水平または垂直) でのみ間隔を変更できますが、他のコンポーネントでは、両方向で個別の間隔値を指定できます。

すべてのコンポーネントの間隔を変更するには、:root スコープでその値を上書きできます。

例:

/* Increase the spacing for all components to 150%. */
:root {
    --ig-spacing: 1.5;
}

1 つのコンポーネントのみの間隔を変更するには、変数のスコープをコンポーネントのタグセレクターに設定します。

/* Reduce the spacing for the drop-down elements to 50% of their original value. */
igc-dropdown {
    --ig-spacing: 0.5;
}

前述のように、水平方向と垂直方向の間隔をサポートするコンポーネントに対して個別に制御できます。これは、--ig-spacing-inline (水平) および --ig-spacing-block (垂直) 変数を変更することで実現できます。原則は --ig-spacing 変数の場合と同じです。--ig-spacing 変数のみを変更すると、両方向の間隔が同じ量だけ変更されます。

API リファレンス

ConfigureTheme