Drawer er et panel som glir inn fra siden. Den skal benyttes til å gi tilleggsinformasjon som man trenger der og da, uten å avbryte flyten.
()=>{const[mode, setMode]=React.useState('closed');constWrapper= mode ==='dark'?Contrast:React.Fragment;return(<div><ButtonGroup><PrimaryButtononClick={()=>setMode('light')}aria-expanded={mode ==='light'}> Åpne en lys drawer</PrimaryButton><SecondaryButtononClick={()=>setMode('dark')}aria-expanded={mode ==='dark'}> Åpne en mørk drawer</SecondaryButton></ButtonGroup><Drawercontrast={mode ==='dark'}title="Litt mer informasjon"open={mode !=='closed'}onDismiss={()=>setMode('closed')}><Paragraph> 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.</Paragraph><Paragraph> Man skal aldri plassere tekstfelt, radioknapper og lignende i drawers. Lenk heller til egne views for å endre dette - eller tilby disse kontrollene kontekstuelt.</Paragraph><PrimaryButtontype="button"onClick={()=>setMode('closed')}> Den er grei</PrimaryButton></Drawer></div>);}
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.
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
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.
()=>{const[mode, setMode]=React.useState('closed');return(<div><Table><TableHead><TableRow><HeaderCell>Navn</HeaderCell><HeaderCell>Publisert</HeaderCell><HeaderCell>Kategori</HeaderCell><HeaderCell>Mottaker</HeaderCell><HeaderCellpadding="overflow-menu"aria-label="meny-knapper"></HeaderCell></TableRow></TableHead><TableBody><TableRow><DataCell>Status rapport Vy</DataCell><DataCell>15.04.2020</DataCell><DataCell>Transaksjonssstatistikk</DataCell><DataCell>Vy Alle</DataCell><DataCellpadding="overflow-menu"><IconButtononClick={()=>setMode(true)}aria-label="mer informasjon"><ValidationInfoFilledIcon/></IconButton></DataCell></TableRow><TableRow><DataCell>Status rapport Vy</DataCell><DataCell>10.03.2020</DataCell><DataCell>Transaksjonssstatistikk</DataCell><DataCell>Vy Alle</DataCell><DataCellpadding="overflow-menu"><IconButtononClick={()=>setMode(true)}aria-label="mer informasjon"><ValidationInfoFilledIcon/></IconButton></DataCell></TableRow><TableRow><DataCell>Status rapport Vy</DataCell><DataCell>02.02.2020</DataCell><DataCell>Transaksjonssstatistikk</DataCell><DataCell>Vy Alle</DataCell><DataCellpadding="overflow-menu"><IconButtononClick={()=>setMode(true)}aria-label="mer informasjon"><ValidationInfoFilledIcon/></IconButton></DataCell></TableRow></TableBody></Table><Drawertitle="Litt mer informasjon"open={mode !=='closed'}onDismiss={()=>setMode('closed')}><Paragraph> 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.</Paragraph><Paragraph> Man skal aldri plassere tekstfelt, radioknapper og lignende i drawers. Lenk heller til egne views for å endre dette - eller tilby disse kontrollene kontekstuelt.</Paragraph><PrimaryButtontype="button"onClick={()=>setMode('closed')}> Den er grei</PrimaryButton></Drawer></div>);}
