syncfusion-blazor-kanban

实现 Syncfusion Blazor Kanban 组件

何时使用此技能

在以下情况下使用此技能：

• 在 Blazor 中构建 Kanban 看板或工作流管理界面
• 实现基于列的工作流任务／卡片管理
• 添加泳道分组，按负责人或类别整理卡片
• 启用在列之间拖放卡片
• 配置 WIP（进行中）验证限制
• 使用模板自定义卡片外观
• 将 Kanban 绑定到本地或远程数据源
• 将 Kanban 与外部组件（Schedule、TreeView）集成

快速开始

1. 安装 NuGet 包

dotnet add package Syncfusion.Blazor.Kanban
dotnet add package Syncfusion.Blazor.Themes

2. 注册服务（Program.cs）

using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();

3. 添加导入（_Imports.razor）

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Kanban

4. 添加样式表和脚本（index.html 或 App.razor）

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

5. 添加包含卡片的基本 Kanban

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() {"Testing"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
</SfKanban>

@code {
    public class TasksModel
    {
        public string Id { get; set; }
        public string Title { get; set; }
        public string Status { get; set; }
        public string Summary { get; set; }
        public string Assignee { get; set; }
    }

    public List<TasksModel> Tasks = new List<TasksModel>()
    {
        new TasksModel { Id = "Task 1", Title = "BLAZ-29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer.", Assignee = "Nancy Davloio" },
        new TasksModel { Id = "Task 2", Title = "BLAZ-29002", Status = "InProgress", Summary = "Improve application performance", Assignee = "Andrew Fuller" },
        new TasksModel { Id = "Task 3", Title = "BLAZ-29003", Status = "Open", Summary = "Arrange a web meeting with the customer.", Assignee = "Janet Leverling" },
        new TasksModel { Id = "Task 4", Title = "BLAZ-29004", Status = "Testing", Summary = "Fix the issues reported by the customer.", Assignee = "Janet Leverling" },
        new TasksModel { Id = "Task 5", Title = "BLAZ-29005", Status = "Close", Summary = "Fix the issues reported in Safari browser.", Assignee = "Steven walker" },
    };
}

导航指南

主题	参考文件
入门（WebAssembly/Server/Web App）	getting-started.md
数据绑定（本地、远程、ExpandoObject、Observable）	data-binding.md
列配置	columns.md
卡片自定义	cards.md
拖放（内部和外部）	drag-and-drop.md
泳道分组	swimlane.md
卡片编辑对话框	dialog.md
事件参考	events.md
卡片排序	sort.md
工作流限制	workflow.md
WIP 验证（MinCount/MaxCount）	validation.md
样式和 CSS 类	style.md
无障碍（WCAG、键盘导航）	accessibility.md
本地化和 RTL	localization.md
工具提示	tooltip.md
响应式模式	responsive-mode.md
高度和宽度尺寸	dimensions.md

常见模式

带泳道的 Kanban

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
    <KanbanSwimlaneSettings KeyField="Assignee"></KanbanSwimlaneSettings>
</SfKanban>

带 WIP 验证的 Kanban

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="Backlog" KeyField="@(new List<string>() {"Open"})" MinCount="2"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})" MaxCount="3"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
</SfKanban>

使用基于索引的排序的 Kanban

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
    <KanbanSortSettings SortBy="SortOrderBy.Index" Field="RankId"></KanbanSortSettings>
</SfKanban>

关键属性参考

属性	组件	描述
KeyField	SfKanban	映射用于确定卡片所属列的数据字段
DataSource	SfKanban	将本地或远程数据绑定到 Kanban
AllowDragAndDrop	SfKanban	启用／禁用拖放（默认值：true）
EnableTooltip	SfKanban	悬停时显示卡片详情
EnableRtl	SfKanban	启用从右到左的布局
HeaderField	KanbanCardSettings	映射卡片标题的唯一 ID 字段
ContentField	KanbanCardSettings	映射卡片主体中显示的字段
KeyField	KanbanColumn	映射到此列的一个或多个卡片状态值
AllowToggle	KanbanColumn	允许展开／折叠列
MinCount	KanbanColumn	WIP 验证的最小卡片数
MaxCount	KanbanColumn	WIP 验证的最大卡片数
TransitionColumns	KanbanColumn	将卡片限制为仅能放入指定列
AllowDrop	KanbanColumn	阻止卡片被放入某列
AllowDrag	KanbanColumn	阻止从某列拖出卡片
KeyField	KanbanSwimlaneSettings	按此字段将卡片分组到泳道行
SortBy	KanbanSortSettings	排序模式：DataSourceOrder、Index 或 Custom