Drawer

npm install @entur/modal

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

Varianter

Drawer

<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.

Retningslinjer

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.

Props

Drawer

import { Drawer } from '@entur/modal';

Denne komponenten har ingen props