Перейти к основному содержимому

theme

Описание​

Необязательно. Указывает тему, применяемую к Toolbar.

Использование​

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

Помимо установки свойства theme, вы можете применить нужную тему, добавив соответствующие css классы в контейнеры виджетов:

  • Тема Material
    <!-- Панель инструментов Kanban -->
    <div id="toolbar" class="wx-material-theme"></div>
    <!-- Контейнер Kanban -->
    <div id="root" class="wx-material-theme"></div>
  • Тема Willow
    <!-- Панель инструментов Kanban -->
    <div id="toolbar" class="wx-willow-theme"></div>
    <!-- Контейнер Kanban -->
    <div id="root" class="wx-willow-theme"></div>
  • Тема Willow-Dark
    <!-- Панель инструментов Kanban -->
    <div id="toolbar" class="wx-willow-dark-theme"></div>
    <!-- Контейнер Kanban -->
    <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

Связанные статьи: Стилизация

Связанные примеры: