Gå til hovedinnhold
KOMPONENTER

Expandable

Expandables er komponenter for å kollapse og ekspandere innhold.

Komponenter

ExpandablePanel

NavnTypePåkrevd?Default-verdiBeskrivelse
titleReactNode

Teksten som skal stå i panelet

childrenReactNode

Innholdet som skal vises under panelet

defaultOpenboolean false

Hvilken tilstand ExpandablePanel skal ha som default

onToggle(() => void)

Funksjonen som styrer åpningen av ExpandablePanel

contentStyleCSSProperties

Styling som sendes til innholdet av ExpandablePanel

ExpandablePanel kan brukes om man har noe innhold man vil skjule initielt, men som skal kunne åpnes og lukkes ved klikk. ExpandablePanel skal i utgangspunktet ikke stå alene, dvs, det burde være minst to ExpandablePanel ved siden av hverandre til ei hver tid. ExpandableText skal heller brukes om man har et enkeltstående innhold man ønsker å skjule.

Om man har lyst til å kontrollere åpningen og lukkingen selv, så kan man benytte seg av open og onToggle.

Her er et eksempel:

ExpandableText

ExpandableText brukes om man ønsker å skjule et innhold, og i motsetning til ExpandablePanel, så står den gjerne alene uten andre "Expand"-komponenter.

Accordion og AccordionItem

NavnTypePåkrevd?Beskrivelse
childrenReactNode

To eller flere AccordionItem-komponenter

NavnTypePåkrevd?Default-verdiBeskrivelse
titleReactNode

Teksten som skal stå i panelet

childrenReactNode

Innholdet som skal vises under panelet

defaultOpenboolean false

Hvilken tilstand AccordionItem skal ha som default

contentStyleCSSProperties

Styling som sendes til innholdet av AccordionItem

Om du ønsker å gruppere flere ExpandablePanel-komponenter sammen til en accordion, kan du heller bruke Accordion- og AccordionItem-komponenter:

ExpandableTextButton

NavnTypePåkrevd?Beskrivelse
openboolean

Prop for om innholdet er åpent

onToggle() => void

Funksjonen som styrer åpningen av ExpandableTextButton

BaseExpand

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Innholdet som skal være expandable

openboolean

Boolean for om innholdet vises eller ikke

ExpandablePanel, AccordionItem (og andre komponenter i designsystemet) benytter seg av <BaseExpand>, så om man har behov for å benytte seg av åpne/lukkemekanismen direkte, kan man benytte seg av denne.

ExpandArrow

NavnTypePåkrevd?Default-verdiBeskrivelse
openboolean false

Om innholdet er åpent eller ikke, som bestemmer retningen på pila

classNamestring

Ekstra klassenavn

Hvis man bruker BaseExpand, så kan man bruke ExpandArrow samtidig for å få den roterende pila som brukes i alle expandable-komponenter i designsystemet.