표고

표고는 더 나은 기능적 캡슐화를 가능하게 하기 위해 문서 개체 모델 트리 간에 기능적 경계를 설정하고 유지하는 데 사용됩니다. Ignite UI for Angular 에서의 입면도 구현은 Material Design의 입면 도를 본떠 모델링됩니다.

개요

Shadows in Ignite UI for Angular closely follow the Material Design guidelines for establishing depth hierarchy based on 25 elevation levels. The size of the shadow cast is related to the elevation level number. The higher the elevation level number, the larger the shadow will be. Elevations in Ignite UI for Angular are exposed as CSS variables. Each variable stores a set of 3 box-shadows. These box-shadows represent the umbra, penumbra, and antumbra elements that are the properties of shadows as observed in the real world.

다음은 Material Theme의 Ignite UI for Angular 다양한 구성 요소에서 사용되는 휴식 고도 목록과 해당 CSS 변수 이름입니다.

요소	기본 고도 수준	CSS 변수
배너, 버튼, 토스트	0	--ig-고도-0
배지, 캐러셀 버튼, 검색 입력	1	--ig-고도-1
버튼 그룹, 포함 된 버튼, 카드, 그리드, 스위치	2	--ig-고도-2
네비게이션바, 스낵바	4	--ig-고도-4
플로팅 액션 버튼,	6	--ig-고도-6
하단 탐색, 고스트 칩, 드롭다운	8	--ig-고도-8
항해자	16	--ig-고도-16
대화	24	--ig-고도-24

As you can see from the CSS Variable column, all elevations are defined in the following format --ig-elevation-[level]. As mentioned, the elevation level number go from 0 through 24(inclusive).

Usage

자체 구성요소에서 고도를 사용하려면 원하는 레벨의 변수 이름을 참조하기만 하면 됩니다.

.floaty-element {
  box-shadow: var(--ig-elevation-6);
}

기존 구성요소 테마에서 고도를 변경하는 작업은 비슷하게 작동합니다.

[igxButton="contained"] {
  --resting-shadow: var(--ig-elevation-4);
  --hover-shadow: var(--ig-elevation-12);
  --focus-shadow: var(--ig-elevation-12);
}

각 구성요소 테마에 대한 문서에는 각 상태에서 사용되는 기본 고도가 나열되어 있습니다. 고도가 나열되지 않으면 구성요소는 사전 정의된 고도 수준을 사용하지 않습니다.

Defining Elevations

Updating the default elevations works in a way similar to how palette colors are updated. You simply need to reassign the variable to a different value. With elevations, make sure the value is a box-shadow.

본보기:

/* styles.css */
: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

특정 범위에 대해서만 전체적으로 설정된 고도를 숨길 수 있습니다. 우리는 버튼 구성 요소가 휴면 상태로 고도 수준 2를 사용한다는 것을 이미 확인했습니다. 레벨 2는 카드 및 그리드 구성 요소에서도 사용됩니다. 따라서 세 가지 모두의 그림자를 변경하려면 다음을 수행하면 됩니다.

[igxButton="contained"],
igx-grid,
igx-card {
    --ig-elevation-2: 0 3px 9px 0 rgba(0, 0, 0, .24);
}

This will set the --resting-shadow in the contained button and card, and the --grid-shadow in the grid, to the value assigned to --ig-elevation-2;

Sass를 사용하면 고도를 더욱 강력한 방식으로 생성하고 사용할 수도 있습니다. 자세한 내용은 아래 관련 주제를 확인하세요.

표고

개요

Usage

Defining Elevations

Shadowing

Additional Resources

테마