跳至主要内容

主题

描述​

可选。定义应用于看板的主题

用法​

theme?: {
    name: string, // "material"（默认）| "willow" | "willow-dark"
    fonts?: boolean
};
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"/>

参数​

以下是可用于配置 theme 的参数:

  • theme - （可选）包含主题设置的对象，支持:
    • name - （必需）要应用于看板的主题名称
    • fonts - （可选）控制是否从 CDN 加载字体（wxi 字体）
提示

Willow 和 Willow-Dark 主题也可用。要动态切换主题，可以使用 setTheme() 方法。

默认配置​

看板默认使用 Material 主题。

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

示例​

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

更新日志: 该属性从 v1.4 版本引入

相关文档: 样式定制

相关示例: