Accordion

Kildekode på GitHub · Les som Markdown

Accordion (trekkspill) lar brukeren utvide og lukke seksjoner med innhold. Nyttig for FAQ-er, prop-dokumentasjon, og andre tilfeller der mye innhold skal være tilgjengelig uten å ta opp plass. Bygget på Radix UI Accordion.

Importering

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@kilden/designsystem";

Grunnleggende bruk

Bruk type="single" med collapsible for å la brukeren åpne én seksjon om gangen, med mulighet til å lukke den igjen.

<Accordion type="single" collapsible>
<AccordionItem value="item-1">
  <AccordionTrigger>Hva er et designsystem?</AccordionTrigger>
  <AccordionContent>
    Et designsystem er en samling av gjenbrukbare komponenter,
    retningslinjer og designtokens som sikrer konsistens på tvers
    av produkter.
  </AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
  <AccordionTrigger>Hvorfor bruke Radix UI?</AccordionTrigger>
  <AccordionContent>
    Radix UI gir tilgjengelige, ustylt primitiver som lar deg
    bygge komponentbiblioteker med full kontroll over utseendet.
  </AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
  <AccordionTrigger>Støttes tastaturnavigasjon?</AccordionTrigger>
  <AccordionContent>
    Ja! Du kan bruke piltaster for å navigere mellom seksjoner,
    og Enter/Space for å åpne og lukke dem.
  </AccordionContent>
</AccordionItem>
</Accordion>

Flere åpne samtidig

Med type="multiple" kan flere seksjoner være åpne samtidig.

<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
<AccordionItem value="item-1">
  <AccordionTrigger>Seksjon 1 (åpen)</AccordionTrigger>
  <AccordionContent>
    Denne seksjonen er åpen som standard.
  </AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
  <AccordionTrigger>Seksjon 2 (åpen)</AccordionTrigger>
  <AccordionContent>
    Denne er også åpen. Begge kan lukkes uavhengig.
  </AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
  <AccordionTrigger>Seksjon 3 (lukket)</AccordionTrigger>
  <AccordionContent>
    Denne starter lukket, men kan åpnes uten at de andre lukkes.
  </AccordionContent>
</AccordionItem>
</Accordion>

Forhåndsåpnet seksjon

Bruk defaultValue for å styre hvilken seksjon som er åpen ved oppstart.

<Accordion type="single" collapsible defaultValue="item-2">
<AccordionItem value="item-1">
  <AccordionTrigger>Første seksjon</AccordionTrigger>
  <AccordionContent>Innhold i første seksjon.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
  <AccordionTrigger>Andre seksjon (forhåndsåpnet)</AccordionTrigger>
  <AccordionContent>
    Denne seksjonen er åpen når siden lastes.
  </AccordionContent>
</AccordionItem>
</Accordion>

Bruksanbefalinger

Bruk for valgfritt innhold

Accordion er perfekt for FAQ-er, tilleggsdetaljer og annet innhold brukeren kanskje vil se, men ikke trenger å se.

Ikke skjul viktig innhold

Ikke legg kritisk informasjon brukeren trenger i en lukket accordion. Innhold som er nødvendig for å fullføre en oppgave bør alltid være synlig.

Tilgjengelighet

Hvert element har role="region" med aria-labelledby koblet til triggeren
Piltaster navigerer mellom seksjoner
Enter eller Space åpner/lukker en seksjon
Chevron-ikon roterer for å vise åpen/lukket tilstand

Props

Accordion (rot)

Prop	Type	Default	Beskrivelse
`type`	`"single" \| "multiple"`	—	Om én eller flere seksjoner kan være åpne samtidig
`collapsible`	`boolean`	`false`	Om den åpne seksjonen kan lukkes (kun `type="single"`)
`defaultValue`	`string \| string[]`	—	Seksjon(er) som er åpne ved oppstart
`value`	`string \| string[]`	—	Kontrollert åpne seksjon(er)

AccordionItem

Prop	Type	Default	Beskrivelse
`value`	`string`	—	Unik identifikator for elementet

AccordionTrigger

Arver alle props fra <button>.

AccordionContent

Arver alle props fra <div>. Innholdet animeres med en glidende overgang.

Ofte stilte spørsmål

Viktige vilkår