丸み

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 の最小値と最大値の違いがわかります。