Ignite UI for Web Components의 테마
Ignite UI for Web Components Bootstrap, Material, Fluent, Indigo의 네 가지 테마와 함께 제공됩니다. 모든 구성 요소 테마는 구성 요소에 내장되어 있지만 팔레트, 타이포그래피 및 기타 글로벌 구성이 작동하려면 글로벌 스타일 파일이 필요합니다.
Loading a Theme
테마를 활성화하려면 테마 파일을 로드해야 합니다. 프로젝트 구성에 따라 import 오거나 link 수 있습니다.
모든 번들 테마와 해당 경로의 전체 목록은 다음과 같습니다.
| 이름 | 변종 | 위치 |
|---|---|---|
| 부트스트랩 | 빛 | igniteui-webcomComponents/themes/light/bootstrap.css |
| 재료 | 빛 | igniteui-웹 구성 요소/테마/빛/material.css |
| 유창한 | 빛 | igniteui-웹 구성 요소/테마/빛/fluent.css |
| 남빛 | 빛 | igniteui-웹 구성 요소/테마/light/indigo.css |
| 부트스트랩 | 어두운 | igniteui-웹 구성 요소/테마/어두운/bootstrap.css |
| 재료 | 어두운 | igniteui-웹 구성 요소/테마/어두운/material.css |
| 유창한 | 어두운 | igniteui-webcomComponents/themes/dark/fluent.css |
| 남빛 | 어두운 | igniteui-웹 구성 요소/테마/dark/indigo.css |
Runtime Theme Switching
Changing the theme at runtime also requires you to replace the global stylesheet from the table above.
Ignite UI for Web Components 사용하면 라이브러리에서 내보낸 기능을 사용하여 ConfigureTheme 런타임에 구성 요소 테마를 전환할 수 있습니다.
그것을 호출하고 네 가지 유효한 테마 -bootstrap, material, fluent, 또는 indigo 문자열로 전달하면 로드된 구성 요소 스타일이 변경됩니다.
import { configureTheme } from "igniteui-webcomponents";
// Sets material as the theme to be used by all components
configureTheme("material");
tsThis only tells components to switch their internal styles to the desired theme, you should also switch the global theme file to one of the listed files above.
API References
ConfigureTheme