Ignite UI for Web Components의 테마

    Ignite UI for Web Components Bootstrap, Material, Fluent, Indigo의 네 가지 테마와 함께 제공됩니다. 모든 구성 요소 테마는 구성 요소에 내장되어 있지만 팔레트, 타이포그래피 및 기타 글로벌 구성이 작동하려면 글로벌 스타일 파일이 필요합니다.

    테마 로드

    테마를 활성화하려면 테마 파일을 로드해야 합니다. 프로젝트 구성에 따라 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

    런타임 테마 전환

    런타임 시 테마를 변경하려면 위 표의 전역 스타일시트도 바꿔야 합니다.

    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");
ts

    이는 구성 요소에 내부 스타일을 원하는 테마로 전환하도록 지시할 뿐이며 전역 테마 파일을 위에 나열된 파일 중 하나로 전환해야 합니다.

    Ignite UI for Web Components | CTA 배너

    API 참조

    • ConfigureTheme