mittwald Flow Logo

Components

Accordion

Das Accordion dient dazu Content-Bereiche ein- und auszublenden und so Informationen strukturiert und platzsparend darzustellen.GitHub

Playground

Verwende <Accordion />, um ein Accordion darzustellen. Nutze als Titel entweder eine <Heading /> oder ein <Label />.

import {
  Accordion,
  Content,
  Heading,
} from "@mittwald/flow-react-components";

<Accordion>
  <Heading>Accordion Titel</Heading>
  <Content>Inhalt des Accordions</Content>
</Accordion>

DefaultExpanded

defaultExpanded wird verwendet, um ein oder mehrere Accordion-Elemente beim Laden der Seite standardmäßig geöffnet darzustellen.

Inhalt des Accordions
import {
  Accordion,
  Content,
  Heading,
} from "@mittwald/flow-react-components";

<Accordion defaultExpanded>
  <Heading>Accordion Titel</Heading>
  <Content>Inhalt des Accordions</Content>
</Accordion>

Outline Variant

Verwende eine outline Variante, wenn das Accordion klar vom umgebenden Inhalt abgehoben oder inhaltlich stärker strukturiert werden soll.

import {
  Accordion,
  Content,
  Heading,
} from "@mittwald/flow-react-components";

<Accordion variant="outline">
  <Heading>Accordion Titel</Heading>
  <Content>Inhalt des Accordions</Content>
</Accordion>

Mit Label

Statt einer Heading kann auch ein Label verwendet werden. Ein Label eignet sich, wenn der Inhalt ergänzend oder sekundär ist und nicht im Fokus der Seite steht – zum Beispiel bei Filtern, Formularfeldern oder optionalen Einstellungen.

import {
  Accordion,
  Content,
  Label,
} from "@mittwald/flow-react-components";

<Accordion>
  <Label>Accordion Titel</Label>
  <Content>Inhalt des Accordions</Content>
</Accordion>

Overview