표고
고도는 더 나은 기능 캡슐화를 가능하게 하기 위해 문서 개체 모델 트리 간의 기능 경계를 설정하고 유지하는 데 사용됩니다. Sass 테마 라이브러리를 사용하여 고도 세트를 만들 수 있습니다.
개요
Ignite UI for Angular의 고도는 25개의 요소로 구성된 지도로 선언됩니다. 각 요소는 키-값 쌍으로, 키는 고도 레벨 이름(0..24)이고 값은 3box-shadow 개의 선언 목록입니다. 그림자 색상을 정의할 수 있는 새로운 고도 세트를 생성할 수 있습니다. 또한, 고도 지도에서 특정 고도 레벨을 가져오는 함수도 제공합니다. 기본적으로 컴포넌트 간에 사용되는 전역 변수$elevations를 노출합니다. 고도 관련 CSS 변수 문서를 읽지 않으셨다면, 먼저 읽어보시길 권합니다.
Usage
다음 섹션에서는 사용자 정의 고도를 생성하고 검색하는 방법을 보여줍니다.
Configuring Elevations
기본 고도 사전 설정에 사용되는 색상을 변경하려면 고도 사전 설정 모듈을 구성해야 합니다.
// Define the 3 elevation colors
@use 'igniteui-theming/sass/elevations/presets' as * with(
$color-1: rgb(153, 191, 170), // Umbra
$color-2: rgb(92, 134, 141), // Penumbra
$color-3: rgb(92, 61, 70) // Ambient
);
@include elevations($material-elevations);
Retrieving Elevations
고도 지도에서 박스 그림자 집합을 가져오려면 함수에elevation 최대 두 개의 인자를 전달할 수 있습니다 - 고도 지도와 원하는 고도 고도입니다. 주어진 레벨에 대해 3개의 박스 그림자 목록을 반환합니다.
기본$elevations 지도에서 고도를 가져오고 싶다면 첫 번째 인수를 생략할 수 있습니다.
// Returns elevation 1 shadows
$elevation-1: elevation(1);
// Returns elevation 1 shadows
$my-elevation-1: elevation($name: 1);
Passing Elevations to Themes
여러 테마 믹싱을 통해 고도 지도를 통과할 수 있습니다. 가장 눈에 띄는 점은, 모든 구성 요소 테마의 고도를 업데이트할 수 있는 매개변수가 있다는 점theme 입니다$elevations.
모든 구성요소 테마가 사용자 정의 고도를 사용하도록 강제합니다.
@include theme(
//...
$elevations: $my-elevations
);
이 외에도 고도를 완전히 무시하거나 사용하지 않도록 테마에 지시할 수 있습니다.
@include theme(
//...
$elevations: $my-elevations,
$elevation: false // disables all elevations
);
함수가elevation 박스 그림자 목록을 반환하므로, 그 함수의 반환 값을 사용해 구성 요소 테마의 특정 고도만 수정할 수 있습니다.
$card-theme: card-theme(
$resting-shadow: elevation(10)
);
@include css-vars($card-theme);
간단한 박스 그림자를 통과할 수도 있으며, 이 기능을 활용elevation 하지 않습니다:
$card-theme: card-theme(
$resting-shadow: 0 10px 10px 10px #666
);
.my-card {
@include css-vars($card-theme);
}
Custom Elevations
고도 지도를 만들 수 있지만, 그 지도는 다음을 준수하지 않습니다. 재료 설계 지침 다음에 의해 생성됨elevations 기능. 사용자 지정 고도 지도에 최소 25개의 고도 레벨이 포함되는지 확인하세요. 여기 우리 테마들이 올바르게 구축할 것으로 기대하는 고도 지도 시그니처가 있습니다:
// Omitted levels 2 through 23 for brevity
$elevations: (
0: box-shadow(...),
1: box-shadow(...),
...
24: box-shadow(...)
);
Elevation Schema Declarations
고도 수준은 테마 스키마 선언에도 사용됩니다. 자세한 내용은 설명서의 스키마 섹션을 참조하세요.
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub