Gå til hovedinnhold
KOMPONENTER

Drawer

npmv1.3.15

Drawer er et panel som glir inn fra siden. Den skal benyttes til å gi tilleggsinformasjon som man trenger der og da, uten å avbryte flyten.

Komponenter

Drawer

NavnTypePåkrevd?Default-verdiBeskrivelse
childrenReactNode

Innholdet. Typisk tekst, lenker eller knapper

classNamestring

Ekstra klassenavn

closeLabelstring Lukk skuff

Tekst som beskriver lukkeknappen for skjermlesere

contrastboolean false

Om draweren skal vises i mørk variant

onDismiss() => void

Callback som kalles når brukeren ønsker å lukke draweren

openboolean true

Om draweren er åpen eller ikke

titlestring

Tittel på toppen av draweren

styleCSSProperties

Styling som sendes til Drawer

overlayboolean false

Legger på et overlay over resten av siden

<Drawer />-komponenten rendrer en "skuff" som sklir inn fra siden. Rent teknisk beholder den sin plass i DOM-treet, slik at tastatur-brukere og skjermlesere finner frem til den.

Første fokuserbare element blir fokusert by default.

Husk på aria-attributtene!
For å gi skjermlesere riktig kontekst, er det viktig at du setter riktig aria-attributter på elementet som trigger visningen av draweren. Husk også å plassere Drawer rett etter knappen som viser den.

Retningslinjer for bruk

Drawer er et panel som glir inn fra siden. Den fungerer som en hjelpeskuff som skal benyttes til å gi tilleggsinformasjon som man trenger der og da, uten å avbryte flyten. Slik at man kan fortsette å jobbe i kontekst på valgte funksjoner, i motsetning til Modal som pauser brukerflyten. Med denne komponenten hjelper du brukerne med å fullføre en oppgave raskere.

Drawer brukes for eksempel til å supplementere informasjon på siden eller i en tabell. Den gir også mulighet til å enkelt skifte mellom ulike typer tilleggsinfo, uten pause mellom. På desktop er den festet på høyre side av skjermen, og på mindre skjermer legger den seg som et lag over hele skjermen.

Drawer brukes ofte til ren informasjonstekst, men enkle handlinger er tillatt. Drawer skal ikke benyttes til å starte en flyt eller en handling over flere steg. Ikke benytt innstillinger, filtrering eller funksjoner for å gjøre endringer i en drawer. Mindre redigerbare handlinger kan foretas i en modal. Den bør heller ikke inneholde navigasjon (tabs, expansion panels eller menyer). For mer komplekse handlinger, vurder å ha det på en egen side.

Eksempel

NavnPublisertKategoriMottaker
Status rapport Vy15.04.2020TransaksjonssstatistikkVy Alle
Status rapport Vy10.03.2020TransaksjonssstatistikkVy Alle
Status rapport Vy02.02.2020TransaksjonssstatistikkVy Alle
Rediger denne siden på Bitbucket