Design

CollapsibleSection

@/components/ui/CollapsibleSection

Skjuler en gruppe rader bak en klikkbar overskrift. Åpen/lukket-tilstand huskes per bruker via localStorage.

Når brukes den

  • Bruk for å skjule en gruppe rader som ikke er hovedinnholdet på siden, f.eks. «Eldre kontroller» eller et arkiv nederst i en liste.

  • Brukes KUN for å LESE mer om noe som allerede vises — ikke for handlinger eller skjema (regel/modal-gjore-accordion-lese), det er Modal/Popover.

  • Gi hver seksjon en unik storageKey, ellers deler to ulike seksjoner samme huskede tilstand.

Eksempler

Lukket ved default

defaultOpen={false} for innhold som sjelden trengs — f.eks. et arkiv nederst på siden.

Ventilasjon, kjeller
Sist kontrollert 04.11.2023
OK
Lekeplass
Sist kontrollert 04.11.2023
OK
<CollapsibleSection title="Eldre kontroller" storageKey="hms-eldre-kontroller" badge={rader.length}>
  {rader.map(r => <ListRow key={r.id} title={r.navn} />)}
</CollapsibleSection>

Åpen med tallmerke

defaultOpen={true} (default) for innhold som ofte er relevant, men fortsatt kan skjules unna.

Brannslange skiftet
12.03.2024
Røykvarsler kontrollert
12.03.2024
Rømningsvei befart
04.11.2023

Props

Sveip tabellen for å se hele innholdet

Navn
Type
Default
Beskrivelse
title *
string
Overskriften på den klikkbare raden.
storageKey *
string
Unik nøkkel for åpen/lukket-tilstanden i localStorage.
defaultOpen
boolean
true
Startverdi før noe er lagret for storageKey.
badge
string | number
Tallmerke etter tittelen, f.eks. antall skjulte rader.
children *
ReactNode
Innholdet som vises/skjules.

Regler

regel/modal-gjore-accordion-lese

Beslektede komponenter