Hopp til innhold

Accordion

Bruk av accordion

Accordion brukes der du har mye informasjon som du ønsker å gjøre tilgjengelig for brukere, uten at alt er visuelt synlig samtidig. En accordion er bygget opp av en «header» og et «panel», og i SpareBank 1 er hele «headeren» klikkbar.

Accordion

En accordion er bygget opp av to komponenter: Accordion og AccordionItem. Accordion-komponenten legges rundt alle AccordionItem's, for å gruppere og sette samme overskriftsnivå på alle.

AccordionItem

AccordionItem er hver enkel «header»- og «panel»-seksjon. De er lukket by default, men du kan velge at den skal være åpen fra start ved å sende med property defaultOpen.

Alle <AccordionItem />-komponenter har innebygget funksjonalitet for å styre åpning og lukking. Men om ønskelig kan du også overstyre dette. Et bruksområde kan være å lage en komponent som kun kan ha ett element åpent om gangen.

Bruker man isOpen-propen vil intern-logikk som styrer åpning og lukking være skrudd av.