‍

Components

Integrations

Accordion

Das Accordion blendet einen Content-Bereich ein und aus und spart so Platz.

<Accordion>
  <Heading>Zugangsdaten</Heading>
  <Content>
    <Text>
      Die Zugangsdaten für SSH und SFTP findest du in den
      Projekteinstellungen.
    </Text>
  </Content>
</Accordion>

Best Practices

  • Verberge keine essenziellen Inhalte im Accordion. Eingeklappte Inhalte werden standardmäßig nicht direkt wahrgenommen.
  • Nutze eine Heading als Titel, wenn das Accordion einen Abschnitt der Seite bildet. Nur dann erscheint es in der Seitenstruktur, über die Screenreader-Nutzer navigieren.
  • Wähle das Level der Heading passend zur umgebenden Seite, ohne Ebenen zu überspringen. Ohne level ist die Heading eine h3.
  • Fasse mehrere Accordions untereinander in einer AccordionGroup‍ zusammen. Sie wirken dann als kompakter Block.
  • Platziere keine interaktiven Elemente wie Buttons im Titel. Der Titel ist selbst ein Button.
  • Formuliere die Titel klar und prägnant.

Mit Text

Mit einem Text als Titel ist das Accordion keine Überschrift und erscheint in normaler Textschrift. Nutze ihn für ergänzende Inhalte wie weitere Optionen oder Details.

Mit Label

Mit einem Label als Titel ist das Accordion keine Überschrift und erscheint als Label. Nutze es für kompakte Bereiche wie Filter oder Einstellungen.

Default Expanded

Über defaultExpanded ist das Accordion beim Laden der Seite geöffnet.

Die Zugangsdaten für SSH und SFTP findest du in den Projekteinstellungen.

Kombiniere mit …

AccordionGroup

Die AccordionGroup‍ fasst mehrere Accordions zu einem Block mit Trennlinien zusammen.

Badge und AlertBadge

Ein Badge‍ oder AlertBadge‍ im Titel wird Teil des Buttons und damit Teil seines Namens für Screenreader.

Properties

PropertyTypeDescription
defaultExpanded
boolean
Whether the accordion should be initially expanded.
id
string
The key of the accordion inside an `AccordionGroup`, used by its `expandedKeys`. Also set as the DOM id.
variant
default | outline
The visual variant of the accordion. Has no effect. @deprecated Use `AccordionGroup` or a `LayoutCard` to set accordions apart.

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