표고

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

개요

Ignite UI for Angular의 그림자는 25개의 고도 수준을 기반으로 깊이 계층 구조를 설정하는 머티리얼 디자인 지침을 엄격히 따릅니다. 그림자 드라스의 크기는 고도 수와 관련이 있습니다. 고도 수치가 높을수록 그림자가 더 커집니다. Ignite UI for Angular 고도는 CSS 변수로 노출됩니다. 각 변수는 3box-shadows 개의 집합을 저장합니다. 이들은box-shadows 현실 세계에서 관찰되는 그림자의 특성인 엄브라, 반음, 안티엄브라 요소를 나타냅니다.

다음은 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

열에서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

기본 고도 업데이트는 팔레트 색상이 업데이트되는 방식과 비슷하게 작동합니다. 변수를 다른 값으로 재할당하면 됩니다. 고도는 값이 abox-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);
}

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

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

Additional Resources

관련 주제:

• Sass를 사용한 고도

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

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