표고
고도는 더 나은 기능 캡슐화를 가능하게 하기 위해 문서 개체 모델 트리 간의 기능 경계를 설정하고 유지하는 데 사용됩니다. Sass 테마 라이브러리를 사용하여 고도 세트를 만들 수 있습니다.
개요
Elevations in Ignite UI for Angular are declared as a map of 25 elements. Each element is a key-value pair where the key is the elevation level name (0..24) and the value is a list of 3 box-shadow declarations. We allow you to generate new sets of elevations where you can define the color for the shadows. Additionally, we expose functions for retrieving a specific elevation level from the elevations map. We expose a global variable $elevations that is used across components by default. If you've not read the CSS variables documentation related to Elevations, we suggest you do that first before reading on.
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
To retrieve a set of box-shadows from the elevations map you can pass up to two arguments to the elevation function - an elevation map and the wanted elevation level. It returns a list of 3 box shadows for the given level.
If you want to retrieve the elevation from the default $elevations map, you can omit the first argument.
// Returns elevation 1 shadows
$elevation-1: elevation(1);
// Returns elevation 1 shadows
$my-elevation-1: elevation($name: 1);
Passing Elevations to Themes
Several theme mixins allow you to pass an elevations map. Most notably, the theme has a parameter named $elevations which allows you to update the elevations for all component themes.
모든 구성요소 테마가 사용자 정의 고도를 사용하도록 강제합니다.
@include theme(
//...
$elevations: $my-elevations
);
이 외에도 고도를 완전히 무시하거나 사용하지 않도록 테마에 지시할 수 있습니다.
@include theme(
//...
$elevations: $my-elevations,
$elevation: false // disables all elevations
);
Since the elevation function returns a list of box shadows, you can use the return value of that function to modify only certain elevations in your component themes.
$card-theme: card-theme(
$resting-shadow: elevation(10)
);
@include css-vars($card-theme);
You can also pass simple box shadows without taking advantage of the elevation function:
$card-theme: card-theme(
$resting-shadow: 0 10px 10px 10px #666
);
.my-card {
@include css-vars($card-theme);
}
Custom Elevations
It is possible to create an elevations map that doesn't adhere to the Material Design Guidelines as generated by the elevations function. Make sure your custom elevation maps contain at least 25 elevation levels. Here's the elevations map signature our themes expect to build correctly:
// 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