跳至主要内容

主题

描述​

可选。指定应用于工具栏的主题。

用法​

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

除了设置 theme 属性之外，您还可以通过向控件容器添加相应的 css 类来应用所需的主题:

  • Material 主题
    <!-- 看板工具栏 -->
    <div id="toolbar" class="wx-material-theme"></div>
    <!-- 看板容器 -->
    <div id="root" class="wx-material-theme"></div>
  • Willow 主题
    <!-- 看板工具栏 -->
    <div id="toolbar" class="wx-willow-theme"></div>
    <!-- 看板容器 -->
    <div id="root" class="wx-willow-theme"></div>
  • Willow-Dark 主题
    <!-- 看板工具栏 -->
    <div id="toolbar" class="wx-willow-dark-theme"></div>
    <!-- 看板容器 -->
    <div id="root" class="wx-willow-dark-theme"></div>

或者，您也可以直接从 skins 文件夹中引入所需主题的样式表:

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

默认配置​

工具栏默认使用 Material 主题。您也可以切换到 Willow 或 Willow-Dark 主题。

提示

若要动态更新主题，请使用 setConfig() 方法。

示例​

// 创建看板
const board = new kanban.Kanban("#root", {
    columns,
    cards,
    theme: "willow-dark" // 设置初始主题为 "willow-dark"
    // 其他参数
});
// 创建工具栏
new Toolbar("#toolbar", {
    api: board.api,
    theme: "willow-dark", // 设置初始主题为 "willow-dark"
});

更新日志: 此属性在 v1.4 版本中引入

相关文档: 样式化

相关示例: