theme

Описание

Необязательно. Тема, которая будет применена к Kanban

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

theme?: {
    name: string, // "material" (по умолчанию) | "willow" | "willow-dark"
    fonts?: boolean
};

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"/>

Параметры

Для настройки theme можно использовать следующие параметры.

• theme - (необязательно) объект с настройками темы. Здесь можно указать следующие параметры:
  • name - (обязательно) имя темы, которая будет применена к Kanban
  • fonts - (необязательно) включает или отключает загрузку шрифтов с CDN (шрифт wxi)

совет

Вы также можете применять темы Willow и Willow-Dark. Для динамического изменения текущей темы используйте метод setTheme().

Конфигурация по умолчанию

По умолчанию Kanban использует тему Material.

theme: {
    name: "material",
    fonts: true
}

Пример

// создание Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards,
    theme: {
        name: "willow-dark", // изначально будет установлена тема "willow-dark"
        fonts: false
    }
    // другие параметры
});

История изменений: Свойство добавлено в версии v1.4

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

Связанный пример: Kanban. Изменение темы через CSS класс