표고

고도는 더 나은 기능 캡슐화를 가능하게 하기 위해 문서 개체 모델 트리 간의 기능 경계를 설정하고 유지하는 데 사용됩니다. Sass 테마 라이브러리를 사용하여 고도 세트를 만들 수 있습니다.

개요

Ignite UI for Angular의 고도는 25개 요소의 맵으로 선언됩니다. 각 요소는 키가 고도 수준 이름(0..24)이고 값이 3개의 box-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
);

일부 구성요소 테마는 해당 인스턴스에 대해서만 사용자 정의 고도를 전달할 수 있도록 $elevations 매개변수도 허용합니다.

예를 들어 카드 구성요소는 사용자 정의 고도 전달을 지원합니다. 사용자 정의 고도 지도를 허용하는 구성요소를 알아보려면 해당 Sass 문서를 살펴보세요. 각 구성 요소는 고도 지도의 특정 레벨만 사용하며 해당 레벨도 구성 요소의 Sass 문서에 나열되어 있습니다.

@include card(card-theme(
    //...
    $elevations: $my-elevations,
));

​elevation 함수는 상자 그림자 목록을 반환하므로 해당 함수의 반환 값을 사용하여 구성 요소 테마의 특정 고도만 수정할 수 있습니다.

$card-theme: card-theme(
    $resting-shadow: elevation(10)
);

@include card($card-theme);

이는 다음과 같이 컴파일됩니다.

.igx-card {
  box-shadow: 
    0 6px 6px -3px rgba(0, 0, 0, 0.26),
    0 10px 14px 1px rgba(0, 0, 0, 0.12),
    0 4px 18px 3px rgba(0, 0, 0, 0.08);
}

​elevation 기능을 활용하지 않고 간단한 상자 그림자를 전달할 수도 있습니다.

$card-theme: card-theme(
    $resting-shadow: 0 10px 10px 10px #666
);

.my-card {
  @include card($card-theme);
}

위 스니펫의 결과는 다음과 같습니다.

.my-card .igx-card {
  /* ... */
  box-shadow: 0 10px 10px 10px #666;
}

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

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub