‍

Components

Integrations

AccordionGroup

Die AccordionGroup fasst mehrere Accordions zu einem kompakten Block zusammen.

<AccordionGroup>
  <Accordion>
    <Heading>Rechnungen</Heading>
    <Content>
      <Text>
        Deine Rechnungen der letzten zwölf Monate.
      </Text>
    </Content>
  </Accordion>
  <Accordion>
    <Heading>Verträge</Heading>
    <Content>
      <Text>Alle aktiven und gekündigten Verträge.</Text>
    </Content>
  </Accordion>
  <Accordion>
    <Heading>Zahlungsart</Heading>
    <Content>
      <Text>
        Lastschrift vom Konto mit der Endung 1234.
      </Text>
    </Content>
  </Accordion>
</AccordionGroup>

Best Practices

  • Nutze die AccordionGroup, sobald mehrere Accordions direkt untereinander stehen. Der Abstand des umgebenden Layouts liegt dann nur um den Block herum.
  • Erlaube in der Regel, mehrere Accordions gleichzeitig zu öffnen. So lassen sich Inhalte vergleichen, und der angeklickte Titel springt nicht.

Nur ein Accordion geöffnet

Mit allowsMultipleExpanded={false} schließt das Öffnen eines Accordions alle anderen. Das eignet sich für Inhalte, die nacheinander gelesen werden, wie die Schritte einer Anleitung.

Wähle eine freie Domain und registriere sie.

Ohne Trennlinien

Mit separators={false} entfallen die Trennlinien zwischen den Accordions.

Properties

PropertyTypeDescription
allowsMultipleExpanded
booleandefault: true
Whether several accordions can be expanded at the same time. When false, expanding one accordion collapses the others. Unlike React Aria's `DisclosureGroup`, this defaults to `true`.
children
ReactNode
defaultExpandedKeys
Iterable<Key>
The initial expanded keys in the group (uncontrolled).
expandedKeys
Iterable<Key>
The currently expanded keys in the group (controlled).
separators
booleandefault: true
Whether separators are drawn between the accordions.
wrapWith
ReactElement<unknown, string | JSXElementConstructor<any>>
A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. `null` takes a wrapper a surrounding props context set back off, the way `tunnel: null` does for a tunnel.

Events

PropertyTypeDescription
onExpandedChange
((keys: Set<Key>) => any)
Handler that is called when items are expanded or collapsed.

Accessibility

PropertyTypeDescription
aria-describedby
string
Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-hidden
Booleanish
Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-label
string
Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledby
string
Identifies the element (or elements) that labels the current element. @see aria-describedby.

Auf dieser Seite