初始化

以下是如何快速在页面上设置 Kanban 并为您的应用添加所有看板功能。只需按照以下步骤即可让组件运行:

1. 在页面中引入 Kanban 源文件。
2. 创建 Kanban 的容器。
3. 使用构造函数初始化 Kanban。

引入源文件

首先，下载 Kanban 包 并将其解压到您的项目文件夹中。

要使 Kanban 正常工作，只需将以下两个文件添加到页面中:

• kanban.js
• kanban.css

请确保这些文件的路径是正确的:

index.html

<script type="text/javascript" src="./dist/kanban.js"></script>  
<link rel="stylesheet" href="./dist/kanban.css">

创建容器

为 Kanban 添加一个容器元素并为其分配一个 ID，例如 "root":

index.html

<div id="root"></div>

如果您希望 Kanban 看板带有 Toolbar，也请为其添加一个单独的容器:

index.html

<div id="toolbar"></div> // Toolbar 的容器
<div id="root"></div> // Kanban 的容器

初始化 Kanban

Kanban 通过 kanban.Kanban 构造函数进行初始化。它需要两个参数:

• 一个 HTML 容器（HTML 容器的 ID）
• 一个包含配置信息的对象。完整属性列表见此处

index.html

// 创建 Kanban
new kanban.Kanban("#root", {
    // 配置属性
});

如果您还添加了 Toolbar，请使用 kanban.Toolbar 构造函数单独初始化。它同样需要两个参数:

• 一个 HTML 容器（HTML 容器的 ID）
• 一个包含配置信息的对象

index.html

// 创建 Kanban
const board = new kanban.Kanban("#root", {
    // 配置属性
});

new kanban.Toolbar("#toolbar", {
    // 配置属性
});

信息

有关设置 Kanban Toolbar 的更多信息，请参见 Configuration 部分。

配置属性

注释

完整的 Kanban 配置选项列表可在此处查阅。
Kanban Toolbar 的所有属性见这里。

示例

以下代码片段演示了如何使用一些初始数据来初始化 Kanban: