syncfusion-react-kanban

用途

Syncfusion React Kanban 是面向 React 项目的看板组件技能，用于实现灵活的任务管理与工作流可视化。当你需要构建看板、工作流阶段或任务跟踪界面时，可使用该技能完成组件的安装、配置与定制。

主要能力

文档列出的核心概念与能力包括：

卡片：表示任务或条目，每个卡片显示来自某字段的标题和来自另一字段的内容，可带标签、自定义模板，支持单选与多选。
列：定义工作流阶段（如 To Do、In Progress、Done），每列有表头，可显示条目数量，并能独立控制拖放行为。
泳道：可选的横向分组层，按分类（如用户、优先级或团队）组织卡片，支持自定义表头。
拖放：内置支持在列之间、列内部、跨泳道以及拖到外部源移动卡片，可按列配置。
数据绑定：可连接静态数组或动态数据源（DataManager 对接 OData/REST API），支持实时更新。
模板：可用自定义 HTML/JSX 定制卡片布局、列头、泳道头、提示和对话框。
排序、过滤与搜索：包含卡片排序、每列最小/最大卡片数量（WIP 限制）、过滤与搜索模式、选择模式及校验错误处理。
定制与样式：内置主题（Material、Bootstrap、Fluent、Tailwind）、CSS 自定义与变量、响应式设计、大数据集虚拟滚动、状态持久化、本地化与无障碍（ARIA、键盘导航）。
方法：以编程方式管理卡片（addCard、updateCard、deleteCard）和列（addColumn、deleteColumn、hideColumn、showColumn），获取数据（getSelectedCards、getCardDetails、getColumnData、getSwimlaneData），控制界面（showSpinner、hideSpinner、refreshUI、openDialog、closeDialog），以及批量操作、重排、复制等常见模式。
事件：卡片事件（cardClick、cardDoubleClick、cardRendered、cardSelectionChanging）、对话框事件（dialogOpen、dialogClose）、拖放事件（dragStart、drag、dragStop）、数据事件（dataBinding、dataBound、actionBegin、actionComplete、actionFailure）与生命周期事件（created）。

使用方式

技能文档按需求提供参考文件导航，包括：入门安装与 CSS 主题导入、核心结构（卡片/列/关键字段）、泳道、拖放、数据绑定、模板与对话框、排序过滤与 WIP 校验、定制与样式、属性、方法和事件。

快速上手的示例代码为：

import React from 'react';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-kanban';
import '@syncfusion/ej2-react-kanban/styles/material.css';

export default function KanbanQuickStart(): JSX.Element {
  const kanbanData: { [key: string]: Object } = [
    { Id: '1', Status: 'Open', Summary: 'Analyze requirements' },
    { Id: '2', Status: 'Open', Summary: 'Design UI mockups' },
    { Id: '3', Status: 'InProgress', Summary: 'Implement backend API' },
    { Id: '4', Status: 'InProgress', Summary: 'Build frontend components' },
    { Id: '5', Status: 'Closed', Summary: 'Deploy to production' }
  ];

  return (
    <KanbanComponent
      dataSource={kanbanData}
      keyField="Status"
      cardSettings={{ contentField: 'Summary' }}
    >
      <ColumnsDirective>
        <ColumnDirective key="0" keyField="Open" headerText="Open" />
        <ColumnDirective key="1" keyField="InProgress" headerText="In Progress" />
        <ColumnDirective key="2" keyField="Closed" headerText="Closed" />
      </ColumnsDirective>
    </KanbanComponent>
  );
}

该示例创建 3 个工作流列（Open、InProgress、Closed），通过 Status 字段映射卡片到列，显示 5 张卡片的 Summary 文本，并默认启用拖放。

文档还给出常见模式：

用泳道按用户分组（swimlaneSettings={{ keyField: 'Assignee' }}）。
阻止特定列的拖放（allowDrag、allowDrop）。
用 WIP 限制校验卡片数量（maxCount、minCount）。
处理卡片双击编辑（cardDoubleClick）。
将看板绑定到远程 API（DataManager + UrlAdaptor）。

适用场景

适合需要在 React 应用中构建任务看板、工作流阶段管理或任务跟踪界面的场景，尤其是需要卡片分组、拖拽交互、自定义模板、远程数据绑定与 WIP 限制校验的团队协作类应用。

限制

资料未提供具体的收费与价格信息、平台兼容性细节、性能指标或与其他组件的对比。部分能力（如本地化、无障碍、虚拟滚动、持久化）在文档中仅作为章节标题列出，具体实现细节需查阅对应参考文件。

技能介绍

用途

主要能力

使用方式

适用场景

限制