kanban/README.md

@apigo.cc/kanban API 手册

原生 Web Component 编写的轻量级看板组件。支持响应式数据绑定与自动拖拽排序。

---

1. 引入方式 (UMD 优先)

在 HTML 中引入脚本即刻注册 <web-kanban> 自定义标签。

<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/kanban@1.0.1/dist/kanban.min.js"></script>

<script>
    // 直接操作全局 Kanban 类或 DOM 元素
    console.log(Kanban);
</script>

---

2. 核心用法

组件化用法 (推荐)

直接在 HTML 中使用 <Kanban> 标签，通过 state 进行数据绑定。

<div $data="{ 
    myBoard: [
        { id: 'todo', title: '待办', items: [{ id: '1', content: '任务 1' }] }
    ]
}">
    <Kanban $.state.data="myBoard"></Kanban>
</div>

JS 直接调用

...

3. API 参考

属性

• .data: 设置或获取看板数组。

事件

• @update: 拖拽结束且位置变动时触发，detail 为全量新数据。

---

开发者提示 (AI 必读)

1. 样式隔离: 组件使用 Shadow DOM，外部 CSS 无法影响内部。
2. 全局变量: UMD 模式下，Kanban 类自动挂载到 window。