Accordion.mdx

import { Canvas, Meta, Controls } from '@storybook/blocks'; import * as AccordionStories from './Accordion.stories'; import * as AccordionItemStories from './AccordionItem.stories';

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.

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.

Installasjon

npm install @sb1/ffe-accordion @sb1/ffe-accordion-react

I prosjektets hovedstylingsfil importer stylingen

@import '@sb1/ffe-accordion/less/ffe-accordion';

import { Accordion, AccordionItem } from '@sb1/ffe-accordion';

<Accordion {...args}>
    <AccordionItem heading="Tittel">Skjult innhold</AccordionItem>
    <AccordionItem heading={<span>Enda en tittel</span>}>
        Mer skjult innhold
    </AccordionItem>
    <AccordionItem heading="En siste tittel">Enda mer innhold</AccordionItem>
</Accordion>;

Med subtil bakgrunn

Med ingen bakgrunn

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.