진원도
Ignite UI for Angular 원형률을 0에서 1 사이의 값으로 설정하여 구성 요소의 모양을 변경할 수 있습니다.
개요
테두리 반경은 구성 요소의 테마 스키마에서 정의됩니다(아래 예 참조). 이러한 방식으로 정의된 구성 요소의 테두리 반경은 다음을 통해 제어할 수 있습니다. $roundness 매개변수 주제 mixin 또는 단일 CSS 변수--ig-radius-factor.
$light-toast: (
...,
border-radius: (rem(26px), rem(0), rem(26px)),
);
예제에서 볼 수 있듯이 Toast의 구성 요소 스키마는 테두리 반경을 세 가지 값 목록으로 정의합니다. 첫 번째 값은 기본 테두리 반경입니다(즉, $roundness 또는--ig-radius-factor 선언되지 않은 경우). 두 번째 값은 허용되는 최소 테두리 반경을 나타냅니다(예: $roundness 또는--ig-radius-factor 0으로 설정된 경우). 세 번째 값은 허용되는 최대 테두리 반경을 나타냅니다(예: $roundness 또는--ig-radius-factor 1로 설정된 경우). 토스트 구성 요소에서는 기본값과 최대값이 일치합니다. $roundness 또는--ig-radius factor에 할당된 0에서 1 사이의 값은 토스트의 테두리 반경을 최대값의 백분율로 설정합니다. 예를 들어 값을.5로 설정하면 Toast 구성 요소의 테두리 반경이 최대 허용 테두리 반경인 13픽셀의 50%가 됩니다.
// 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.
$toast-theme: (
...,
border-radus: border-radius(rem(4px), rem(4px), rem(16px))
);
@include css-vars($toast-theme);
--ig-radius-factor 변경에 영향을 받지 않고 border-radius를 상수 값으로 설정하려면 해당 값을 border-radius 매개변수에 직접 전달하면 됩니다.
// Will be unaffected by changes to $roundess or --ig-radius-factor.
$toast-theme: (
...,
border-radus: rem(4px)
);
@include css-vars($toast-theme);
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