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

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

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

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