Gå til hovedinnhold
KOMPONENTER

Expandable

npmv3.5.13

Expandables er komponenter for å kollapse og ekspandere innhold.

npm install @entur/expand
@import '@entur/expand/dist/styles.css';

Bruk

ExpandablePanel

import { ExpandablePanel } from '@entur/expand';

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

import { Accordion, AccordionItem } from '@entur/expand';

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

ExpandableTextButton

import { ExpandableTextButton } from '@entur/expand';

BaseExpand

import { BaseExpand } from '@entur/expand';

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

import { ExpandArrow } from '@entur/expand';

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

Retningslinjer for bruk

Expandables lar brukerne ekspandere og kollapse innhold på en side. Pil-ikonet brukes til å indikere ekspandere/kollapse handlingen, men hele headeren er klikkbar for samme handling. Komponenten gir oss en måte å presentere en stor mengde informasjon, samtidig som brukerne får bestemme over hvor mye de vil se. Den hjelper oss også med å organisere informasjon for å holde grensesnittet ryddig og oversiktlig, slik at brukerne finner det innholdet de trenger.

Expandables er fin å bruke hvis du har en liten plass til å vise mye innhold, for eksempel på en mobil. Ved å bruke expandables kan man også redusere scrolling på en side.

Varianter

ExpandablePanel

ExpansionPanel bruker man hvis det er behov for å se flere paneler oppe om gangen. En ExpansionPanel kan også inneholde flere nivåer/levels. ExpandablePanel skal i utgangspunktet ikke stå alene, og det bør være minst to ExpandablePanels ved siden av hverandre til en hver tid. Bruk heller ExpandableText om man har et enkeltstående innhold man ønsker å skjule.For å kontrollere åpning og lukking selv, så kan man benytte seg av open og onToggle.

ExpandableText

ExpandableText brukes om man ønsker å skjule et innhold. I motsetning til ExpandablePanel så står den gjerne alene uten andre ‘expand’-komponenter.

Accordion og AccordionItem

Accordion er ett sett av collapsible, hvor man ekspanderer en og en panel om gangen. Om du ønsker å gruppere flere ExpandablePanel-komponenter sammen til en accordion, kan du heller bruke Accordion- og AccordionItem-komponenter:

Komponenter

ExpandablePanel

import { ExpandablePanel } from '@entur/expand';
NavnTypeDefault-verdiBeskrivelse
titleReactNode

Teksten som skal stå i panelet

children?ReactNode

Innholdet som skal vises under panelet

defaultOpen?boolean false

Hvilken tilstand ExpandablePanel skal ha som default

onToggle?(() => void)

Funksjonen som styrer åpningen av ExpandablePanel

contentStyle?CSSProperties

Styling som sendes til innholdet av ExpandablePanel

ExpandableText

import { ExpandableText } from '@entur/expand';
NavnTypeDefault-verdiBeskrivelse
titleReactNode

Teksten som skal “vises”

children?ReactNode

Innholdet som skal vises under linken

defaultOpen?boolean false

Hvilken tilstand ExpandableText skal ha som default (med mindre den er kontrollert)

open?boolean

Prop for om innholdet er åpent. Brukes hvis du vil kontrollere ExpandableText, sammen med onToggle

onToggle?(() => void)

Funksjonen som styrer åpningen av ExpandableText

contentStyle?CSSProperties

Styling som sendes til innholdet av ExpandableText

titleElement?"Heading5" | "Paragraph" | "SubParagraph" "Heading5"

Hvilket typografisk element tittelen er

disableAnimation?boolean

Accordion og AccordionItem

import { Accordion, AccordionItem } from '@entur/expand';
NavnTypeBeskrivelse
children?ReactNode

To eller flere AccordionItem-komponenter

NavnTypeDefault-verdiBeskrivelse
titleReactNode

Teksten som skal stå i panelet

children?ReactNode

Innholdet som skal vises under panelet

defaultOpen?boolean false

Hvilken tilstand AccordionItem skal ha som default

contentStyle?CSSProperties

Styling som sendes til innholdet av AccordionItem

disableAnimation?boolean

ExpandableTextButton

import { ExpandableTextButton } from '@entur/expand';
NavnTypeDefault-verdiBeskrivelse
open?boolean

Prop for om innholdet er åpent

onToggle() => void

Funksjonen som styrer åpningen av ExpandableTextButton

as?string | React.ElementTypeHeading5

Den typografiske komponenten for tittelen

BaseExpand

import { BaseExpand } from '@entur/expand';
NavnTypeBeskrivelse
children?ReactNode

Innholdet som skal være expandable

openboolean

Boolean for om innholdet vises eller ikke

ExpandArrow

import { ExpandArrow } from '@entur/expand';
NavnTypeDefault-verdiBeskrivelse
open?boolean false

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

className?string

Ekstra klassenavn

Rediger denne siden på Bitbucket