跳至主要内容

自定义

您可以通过以下属性自定义 Kanban 的外观和行为：

自定义卡片​

使用 cardTemplate 属性可通过自定义 HTML 模板渲染卡片。该回调函数返回每张卡片的标记内容。

回调函数接收一个包含以下参数的对象：

  • cardFields — 卡片数据
  • selected — 卡片是否被选中
  • dragging — 卡片是否正在被拖动
  • cardShape — 卡片配置

要在自定义卡片模板中嵌入右键菜单触发器，请将菜单图标包裹在带有 data-menu-id=${cardFields.id} 属性的 <div> 中（与内置卡片结构相同）。组件通过该属性将菜单绑定到包装元素。

以下演示应用了自定义卡片模板：

自定义右键菜单​

通过 cardShape.menu、columnShape.menu 和 rowShape.menu 属性配置卡片、列和行的右键菜单。每个 menu.items 条目可以使用内置操作 ID 调用默认操作，也可以为其他任何行为定义自定义 onClick 处理程序。

cardShape.menu​

默认情况下，卡片菜单显示复制和删除选项。可用的内置操作 ID：

  • "duplicate-card" — 复制卡片
  • "delete-card" — 删除卡片

columnShape.menu​

  • "add-card" — 向列中添加新卡片
  • "set-edit" — 重命名列
  • "move-column:left"、"move-column:right" — 向左或向右移动列
  • "delete-column" — 删除列

rowShape.menu​

  • "set-edit" — 重命名行
  • "move-row:up"、"move-row:down" — 向上或向下移动行
  • "delete-row" — 删除行

将 menu.items 设置为函数，可以为每张卡片、列或行渲染不同的菜单。从函数中返回 null 或 false 可隐藏特定项目的菜单。

以下演示应用了自定义右键菜单：

自定义列标题​

columnShape 属性为列标题提供模板和行为配置：

以下代码片段设置了一个包含折叠图标、带卡片数量的标签以及菜单触发器的自定义标题模板：

new kanban.Kanban("#root", {
    columns,
    cards,
    columnShape: {
        headerTemplate: kanban.template(({ column, columnState }) => {
            return `<div className="wx-collapse-icon" data-action="collapse">
                        <i className="${column.collapsed ? "wxi-angle-right" : "wxi-angle-left"}"></i>
                    </div>
                    ${!column.collapsed
                        ? `<div className="wx-label" data-action="rename">
                                ${column.label} (${columnState.cardsCount})
                            </div>
                            <div className="wx-menu" data-menu-id="${column.id}">
                                <i className="wxi-dots-h"></i>
                            </div>`
                        : ""}`;
        }),
        collapsedTemplate: kanban.template(({ column }) => `<div className="wx-collapsed-label">${column.label}</div>`)
    }
});
提示

要使 fixedHeaders 生效，请为 Kanban 容器设置固定高度，使看板可以垂直滚动。

条件 CSS 类​

要按条件应用 CSS 类，请将函数传递给 cardShape、columnShape 或 rowShape 的 css 参数。该函数根据当前数据返回类名：

以下代码片段高亮显示逾期卡片和负载不足的列：

new kanban.Kanban("#root", {
    columns,
    cards,
    cardShape: {
        css: (card) => card.end_date < new Date() ? "overdue" : ""
    },
    columnShape: {
        css: (column, cards) => cards.length < 5 ? "low-load" : ""
    }
});

自定义工具栏​

使用 items 属性自定义工具栏结构。该数组定义显示哪些控件、控件顺序及其行为。条目可以是：

  • 内置控件："search"、"sort"、"undo"、"redo"、"addColumn"、"addRow"、"spacer"
  • 使用自定义选项覆盖搜索栏或排序控件的对象
  • 作为字符串标识符或函数传递的自定义控件

以下演示自定义了控件顺序、搜索栏、排序控件和自定义控件：

自定义样式​

通过修改 CSS 变量的值来自定义 Kanban 外观。完整列表请参阅 样式化 部分。

以下示例为 Kanban 应用了自定义样式：

Need more help?Contact Support