Theme: ← Übersicht Tokens

Akkordeon

Auf-/zuklappbare Einträge (items-Array) — Grundlage für FAQ; toggle als semantisches Event

Components v1.0.1 Inhalt WebsiteAppDesktop component.accordion

Nutzt: ui.icon

Beispiele

Drei Einträge, erster offen (klickbar)

Publizierte Surfaces sind unveränderlich; Migrationen heben alte Instanzen auf neue Major-Versionen.

Ja — über die Katalog-Verwaltung (Scaffold) oder die Bauanleitung im Dateisystem.

Die Laufzeit rendert Fallbacks, der Publish blockiert — strenge Gates, tolerante Auslieferung.

Mehrfach offen erlaubt

Kann gleichzeitig mit B offen sein.

Kein Akkordeon-Zwang.

Eigenschaften

PropTypDefaultBuilder-Label
items *array—Einträge
openFirstbooleanfalseErsten Eintrag geöffnet starten
singlebooleantrueNur einer offen (Akkordeon-Modus)

* Pflicht-Prop

Events & Slots

Events: ⚡ toggle — 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.

TokenDefault
--accordion-border-defaultvar(--color-border-default)
--accordion-border-subtlevar(--color-border-subtle)
--accordion-focus-ring-colorvar(--focus-ring-color)
--accordion-focus-ring-offsetvar(--focus-ring-offset)
--accordion-focus-ring-widthvar(--focus-ring-width)
--accordion-radius-surfacevar(--radius-surface)
--accordion-surface-defaultvar(--color-surface-default)
--accordion-surface-sunkenvar(--color-surface-sunken)
--accordion-text-defaultvar(--color-text-default)
--accordion-text-mutedvar(--color-text-muted)

Genutzte Design-Tokens

border.hairlinecolor.border.defaultcolor.border.subtlecolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.mutedduration.baseduration.fasteasing.standardfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultleading.baseradius.surfacesize.3size.4text.mdtext.smweight.medium