주요 콘텐츠로 건너뛰기

theme

설명​

선택 사항입니다. Toolbar에 적용할 테마를 지정합니다.

사용법​

theme?: string; // "material" | "willow" | "willow-dark"
important

theme 속성 설정 외에도, 위젯 컨테이너에 해당 css 클래스를 추가하여 원하는 테마를 적용할 수 있습니다:

  • Material 테마
    <!-- Kanban toolbar -->
    <div id="toolbar" class="wx-material-theme"></div>
    <!-- Kanban container -->
    <div id="root" class="wx-material-theme"></div>
  • Willow 테마
    <!-- Kanban toolbar -->
    <div id="toolbar" class="wx-willow-theme"></div>
    <!-- Kanban container -->
    <div id="root" class="wx-willow-theme"></div>
  • Willow-Dark 테마
    <!-- Kanban toolbar -->
    <div id="toolbar" class="wx-willow-dark-theme"></div>
    <!-- Kanban container -->
    <div id="root" class="wx-willow-dark-theme"></div>

또는 skins 폴더에서 원하는 테마 스타일시트를 포함시켜 사용할 수도 있습니다:

<link type="stylesheet" href="path/to/kanban/skins/willow-dark.css"/>

기본 구성​

Toolbar의 기본 테마는 Material입니다. Willow 또는 Willow-Dark 테마로도 전환할 수 있습니다.

팁

실시간으로 테마를 변경하려면 setConfig() 메서드를 사용하세요.

예제​

// Kanban 생성
const board = new kanban.Kanban("#root", {
    columns,
    cards,
    theme: "willow-dark" // 초기 테마를 "willow-dark"로 설정
    // 기타 매개변수
});
// Toolbar 생성
new Toolbar("#toolbar", {
    api: board.api,
    theme: "willow-dark", // 초기 테마를 "willow-dark"로 설정
});

변경 로그: 이 속성은 v1.4에서 도입되었습니다.

관련 문서: 스타일링

관련 샘플: