Gå til hovedinnhold
Entur logo – designsystemets starside
Kom i GangIdentitetKomponenterTokensUniversell utforming
KOMPONENTER

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

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

Komponenter

Drawer

import { Drawer } from '@entur/modal';
NavnTypeDefault-verdiBeskrivelse
children?ReactNode

Innholdet. Typisk tekst, lenker eller knapper

className?string

Ekstra klassenavn

closeLabel?string 'Lukk skuff'

Tekst som beskriver lukkeknappen for skjermlesere

contrast?boolean false

Om draweren skal vises i mørk variant

onDismiss() => void

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

open?boolean true

Om draweren er åpen eller ikke

titlestring

Tittel på toppen av draweren

style?CSSProperties

Styling som sendes til Drawer

overlay?boolean

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

Rediger denne siden på GitHub