丸み

概要

境界半径は、コンポーネントのテーマ スキーマで定義されます (以下の例を参照)。この方法で定義されたコンポーネントの境界半径は、theme ミックスインの $roundness パラメーター、または --ig-radius-factor と呼ばれる単一の CSS 変数を介して制御できます。

$light-toast: extend(
    $default-elevation-toast,
    (
        ...,
        border-radius: (
            border-radius: (
                rem(26px),
                rem(0),
                rem(26px),
            ),
        ),
    )
);

上記の例からわかるように、Toast のコンポーネント スキーマは、境界半径を 3 つの値のリストとして定義します。最初の値はデフォルトの境界半径です ($roundness または --ig-radius-factor が宣言されていない場合など)。2 番目の値は、許容される最小境界半径を示します ($roundness または --ig-radius-factor が 0 に設定されている場合など)。3 番目の値は、許容される最大境界半径を示します($roundness または --ig-radius-factor が 1 に設定されている場合など)。トースト コンポーネントでは、デフォルト値と最大値が一致します。$roundness または --ig-radius Factor に割り当てられた 0 から 1 までの値は、トーストの境界半径を最大値のパーセンテージとして設定します。たとえば、値を .5 に設定すると、トースト コンポーネントの境界半径が、許容される最大境界半径の 50% になります (13 ピクセル)。

// Make all components sharp by setting the roundness parameter to 0.
@include theme(
    ...,
    $roundness: 0
);

使用方法

上記の例のトーストのデフォルト値を変更できます。

トーストが結果のテーマの $roundness または --ig-radius-factor 変数の影響を受けたい場合は、Ignite UI for Angular パッケージで提供される border-radius 関数を使用します。

// Change the default, min and max values,
// while preserving customization via $roundness or --ig-radius-factor.
igx-toast {
  --border-radius: #{border-radius(rem(4px), rem(4px), rem(16px))};
}

border-radius を --ig-radius-factor の変更の影響を受けずに定数値にしたい場合は、それを border-radius パラメーターに直接渡すだけです。

// Will be unaffected by changes to $roundess or --ig-radius-factor.
igx-toast {
  --border-radius: rem(4px);
}

また、border-radius ミックスインを使用して、要素に border-radius プロパティを直接割り当てることもできます。

button {
    @include border-radius(rem(4px), rem(4px), rem(16px));
}

これで、ボタンの border-radius は $roundness および --ig-radius-factor 変数の影響を受けるようになります。

ベースライン境界半径の値

以下の表は、マテリアル スキーマで定義されているコンポーネントの境界半径値の一部の抜粋を示しています。

各テーマのデフォルトおよび最小/最大半径値を確認するには、各コンポーネントの スキーマ ドキュメントを参照してください。

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)