サイズ
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);
}
独自のコンポーネントとレイアウトにサイズを組み込む
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 リファレンス
サイズと間隔の関数
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。