Intro
Accordion er flere seksjoner med interaktive overskrifter som lar brukere åpne eller lukke visningen av innholdet under.
Egnet til å:
- Kompakt oversikt over detaljert innhold
- Innhold for spesielt interesserte
Vurder noe annet:
- Når innholdet er så viktig at det ikke bør skjules
- Forklaring av spørsmål i skjema
- Når du bare trenger en Accordion.Item
Eksempler
Tilgjengelighet
| Kommando | Interaksjon |
| Tab | Flytter fokus til neste element som kan ha fokus |
| ShiftTab | Flytter fokus til forrige element som kan ha fokus |
| Space | Aktiverer knapp |
| Enter | Aktiverer knapp |
Retningslinjer
Rendring av lukket innhold
Accordion gir muligheten til å fjerne eller beholde det skjulte innholdet i dom-en med renderContentWhenClosed. Standard er at innholdet fjernes, men hvis du velger å beholde innholdet så er det viktig å dobbelsjekke at skjermlesere ikke får tilgang til dataen når innholdet er lukket.
Props
Accordion
- children ReactNode
- className? string
- ref? Ref<HTMLDivElement>
- Instances of Accordion.Item
- Accordion extends HTMLDivElement
Accordion.Item
- children ReactNode
- open? boolean
- defaultOpen?boolean
- className? string
- ref? Ref<HTMLDivElement>
- Content in Accordion.Item
Should include one Accordion.Header and one Accordion.Content
- Controlled open-state
Using this removes automatic control of open-state
- Defaults the accordion to open if not controlled
- Accordion.Item extends HTMLDivElement
Accordion.Header
- children ReactNode
- className? string
- ref? Ref<HTMLButtonElement>
- Text inside Accordion.Header
- Accordion.Header extends HTMLButtonElement
Accordion.Content
- children ReactNode
- className? string
- ref? Ref<HTMLDivElement>
- Content inside Accordion.Content
- Accordion.Content extends HTMLDivElement