Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Datendarstellung

Stacked FAQ accordion

Stacked FAQ accordion: Eine vertikale Liste von Fragen, die sich nacheinander zu einem Antwortfeld erweitern, mit einem Chevron, das sich entsprechend dem offenen Zustand dreht.

Stacked FAQ accordion verwenden

Stacked FAQ accordion verwendet das Vorschauformat „Karte“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

EinstellungTypStandardwertVorschaugrenzen
defaultOpenIndexnumber0Von 0 bis 3; Schrittweite 1
allowMultipleOpenbooleantrueKeine weitere Grenze in den Metadaten.
accentColorcolor#FF6A1FKeine weitere Grenze in den Metadaten.
animationMsnumber220Von 150 bis 500; Schrittweite 10
Für welche Frameworks ist Stacked FAQ accordion verfügbar?

Stacked FAQ accordion ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Stacked FAQ accordion?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion.

Welche Details zur Barrierefreiheit sind in Stacked FAQ accordion erkennbar?

Der React-Quellcode von Stacked FAQ accordion enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-controls, aria-expanded, aria-hidden, aria-labelledby); explizite Rollen (region). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Stacked FAQ accordion reduzierte Bewegung?

Stacked FAQ accordion liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: durationS: prefersReducedMotion ? 0 : animationMs / 1000. Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente FAQ Accordion von Fieldbook aus der Kategorie Datendarstellung.
1956FAQ AccordionDatendarstellungEine vertikale Liste mit Fragenüberschriften, bei der beim Öffnen eines Bereichs die Antwort angezeigt wird und der davor geöffnete Bereich geschlossen wird.
Standbild der UI-Komponente Guide steps accordion von Fieldbook aus der Kategorie Datendarstellung.
1976Guide steps accordionDatendarstellungEin nummeriertes Akkordeon aus Führungsstufen, deren Paneele im zusammengeklappten Zustand montiert bleiben können, so dass ein laufender Timer im Inneren der Stufen beim Schließen und Wiederöffnen weiterzählt.
Standbild der UI-Komponente Height Morph Accordion von Fieldbook aus der Kategorie Datendarstellung.
2364Height Morph AccordionDatendarstellungEine Fragenliste, deren Antworttafeln mithilfe einer Feder auf ihre natürliche Höhe wachsen und schrumpfen und dabei die Reihen darunter verschieben.
Standbild der UI-Komponente Animated metric counter von Fieldbook aus der Kategorie Datendarstellung.
2299Animated metric counterDatendarstellungEine große, bloße Zahl, die in dem Moment, in dem sie ins Bild gescrollt wird, von einem Startwert zu ihrem Ziel hochspringt und leicht über das Ziel hinausschießt, bevor sie sich stabilisiert, mit Tausendertrennzeichen und einem optionalen Suffix.
Standbild der UI-Komponente Before/After Code Diff von Fieldbook aus der Kategorie Datendarstellung.
2113Before/After Code DiffDatendarstellungZwei Codefelder nebeneinander, mit Vorher- und Nachherbeschriftung, mit eingefärbten hinzugefügten und entfernten Linien und einem Hover-Fokus-Effekt.
Standbild der UI-Komponente Billing Ledger Table von Fieldbook aus der Kategorie Datendarstellung.
2304Billing Ledger TableDatendarstellungRechnungsstatus filtern, Beträge sortieren und die sichtbare Summe neu berechnen.