Ignite UI for Web Components의 권한 상승
Ignite UI for Web Components의 고도 구현은 머티리얼 디자인의 고도를 모델로 합니다. 이는 더 나은 기능 캡슐화를 가능하게 하기 위해 문서 객체 모델 트리 사이의 기능적 경계를 설정하고 유지하는 데 사용됩니다.
개요
Ignite UI for Web Components 25개의 고도 수준을 기반으로 깊이 계층 구조를 설정하기 위한 머티리얼 디자인 지침을 밀접하게 따릅니다. 그림자 투사 크기는 고도 수준 번호와 관련이 있습니다. 고도 수준 숫자가 높을수록 그림자가 더 커집니다. Ignite UI for Web Components의 고도는 CSS 변수로 노출됩니다. 각 변수는 3개의 box-shadows 세트를 저장합니다. 이러한 box-shadows 현실 세계에서 관찰되는 그림자의 속성인 그림자, 반그림자, 안툼브라 요소를 나타냅니다.
다음은 Bootstrap 테마의 Ignite UI for Web Components의 다양한 구성 요소와 해당 CSS 변수 이름에 사용되는 정지 고도 목록입니다.
| 요소 | 기본 고도 수준 | CSS 변수 |
|---|---|---|
| 단추 | 0 | --ig-고도-0 |
| 승격된 카드 | 2 | --ig-고도-2 |
| Toast, Snackbar | 10 | --ig-elevation-10 |
| Navdrawer | 16 | --ig-고도-16 |
CSS 변수 열에서 볼 수 있듯이 모든 고도는--ig-elevation-[level] 형식으로 정의됩니다. 언급한 대로 고도 수준 번호는 0부터 24(포함)까지입니다.
Usage
자체 구성요소에서 고도를 사용하려면 원하는 레벨의 변수 이름을 참조하기만 하면 됩니다.
.custom-element {
box-shadow: var(--ig-elevation-6);
}
기존 구성요소 테마의 고도 변경은 비슷한 방식으로 작동합니다.
igc-navbar {
box-shadow: var(--ig-elevation-8);
}
Defining Elevations
기본 고도 업데이트는 팔레트 색상 업데이트와 비슷한 방식으로 작동합니다. 변수를 다른 값에 다시 할당하기만 하면 됩니다. 고도의 경우 값이 box-shadow 인지 확인하세요.
본보기:
:root {
--ig-elevation-1: 0 2px 6px 0 rgba(0, 0, 0, .18);
--ig-elevation-2: 0 3px 9px 0 rgba(0, 0, 0, .24);
}
이제 고도 수준 1과 2를 사용하는 모든 구성요소의 그림자가 업데이트됩니다.
Shadowing
특정 범위에 대해서만 전체적으로 설정된 고도를 숨길 수 있습니다. 우리는 이미 Snackbar와 Toast 구성 요소가 고도 레벨 10을 사용한다는 것을 확인했습니다. 두 구성 요소 모두에 대한 그림자를 변경하려면 다음을 수행하면 됩니다.
igc-snackbar,
igc-toast {
--ig-elevation-10: 0 3px 9px 0 rgba(0, 0, 0, .24);
}
그러면 토스트와 스낵바 그림자가--ig-elevation-10에 할당된 값으로 설정됩니다.
Using Elevation Factor
고도 수준 외에도 Ignite UI for Web Components 전역 고도 계수를 쉽게 제어할 수 있는 CSS 변수를 노출합니다. 기본값은 1로 설정되어 있습니다. 이는 모든 구성 요소 섀도우가 해당 구성 요소 테마에 정의된 것과 동일함을 의미합니다. 모든 그림자를 제거하려면 속성 값을 0으로 변경하면 됩니다.
:root {
--ig-elevation-factor: 0;
}
--ig-elevation-factor 십진수 값이나 1보다 큰 값으로 설정할 수도 있습니다. 값이 클수록 그림자도 커집니다.
API References
Elevations