サイズ

size 設定の表示は、大規模データセットのビジュアル表示を大きく改善します。Ignite UI for Angular では、large、medium、small の事前定義されたオプションセットが提供されています。

--ig-size カスタム CSS プロパティを使用すると、アプリケーションまたはコンポーネントレベルでサイズを設定できます。

Angular サイズの例

Note

Ignite UI for Angular コンポーネントをプロジェクトに追加する前に、必要なすべての依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。インストールのトピックで手順をご確認ください。

使用方法

アプリケーションやコンポーネントレベルでサイズを設定する

サイズを設定するには、--ig-size CSS カスタムプロパティを使用します。body 要素で前述のプロパティを設定することで、アプリ内のすべてのコンポーネントのサイズを設定できます。

--ig-size に使用可能な値は、--ig-size-small、--ig-size-medium、--ig-size-large です。

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

コンポーネントレベルでサイズを設定するには、要素セレクターを対象とします。たとえば、入力グループのサイズを small に設定するには、次のようにします。

igx-input-group {
    --ig-size: var(--ig-size-small);
}

CSS カスタムプロパティによるサイズの理解

Ignite UI のサイズ設定システムは、CSS カスタムプロパティのセットを通じて機能し、コンポーネントの寸法やスペーシングを自動的に調整します。--ig-size プロパティを変更すると、コンポーネントはその変更を自動的に検出し、適切なサイズ値を適用します。

サイズ検出用変数

コンポーネントは以下の CSS カスタムプロパティを利用してサイズ変更を検出し、それに応じて動作します。

--component-size - グローバル --ig-size を数値にマッピングします (1=small、2=medium、3=large)
--is-small - コンポーネントが Small の場合は 1、それ以外は 0
--is-medium - コンポーネントが Medium の場合は 1、それ以外は 0
--is-large - コンポーネントが Large の場合は 1、それ以外は 0

これらの変数は CSS の数式を用いて自動的に計算され、--ig-size が変更されるたびに更新されます。

サイズ定数

テーマ設定システムでは、次の 3 つのサイズ定数が定義されています。

--ig-size-small (値: 1)
--ig-size-medium (値: 2)
--ig-size-large (値: 3)

カスタムコンポーネントへのサイズ対応の組み込み

Ignite UI の Sass ユーティリティを使用すると、カスタムコンポーネントをサイズ変更に対応させることができます。これらのユーティリティは、必要な CSS カスタムプロパティや数式を裏側で自動生成します。

Sizable ミックスインと関数の使用

グローバルサイズ設定に応答するコンポーネントを作成する方法は次のとおりです。

<div class="my-responsive-element"></div>

@use "igniteui-angular/theming" as *;

.my-responsive-element {
    // The sizable mixin sets up size detection CSS custom properties
    @include sizable();

    // Connect to the global size system
    --component-size: var(--ig-size, var(--ig-size-large));

    // Use the sizable function for responsive sizing
    --size: #{sizable(10px, 20px, 30px)};
    width: var(--size);
    height: var(--size);
}

Sizable システムの仕組み

@include sizable() を使用すると、現在のコンポーネントサイズを検出する CSS カスタムプロパティが生成されます。

.my-responsive-element {
    --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
    --is-medium: min(
        clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
        clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
    );
    --is-small: clamp(0, var(--ig-size-medium, 2) - var(--component-size, 1), 1);
}

sizable(10px, 20px, 30px) 関数は、現在のサイズ設定に基づいて適切な値を自動的に選択する CSS 式を生成します。

--size: max(
    calc(var(--is-large, 1) * 30px),
    calc(var(--is-medium, 1) * 20px), 
    calc(var(--is-small, 1) * 10px)
);

この仕組みでは、clamp()、min()、max()、calc() 関数を組み合わせた数式的アプローチにより、コンポーネントは現在の --ig-size 設定に基づいて自動的にサイズ値を切り替えることができます。

API リファレンス

サイズと間隔の関数

その他のリソース

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

サイズ