진원도

    Ignite UI for Angular 에서는 부품의 원형율을 0과 1 사이의 값으로 설정하여 부품의 모양을 변경할 수 있습니다.

    개요

    Border radius is defined in the theme schema of the component (see the example below). The border radius for any component defined in this manner can then be controlled via the $roundness parameter of the theme mixin or a single CSS variable called --ig-radius-factor.

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

    As you can see from the example, the component schema for the Toast defines the border radius as a list of three values. The first value is the default border radius (i.e. when $roundness or --ig-radius-factor is not declared). The second value denotes the minimum allowed border radius (i.e. when $roundness or --ig-radius-factor is set to 0). And the third value denotes the maximum allowed border radius (i.e. when $roundness or --ig-radius-factor is set to 1). In the toast component the default and maximum values match. Any value between 0 and 1 assigned to $roundness or --ig-radius factor will set the border radius of the toast as a percentage of the maximum value. For instance, setting the value to .5 will make the border radius of the Toast component to be 50% of its maximum allowed border radius, which is 13 pixels.

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

    How to use?

    위의 예에서 토스트의 기본값을 어떻게 변경할 수 있는지 살펴보겠습니다.

    If you want the toast to still be affected by the $roundness or the --ig-radius-factor variable in the resulting theme, use the border-radius function provided by the Ignite UI for Angular package.

    // 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))};
}

    If you want the border-radius to be a constant value, unaffected by changes of --ig-radius-factor, just pass it directly to the border-radius parameter.

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

    We can also use the border-radius mixin to directly assign the border-radius property to elements.

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

    Now the border-radius on the button will be affected by the $roundness and --ig-radius-factor variables.

    Baseline border radius values

    아래 표는 머티리얼 스키마에 정의된 구성요소 테두리 반경 값 중 일부를 발췌한 것입니다.

    요소 최소/최대 반경 기본 반경
    버튼(플랫) 0 / 20px 4px
    버튼(포함) 0 / 20px 4px
    버튼(팹) 12픽셀 / 28픽셀 28px
    버튼(아이콘) 0 / 18px 18px
    버튼 그룹 0 / 20px 4px
    칩 0 / 20px 4px
    카드 0 / 24px 4px
    회전목마 0 / 36px 0
    대화 0 / 36px 4px
    쓰러지 다 0 / 20px 4px
    확장 패널 0 / 16px 0
    입력(테두리) 0 / 20px 4px
    입력(박스) 0 / 20px 4픽셀 4픽셀 0 0
    입력(검색) 0 / 20px 4px
    목록 0 / 24px 0
    목록 항목 0 / 24px 0
    내비 서랍 0 / 36px 0
    스낵바 0 / 24px 4px
    툴팁 0 / 16px 4px
    토스트 0 / 26px 26px

    각 테마의 기본 및 최소/최대 반경 값을 알아보려면 각 구성 요소에 대한 스키마 문서를 참조하세요.

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.