Laufband (Ticker)
Durchlaufende Daten-Zeile (Kurse, Kennzahlen, Meldungen) mit Wert und Veränderungs-Ton — pausiert bei Hover; mit [data-motion=reduce] am Konsumenten statische scrollbare Zeile
Nutzt: ui.icon
Beispiele
Kennzahlen-Laufband
Umsatz heute12.450 €3,20Offene Tickets172,00Lagerwert1,2 Mio €Neukunden81,00
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| items * | array | — | Einträge |
| speed | number | 30 | Umlaufdauer (Sekunden) |
* Pflicht-Prop
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 |
|---|---|
--ticker-background | var(--color-surface-sunken) |
Genutzte Design-Tokens
border.hairlinecolor.border.subtlecolor.status.dangercolor.status.successcolor.surface.sunkencolor.text.defaultcolor.text.mutedfont.family.defaultradius.controlsize.1size.2size.4text.smtext.xsweight.semibold
LLM-Notizen
component.ticker
Durchlaufende Daten-Zeile (Kurse, Kennzahlen, Meldungen): items = [{label, value?, delta?}] — delta färbt grün/rot mit Trend-Pfeil. Pausiert bei Hover; prefers-reduced-motion zeigt eine scrollbare statische Zeile. Für Logo-Laufbänder auf Marketing-Seiten section.marquee.
Beispiel-Node
{
"definition": "component.ticker",
"props": { "items": [{"label": "Umsatz", "value": "12.450 €", "delta": 3.2}], "speed": 25 }
}