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
- Når du skal be bruker om å velge mellom ulike valg
Har du innspill til komponenten?
Send forslagEksempler
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
Innhold
Innholdet i Accordion burde høre sammen. Tenk på det som en liste. Hvis du bruker Accordion for å gruppere mye urelatert innhold blir det vanskeligere for brukeren å finne informasjonen de leter etter.
Du må regne med at innholdet du putter i en Accordion blir oversett. Derfor burde innholdet ikke være avgjørende for at en bruker skjønner helheten i informasjonen du vil formidle.
Lengden på innholdet burde tilsvare rundt ett til to avsnitt. Dette er for å unngå at innholdet blir irrelevant til overskriften den tilhører og at AccordionItemet blir lengre enn hensiktsmessig. Bryt innholdet opp i flere AccordionItems istedenfor å bruke flere overskrifter i en AccordionItem.
Props
Accordion
- children ReactNode
- Instances of Accordion.Item
- className? string
- ref? Ref<HTMLDivElement>
- Accordion extends HTMLDivElement
Accordion.Item
- children ReactNode
- Content in Accordion.Item Should include one Accordion.Header and one Accordion.Content
- open? boolean
- Controlled open-state Using this removes automatic control of open-state
- defaultOpen?boolean
- Defaults the accordion to open if not controlled
- className? string
- ref? Ref<HTMLDivElement>
- Accordion.Item extends HTMLDivElement
Accordion.Header
- children ReactNode
- Text inside Accordion.Header
- className? string
- ref? Ref<HTMLButtonElement>
- Accordion.Header extends HTMLButtonElement
Accordion.Content
- children ReactNode
- Content inside Accordion.Content
- className? string
- ref? Ref<HTMLDivElement>
- Accordion.Content extends HTMLDivElement
Tokens
| Token | Fallback |
| --ac-accordion-header-border | --a-border-strong |
| --ac-accordion-header-text-hover | --a-text-action-on-action-subtle |
| --ac-accordion-header-border-hover | --a-border-strong |
| --ac-accordion-item-bg-open | --a-surface-action-subtle |
| --ac-accordion-item-border-open | --a-surface-action-subtle |
| --ac-accordion-content-border | --a-border-strong |
| --ac-accordion-content-border-open | --a-border-strong |