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 해 런타임에 구성 요소 테마를 전환할 수 있습니다.

    이를 호출하고 네 가지 유효한 주제 -bootstrap,material,,fluent 또는indigo 중 하나를 문자열로 전달하면 로드된 컴포넌트 스타일이 변경됩니다;

    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