サイズ (表示密度)

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

--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);
}

独自のコンポーネントとレイアウトにサイズを組み込む

Ignite UI for Angular は、--ig-size CSS プロパティの変更に反応するレイアウトを実装できるようにするいくつかの Sass 関数とミックスインを公開します。

以下は、--ig-size の値に基づいて要素の幅と高さを変更する方法の例です。

<div class="my-elem"></div>

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

.my-elem {
    // Make the element sizable
    @include sizable();

    // Define the default size of the element and hook it to the `--ig-size` property
    --component-size: var(--ig-size, var(--ig-size-large));

    // Define sizes for small (10px), medium (20px), and large (30px)
    --size: #{sizable(10px, 20px, 30px)};
    width: var(--size);
    height: var(--size);
}

これで、--ig-size の値が変更されるたびに、.my-elem のサイズが変更されます。

API リファレンス

サイズと間隔の関数

その他のリソース

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