丸み

    Ignite UI for Angular では、丸みを 0 から 1 の間の値に設定してコンポーネントの形を変更できます。

    概要

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

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

    上記の例からわかるように、Toast のコンポーネント スキーマは、境界半径を 3 つの値のリストとして定義します。最初の値はデフォルトの境界半径です ($roundness または --ig-radius-factor が宣言されていない場合など)。2 番目の値は、許容される最小境界半径を示します ($roundness または --ig-radius-factor0 に設定されている場合など)。3 番目の値は、許容される最大境界半径を示します($roundness または --ig-radius-factor1 に設定されている場合など)。トースト コンポーネントでは、デフォルト値と最大値が一致します。$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.
    $toast-theme: (
        ...,
        border-radus: border-radius(rem(4px), rem(4px), rem(16px))
    );
    
    @include css-vars($toast-theme);
    

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

    // Will be unaffected by changes to $roundess or --ig-radius-factor.
    $toast-theme: (
        ...,
        border-radus: rem(4px)
    );
    
    @include css-vars($toast-theme);
    

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

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

    コンポーネント Min/Max 境界 デフォルトの境界
    Button(Flat) 0 / 20px 4px
    Button(Contained) 0 / 20px 4px
    button(Fab) 12px / 28px 28px
    button(Icon) 0 / 18px 18px
    Button-group 0 / 20px 4px
    Chip 0 / 20px 4px
    Card 0 / 24px 4px
    Carousel 0 / 36px 0
    Dialog 0 / 36px 4px
    Drop-down 0 / 20px 4px
    Expansion panel 0 / 16px 0
    input(Border) 0 / 20px 4px
    input(Box) 0 / 20px 4px 4px 0 0
    input(Search) 0 / 20px 4px
    List 0 / 24px 0
    List item 0 / 24px 0
    Navdrawer 0 / 36px 0
    Snackbar 0 / 24px 4px
    Tooltip 0 / 16px 4px
    Toast 0 / 26px 26px

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

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