진원도
Ignite UI for Angular 에서는 부품의 원형율을 0과 1 사이의 값으로 설정하여 부품의 모양을 변경할 수 있습니다.
개요
경계 반경은 다음과 같이 정의됩니다. 테마 스키마 구성 요소의 집합(아래 예시 참조). 이렇게 정의된 모든 컴포넌트의 경계 반경은 다음$roundness의 매개변수 주제 mixin 또는 다음과 같은 단일 CSS 변수--ig-radius-factor.
$light-toast: extend(
$default-elevation-toast,
(
...,
border-radius: (
border-radius: (
rem(26px),
rem(0),
rem(26px),
),
),
)
);
예시에서 보시다시피, 토스트의 컴포넌트 스키마는 경계 반경을 세 가지 값의 목록으로 정의합니다. 첫 번째 값은 기본 경계 반경(즉$roundness, 선언 시점과--ig-radius-factor 선언되지 않은 시점)입니다. 두 번째 값은 최소 허용 경계 반경(즉, 또는$roundness가 설정--ig-radius-factor 될 때0)을 나타냅니다. 세 번째 값은 허용되는 최대 경계 반경(즉, 또는$roundness가 설정--ig-radius-factor 될 때1)을 나타냅니다. 토스트 컴포넌트에서는 기본값과 최대 값이 일치합니다. 0에서 1 사이의 모든 값은 토스트의 테두리 반경을 최대 값의 백분율로 할당$roundness--ig-radius factor 하거나 설정합니다. 예를 들어, 값을 로.5 설정하면 토스트 컴포넌트의 테두리 반경이 최대 허용 반경의 50%인 13픽셀이 됩니다.
// Make all components sharp by setting the roundness parameter to 0.
@include theme(
...,
$roundness: 0
);
How to use?
위의 예에서 토스트의 기본값을 어떻게 변경할 수 있는지 살펴보겠습니다.
토스트가 결과 테마의 변수에$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))};
}
만약 경계--ig-radius-factor 반경이 변하지 않고 일정한 값으로 유지되길 원한다면, 그냥 경계 반경 매개변수에 직접 전달하면 됩니다.
// Will be unaffected by changes to $roundess or --ig-radius-factor.
igx-toast {
--border-radius: rem(4px);
}
또한 mixin을 사용border-radius 해 요소에 경계-반경 속성을 직접 할당할 수도 있습니다.
button {
@include border-radius(rem(4px), rem(4px), rem(16px));
}
이제 버튼 위의 것은border-radius AND$roundness 변수들의--ig-radius-factor 영향을 받게 됩니다.
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 |
각 테마의 기본 및 최소/최대 반경 값을 알아보려면 각 구성 요소에 대한 스키마 문서를 참조하세요.
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub