KanbanBoard Demo

KanbanBoard

Flexibles Kanban-Board mit beliebig vielen Spalten und Cards. Cards können per Drag & Drop zwischen Spalten verschoben werden. Unterstützt Header-Templates, Drag-Handles und AllowDrop-Einschränkungen.

Basis-Beispiel

Drei Spalten mit einfachen Text-Cards. Nach dem Drop wird der State aktualisiert.

Design überarbeiten

UI-Konzept für v2

Tests schreiben

Unit-Tests für Kanban

Dokumentation

SKILL.md generieren

KanbanBoard implementieren

MVP-Version

CSS finalisieren

Responsive-Layout

SortableList

Bereits fertig

Splitter

Bereits fertig

Letztes Event: —

Drag-Handle

Mit DragHandleSelector=".oo-kanban-handle" kann nur am Handle-Icon gezogen werden.

Aufgabe Alpha

Aufgabe Beta

Aufgabe Gamma

Aufgabe Delta

Eigener Header & gesperrte Spalte

Die erste Spalte hat ein benutzerdefiniertes HeaderTemplate. Die letzte Spalte hat AllowDrop="false" – Cards können dort nicht abgelegt werden.

Feature X

Feature Y

Bug #42

Feature Z

Feature W

SKILL.md – Kanbanboard

---
name: KanbanBoard
description: Onesown Blazor Komponente KanbanBoard (Grouping). Verwende diesen Skill wenn du die KanbanBoard-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# KanbanBoard

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Grouping  
**Basisklasse:** `OoComponentBase`  

Kanban-Board mit mehreren Spalten und Drag &amp; Drop zwischen Spalten.

**Live-Demo:** https://components.schini.com/demo/kanbanboard  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``ChildContent`` | ``RenderFragment`` |  | Die KanbanColumn-Komponenten als ChildContent. |
| ``OnCardMoved`` | ``EventCallback<KanbanCardMovedArgs>`` |  | Wird ausgelöst, wenn eine Card in eine andere (oder gleiche) Spalte verschoben wurde. Liefert mit CardId, SourceColumnId, TargetColumnId und NewIndex. |
| ``DragHandleSelector`` | ``string`` |  | CSS-Selektor für den Drag-Handle innerhalb einer KanbanCard (z.B. ".oo-kanban-handle"). Wenn leer, ist die gesamte Card draggable. |

## Geerbte Parameter (OoComponentBase)

Alle nicht deklarierten HTML-Attribute (``class``, ``style``, ``data-*``, ``aria-*``, ...) werden an das Root-Element weitergereicht.

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` |  | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |

## Hinweise

- Natives HTML-Attribut class wird automatisch an das Root-Element weitergegeben
- Natives HTML-Attribut style wird automatisch an das Root-Element weitergegeben
- Alle weiteren nicht deklarierten Attribute (data-*, aria-*, id, tabindex, …) werden ebenfalls weitergereicht
- Größe der Komponente via Size mit OoSize-Konstanten steuern (OoSize.Xs bis OoSize.Xl)
- Basis-Verwendung: OnCardMoved="HandleCardMoved" mit KanbanColumn-Komponenten als ChildContent
- Spalten definieren: KanbanColumn ColumnId="todo" Title="To Do" mit KanbanCard-Kinder
- Kein Drop: AllowDrop="false" an einer KanbanColumn verhindert das Einwerfen von Cards
- Drag-Handle: DragHandleSelector=".mein-handle" beschränkt das Ziehen auf ein bestimmtes Element innerhalb einer KanbanCard
- OnCardMoved liefert KanbanCardMovedArgs mit CardId, SourceColumnId, TargetColumnId und NewIndex
- Der Consumer ist verantwortlich, seinen State im OnCardMoved-Handler zu aktualisieren und StateHasChanged aufzurufen