丸み
Ignite UI for Angular では、丸みを 0 から 1 の間の値で調整することで、コンポーネントの形状をカスタマイズできます。
概要
多くの Ignite UI コンポーネントには、境界半径の最小値と最大値が事前定義されており、--ig-radius-factor CSS 変数を使用して調整できます。
--ig-radius-factor を 0 に設定すると、コンポーネントは最小の border-radius を使用し、角がシャープなブロック状に表示されます。1 に設定すると、最大の border-radius が適用され、より丸みを帯びた外観になります。
以下は、定義済みの最小および最大の境界半径値を持ち、--ig-radius-factor 変数を使用して変更できるコンポーネントのリストです。
• Action Strip • Button • Button Group • Calendar • Card • Carousel • Checkbox • Chip • Combo • Date Picker • Date Range Picker • Grid • Input Group • Linear Progress • List • Month Picker • Navigation Drawer • Radio • Ripple • Snackbar • Switch • Toast
使用方法
コンポーネントの 2 つの border-radius 値を切り替えるには、要素セレクターをターゲットにして、--ig-radius-factor 変数を 0 または 1 に設定するだけです。
igx-chip {
--ig-radius-factor: 0;
}これにより、事前定義された最小の border-radius が適用され、Chip コンポーネントの角が直線になります。
igx-chip {
--ig-radius-factor: 1;
}値を 1 に設定すると、定義済みの最大の border-radius が適用され、Chip コンポーネントの角が丸くなります。
最小値と最大値の間にしたい場合は、--ig-radius-factor を 0 ～ 1 の小数値に設定できます。
たとえば、0.5 に設定すると、コンポーネントの最大許容値の 50% の border-radius が適用されます。
igx-chip {
--ig-radius-factor: 0.5;
}以下の例では、border-radius の最小値と最大値の違いがわかります。
その他のリソース
関連トピック:
コミュニティに参加して新しいアイデアをご提案ください。