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

    [!Note] Changing the theme at runtime also requires you to replace the global stylesheet from the table above.

    Ignite UI for Web Components 라이브러리에서 내보낸 ConfigureTheme 기능을 사용하여 런타임에 구성 요소 테마를 전환할 수 있습니다.

    이를 호출하고 네 가지 유효한 테마(부트스트랩, 머티리얼, 플루언트 또는 인디고) 중 하나를 문자열로 전달하면 로드된 구성 요소 스타일이 변경됩니다.

    import { configureTheme } from "igniteui-webcomponents";

// Sets material as the theme to be used by all components
configureTheme("material");

    [!Note] This 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