Sortierbare Liste
Liste mit Gruppen, deren Einträge per Ziehen oder Tastatur (Pfeile mit Strg) umsortiert und zwischen Gruppen verschoben werden — meldet jede Umsortierung
Beispiele
Kanban: ziehen oder mit Strg+Pfeiltasten verschieben (auch zwischen Spalten)
Offen2
- Angebot #2231 prüfen
- Lieferant kontaktieren
In Arbeit1
- Auftrag #4711 kommissionieren
Fertig2
- Rechnung #9080 versendet
- Retoure #77 gebucht
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| groups * | array | — | Gruppen |
| columns | boolean | true | Gruppen nebeneinander (Kanban) |
* Pflicht-Prop
Events & Slots
Events:
⚡ reorder — im Surface per on: {<event>: {action, params}} verdrahtbar.
Genutzte Design-Tokens
border.hairlinecolor.action.primarycolor.border.defaultcolor.border.strongcolor.status.dangercolor.status.successcolor.status.warningcolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.disabledcolor.text.mutedelevation.controlfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultradius.controlradius.fullradius.surfacesize.1size.12size.2size.3text.smtext.xsweight.semibold
LLM-Notizen
component.sortable-list
Kanban-artige Listen: Einträge lassen sich ziehen ODER per Tastatur verschieben (Strg+↑/↓ innerhalb, Strg+←/→ zwischen Gruppen).
Wann nutzen
- Aufgaben-Boards, Priorisierung, Zuordnung. Für unveränderliche Listen:
ui.itemin einem Layout.
Wichtige Props
groups* =[{title, tone?: neutral|primary|success|warning|danger, items: [{label, meta?}]}]columns: Gruppen nebeneinander (Kanban) statt untereinander.
Hinweise
- Emittiert
reordermit dem VOLLSTÄNDIGEN neuen Stand ({groups: [{title, items: [...]}]}) — der Empfänger muss nichts nachrechnen. - Zählwerte in den Gruppen-Köpfen aktualisieren sich selbst.