Gå til hovedinnhold
KOMPONENTER

Drawer

Drawer lar deg vise frem funksjonalitet når du trenger det fra kanten av siden.

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

<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

Denne drawer-komponenten skal i hovedsak kun brukes til å gi mer informasjon - litt som et mer avansert tooltip. Et eksempel kan være å vise flere detaljer om et valgt produkt, reise eller lignende. Du kan lenke til mer funksjonalitet om ønskelig.

Man skal aldri plassere tekstfelt, radioknapper og lignende i drawers. Lenk heller til egne views for å endre dette - eller tilby disse kontrollene kontekstuelt.