Kanban-Board — UI-Kit-Galerie

Beispiele

Auftrags-Board

Offen2

Angebot ACME erstellenRahmenvertrag Q4dringend

Lagerbestand prüfen

In Arbeit1

Rechnungslauf August14 Belege

Erledigt1

Onboarding Kunde FalkZugänge versendetfertig

Verschiebbar (Drag & Drop oder Strg+Pfeile)

Offen2

Angebot ACME erstellendringend

Lagerbestand prüfen

In Arbeit1

Rechnungslauf August

Erledigt0

Eigenschaften

Prop	Typ	Default	Builder-Label
columns *	array	—	Spalten
cards *	array	—	Karten
draggable	boolean	false	Karten verschiebbar (Drag & Drop + Strg+Pfeile)

* Pflicht-Prop

Events & Slots

Events: ⚡ navigate⚡ move — im Surface per on: {<event>: {action, params}} verdrahtbar.

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--kanban-column-background`	`var(--color-surface-sunken)`
`--kanban-card-background`	`var(--color-surface-default)`
`--kanban-border`	`var(--color-border-subtle)`

Genutzte Design-Tokens

border.emphasisborder.hairlinecolor.action.primarycolor.border.strongcolor.border.subtlecolor.status.dangercolor.status.infocolor.status.successcolor.status.warningcolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.mutedcontainer.smelevation.overlayelevation.raisedfont.family.defaultradius.fullradius.mdradius.surfacesize.1size.10size.2size.3size.4text.smtext.xsweight.semibold

LLM-Notizen

component.kanban

Spalten-Board mit Karten (Titel, Beschreibung, Badge, Zugewiesene, Link). columns = [{key, title, tone?}], cards = [{column, title, id?, description?, badge?, badgeTone?, people?, href?}].

Wann nutzen

Status-Boards (Aufträge, Tickets, Aufgaben). Für sortierbare LISTEN ohne Karten-Inhalt component.sortable-list.

Wichtige Props

draggable: Karten per Drag & Drop oder Strg+Pfeile verschieben (auch zwischen Spalten); Zähler aktualisieren sich, Event move {card, from, to, index} — card = id (leer = title). Ohne draggable reines Anzeige-Board.
Karten mit href sind klickbare Links (safe_href); nach einem Drag wird der Klick unterdrückt.
Stellschrauben: --kanban-column-background, --kanban-card-background, --kanban-border.

Beispiel-Node


{
  "definition": "component.kanban",
  "props": {
    "columns": [{"key": "open", "title": "Offen", "tone": "info"}, {"key": "done", "title": "Erledigt", "tone": "success"}],
    "cards": [{"column": "open", "id": "T-1", "title": "Angebot erstellen", "badge": "dringend", "badgeTone": "danger"}],
    "draggable": true
  }
}