Accordion

En accordion er et ekspanderbart element. Du bruker det for å kunne skjule informasjon.

Komponenten er klar til testing, men ikke ferdig

Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.

Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.

Send innspill

Eksempler

Single accordion

En single accordion har bare ett item åpent av gangen.

Størrelser

<Stack gap="md">
  <Accordion collapsible type="single" size="small">
    <AccordionItem value="item1">
      <AccordionTrigger>Small</AccordionTrigger>
      <AccordionContent>
        <p>
          Dette er innhold for seksjon1. Du kan legge inn bilder, tekst eller andre elementer.
        </p>
      </AccordionContent>
    </AccordionItem>
  </Accordion>
  <Accordion collapsible type="single" size="medium">
    <AccordionItem value="item1">
      <AccordionTrigger>Medium</AccordionTrigger>
      <AccordionContent>
        <p>
          Dette er innhold for seksjon1. Du kan legge inn bilder, tekst eller andre elementer.
        </p>
      </AccordionContent>
    </AccordionItem>
  </Accordion>
  <Accordion collapsible type="single" size="large">
    <AccordionItem value="item1">
      <AccordionTrigger>Large</AccordionTrigger>
      <AccordionContent>
        <p>
          Dette er innhold for seksjon1. Du kan legge inn bilder, tekst eller andre elementer.
        </p>
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</Stack>

Ett element

En enkel accordion med kun ett element.

<Accordion collapsible type="single">
  <AccordionItem value="item1">
    <AccordionTrigger>Seksjon 1</AccordionTrigger>
    <AccordionContent>
      <p>
        Dette er innhold for seksjon1. Du kan legge inn bilder, tekst eller andre elementer.
      </p>
    </AccordionContent>
  </AccordionItem>
</Accordion>

Flere elementer

Her med flere items i én accordion, med defaultvalue.

<Accordion collapsible type="single" defaultValue="item1">
  <AccordionItem value="item1">
    <AccordionTrigger>Seksjon 1</AccordionTrigger>
    <AccordionContent>
      <p>
        Dette er innhold for seksjon1. Du kan legge inn bilder, tekst eller andre elementer.
      </p>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item2">
    <AccordionTrigger>Seksjon 2</AccordionTrigger>
    <AccordionContent>
      <p>
        Dette er innhold for seksjon 2.
      </p>
    </AccordionContent>
  </AccordionItem>
</Accordion>

Multiple accordion

En multiple accordion kan ha flere items åpne samtidig.

<Accordion collapsible type="multiple">
  <AccordionItem value="item1">
    <AccordionTrigger>Seksjon 1</AccordionTrigger>
    <AccordionContent>
      <p>
        Dette er innhold for seksjon1. Du kan legge inn bilder, tekst eller andre elementer.
      </p>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item2">
    <AccordionTrigger>Seksjon 2</AccordionTrigger>
    <AccordionContent>
      <p>
        Dette er innhold for seksjon 2.
      </p>
    </AccordionContent>
  </AccordionItem>
</Accordion>

Kontrollert accordion

Accordionen er ukontrollert by default. Om du har behov for å styre accordion utifra eksterne states, kan du gjøre slik:

<Accordion
  collapsible
  onValueChange={(e): void => console.log("Current open item:", e)}
  type="single"
  value="replaceWithStateVariable"
>
  <AccordionItem value="item1">
    <AccordionTrigger>Title</AccordionTrigger>
    <AccordionContent>
      <p>Innhold</p>
    </AccordionContent>
  </AccordionItem>
</Accordion>

Retningslinjer

Mer kommer.

Kode

<Accordion />

import { Accordion } from "@aneo-org/design-react/clientComponents";

Rot-komponentet for accordion. Styrer blant annet om collapsible, flere er åpne samtidig og hvilke som er åpne.

Prop	Type	Beskrivelse
collapsible	`boolean`	Om en item kan lukkes igjen etter den er åpnet.
type	`"single" \| "multiple"`	Om flere items kan være åpne samtidig.

<AccordionTrigger />

import { AccordionTrigger } from "@aneo-org/design-react/clientComponents";

Element for å trigge åpning/lukking av elementet.

Prop	Type	Beskrivelse
headingLevel	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	Velg passende heading-nivå for tittelen til accordionen.

<AccordionItem />

import { AccordionItem } from "@aneo-org/design-react/clientComponents";

Komponent for å gruppere et element i accordion.

Prop	Type	Beskrivelse
value	`string`	Unik verdi, e.g. "item1", som brukes av Accordion for å holde styr på hvilket element som er åpent.

<AccordionContent />

import { AccordionContent } from "@aneo-org/design-react/clientComponents";

Komponent for innholdet av accordion.

Prop	Type	Beskrivelse
children	`React.ReactNode`	Innholdet av Accordion.