Accordion
Ein Accordion ist eine vertikal gestapelte Liste von Elementen mit Ein- bzw. Ausblendfunktionalität. Durch Tippen oder Klicken auf das Pfeil-Icon öffnet sich das Accordion.
Verwendung
- Accordions bieten sich an, um eine gute Übersicht über viel Inhalt zu erhalten.
- Die Gestaltung innerhalb des geöffneten Accordions ist frei und kann aus verschiedenen Komponenten erstellt werden.
Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
isOpen | boolean | false | Open or Close the Accordion |
label | string | undefined | Headline text |
size | "small" | "large" | undefined | size of the accordion headline |
id | string | undefined | id of the element |
style | string | "" | Additional css styles |
Beispiele
Accordion default (large)
Einsatz nur für Desktop
Ich bin ein Accordion
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?
Accordion small
Einsatz vorwiegend in Mobile oder bei mehrspaltigen Layouts
Ich bin ein small Accordion
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?
Accordion large
Einsatz nur für Desktop
Ich bin ein large Accordion
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?
Multi Accordion example
Accordion 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?
Accordion 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?
Accordion 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?
Accordion 4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis,
rem at voluptates vero reprehenderit tempore?