표고

고도는 더 나은 기능 캡슐화를 가능하게 하기 위해 문서 객체 모델 트리 사이의 기능적 경계를 설정하고 유지하는 데 사용됩니다. Ignite UI for Angular의 고도 구현은 Material Design의 고도를 모델로 합니다.

개요

Ignite UI for Angular의 그림자는 25개의 고도 수준을 기반으로 깊이 계층 구조를 설정하기 위한 머티리얼 디자인 지침을 밀접하게 따릅니다. 그림자 투사 크기는 고도 수준 번호와 관련이 있습니다. 고도 수준 숫자가 높을수록 그림자가 더 커집니다. Ignite UI for Angular의 고도는 CSS 변수로 노출됩니다. 각 변수는 3개의 box-shadows 세트를 저장합니다. 이러한 box-shadows 현실 세계에서 관찰되는 그림자의 속성인 그림자, 반그림자, 안툼브라 요소를 나타냅니다.

다음은 머티리얼 테마 및 해당 CSS 변수 이름에 있는 Ignite UI for Angular의 다양한 구성 요소에 사용되는 정지 고도 목록입니다.

요소	기본 고도 수준	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

​CSS Variable 열에서 볼 수 있듯이 모든 고도는--ig-elevation-[level] 형식으로 정의됩니다. 언급한 대로 고도 수준 번호는 0부터 24(포함)까지입니다.

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

기본 고도 업데이트는 팔레트 색상 업데이트 방법과 유사한 방식으로 작동합니다. 변수를 다른 값에 다시 할당하기만 하면 됩니다. 고도의 경우 값이 box-shadow 인지 확인하세요.

Example:

/* 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);
}

이렇게 하면 포함된 버튼과 카드--grid-shadow, 그리드가 할당된--ig-elevation-2 값으로 설정됩니다--resting-shadow.

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

Additional Resources

관련 주제:

• Sass를 사용한 고도

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

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