Ignite UI for Web Components에서 테마 사용자 정의
Ignite UI for Web Components의 테마는 다양한 CSS 변수를 변경하여 사용자 정의할 수 있습니다. 해당 변수를 덮어쓰면 팔레트, 타이포그래피, 입면도, 원형율, 크기 및 간격을 사용자 정의할 수 있습니다.
개요
다음 섹션에서는 팔레트, 타이포그래피 및 입면도를 다루고, 이 섹션에서는 단일 변수 수정을 통해 전역 수준에서 구성 요소 스타일에 영향을 미치는 옵션을 다룹니다.
Roundness
모든 구성요소는 일종의 진원도(경계-반지름)를 정의합니다. 일부 구성 요소는 아바타 및 배지와 같은 구성 요소의 모양을 설정하기 위한 속성을 제공하는 반면 버튼과 같은 다른 구성 요소는 테마의 일부로 내부적으로 테두리 반경만 정의합니다. 이러한 경우--ig-radius-factor CSS 변수의 값을 수정하여 해당 구성 요소의 테두리 반경을 가지고 놀 수 있습니다.:root 범위에서 전체적으로 수정할 수도 있고, 구성 요소별로 수정할 수도 있습니다. 변수는 0과 1 사이의 유리수 값을 허용합니다. 값을 0으로 설정하면 테두리 반경이 0으로 효과적으로 설정됩니다. 값을 1로 설정하면 테두리 반경이 미리 정의된 초기 테두리 반경으로 설정됩니다. 예를 들어 0.5와 같이 0과 1 사이의 값은 테두리 반경을 구성 요소의 스타일시트에 정의된 기본 테두리 반경의 50%로 설정합니다.
Examples:
/* Set the border-radius for all components to 50% of their default value. */
:root {
--ig-radius-factor: .5;
}
/* Set the border-radius of the button component to 0. */
igc-button {
--ig-radius-factor: 0;
}
Elevation
전역 반경과 유사하게 일부 구성요소는 내부 고도(상자 그림자)를 정의합니다. 모든 구성 요소를 평면으로 만드는 것은 각 구성 요소에 대한 상자 그림자를 덮어쓰는 방식으로 수행하는 경우 지루할 수 있습니다.--ig-elevation-factor CSS 변수를 수정하여 모든 구성 요소에 대한 상자 그림자 동작을 수정할 수 있습니다. 변수는 0과 1 사이의 유리수 값을 허용합니다. 값을 0으로 설정하면 모든 구성요소의 상자 그림자가 없음으로 효과적으로 설정됩니다. 값을 1로 설정하면 고도 값이 미리 정의된 초기 상자 그림자 값으로 설정됩니다. 예를 들어 0.5와 같이 0과 1 사이의 값은 상자 그림자 강도를 구성 요소의 스타일시트에 정의된 원래 값의 50%로 설정합니다.
/* Set the elevation for all components to 50% of their original box-shadow values. */
:root {
--ig-elevation-factor: .5;
}
크기
일부 구성 요소는 구성 요소 스타일시트에 기본 크기가 설정되어 있는 small, medium 및 large의 다양한 크기 조정을 지원합니다.--ig-size CSS 변수를 활용하여 모든 구성 요소의 크기를 동시에 또는 개별적으로 수정할 수 있습니다. 가능한 값은 var(--ig-size-small), var(--ig-size-medium) 또는 var(--ig-size-large).
애플리케이션의 모든 구성 요소에 대해 특정 크기를 설정하려면:root 범위에서--ig-size 변수를 정의하세요.
본보기:
:root {
--ig-size: var(--ig-size-small);
}
또는 특정 구성 요소만 대상으로 지정하려면 변수 범위를 구성 요소의 태그 선택기로 지정하세요.
igc-avatar {
--ig-size: var(--ig-size-medium);
}
Spacing
간격은 구성 요소 테마에 따라 설정된 내부 구성 요소 패딩 및 여백을 나타냅니다. 간격은 가로(인라인) 및 세로(블록)가 될 수 있습니다. 각 구성 요소에 대해 수동으로 모든 패딩 및 여백 값을 명시적으로 덮어쓰지 않고도 구성 요소 내에서 다양한 요소가 패딩되는 방식을 쉽게 제어할 수 있게 되었습니다. 이는--ig-spacing CSS 변수에 의해 수행됩니다. 해당 값을 양의 유리수로 설정할 수 있습니다. 그에 따라 간격이 조정됩니다. 기본값은 1이며, 이는 구성 요소 스타일시트에 설정된 기본 가로/세로 패딩/여백을 나타냅니다. 값을 1.5로 변경하면 모든 간격이 1.5배 또는 150%만큼 조정됩니다. 반대로 값을 0으로 설정하면 모든 항목이 하나로 묶이고 모든 간격이 패딩/여백이 없는 것과 동일하게 줄어듭니다. 간격 요소 변경은 크기 속성과 함께 작동하며 그에 따라 크기가 조정됩니다.
일부 구성 요소에서는 한 방향(수평 또는 수직)의 간격만 변경할 수 있지만 다른 구성 요소에서는 양방향에서 별도의 간격 값을 지정할 수 있습니다.
모든 구성 요소의 간격을 변경하려면:root 범위에서 해당 값을 덮어쓸 수 있습니다.
본보기:
/* Increase the spacing for all components to 150%. */
:root {
--ig-spacing: 1.5;
}
단일 구성 요소의 간격만 변경하려면 변수 범위를 구성 요소의 태그 선택기로 지정하세요.
/* Reduce the spacing for the drop-down elements to 50% of their original value. */
igc-dropdown {
--ig-spacing: 0.5;
}
앞서 언급했듯이 이를 지원하는 구성 요소에 대해 가로 및 세로 간격을 개별적으로 제어할 수 있습니다. 이는--ig-spacing-inline (수평) 및--ig-spacing-block (수직) 변수를 수정하여 달성할 수 있습니다. 원리는--ig-spacing 변수와 동일합니다.--ig-spacing 변수를 수정하면 양방향의 간격이 같은 양만큼만 변경됩니다.
API References
ConfigureTheme