Intro
Accordion lar brukeren vise og skjule innhold i seksjoner ved å klikke på overskriftene.
Eksempler
Retningslinjer
Relatert 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.
Antall Items
Unngå viktig innhold
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.
Innholdsmengde
Hold innholdet kort for å sikre at det lett kan relateres til overskriften. Bryt innholdet opp i flere AccordionItems istedenfor å bruke flere overskrifter i én AccordionItem. Ved mye innhold kan du vurdere å lage en egen side i stedet. Dette gjør det dessuten enklere å finne tilbake til innholdet senere.
Innhold i Accordion.Header
Subkomponenten er kodet med <button />
og vil ikke være et heading-nivå som h2, h3 eller lignende. På grunn av dette må man være forsiktig med å bruke rikt innhold da skjermleser vil ignorere semantikken. Les mer om phrasing content på MDN.
Props
Accordion
variant?
- Type:
"default" | "neutral"
- Default:"default"
headingSize?
- Type:
"large" | "medium" | "small" | "xsmall"
- Default:"small"
size?
- Type:
"large" | "medium" | "small"
- Default:"medium"
indent?
- Type:
boolean
- Default:true
- Description:
children
- Type:
ReactNode
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Accordion.Item
children
- Type:
ReactNode
- Description:
open?
- Type:
boolean
- Description:
defaultOpen?
- Type:
boolean
- Default:false
- Description:
onOpenChange?
- Type:
((open: boolean) => void)
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Accordion.Header
children
- Type:
ReactNode
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLButtonElement>
- Description:
Accordion.Content
children
- Type:
ReactNode
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Tokens
Token | Fallback |
---|---|
--ac-accordion-header-bg | --a-surface-transparent |
--ac-accordion-header-bg-hover | --a-surface-hover |
--ac-accordion-header-text-hover | inherit |
--ac-accordion-header-border | --a-border-divider |
--ac-accordion-item-bg-open | --a-surface-action-subtle |
--ac-accordion-neutral-item-bg-open | --a-surface-neutral-subtle |
--ac-accordion-header-icon-bg-hover | --a-surface-neutral-subtle-hover |