syncfusion-blazor-kanban

Syncfusion Blazor Kanban コンポーネントの実装

このスキルを使用するタイミング

次のような場合にこのスキルを使用します。

• Blazor で Kanban ボードやワークフロー管理 UI を構築する
• 列ベースのワークフローでタスクやカードを管理する機能を実装する
• 担当者やカテゴリ別にカードを整理するスイムレーンのグループ化を追加する
• 列間でカードをドラッグ＆ドロップできるようにする
• 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	カードをこの列に割り当てる 1 つ以上のステータス値を指定します
AllowToggle	KanbanColumn	列の展開と折りたたみを可能にします
MinCount	KanbanColumn	WIP 検証で許容するカード数の最小値を指定します
MaxCount	KanbanColumn	WIP 検証で許容するカード数の最大値を指定します
TransitionColumns	KanbanColumn	カードを指定した列にのみドロップできるよう制限します
AllowDrop	KanbanColumn	列へのカードのドロップを禁止します
AllowDrag	KanbanColumn	列からのカードのドラッグを禁止します
KeyField	KanbanSwimlaneSettings	このフィールドでカードをスイムレーンの行にグループ化します
SortBy	KanbanSortSettings	並べ替えモード：DataSourceOrder、Index、または Custom