Drawer

() => {
    const [mode, setMode] = React.useState('closed');
    const Wrapper = mode === 'dark' ? Contrast : React.Fragment;
    return (
      <div>
        <ButtonGroup>
          <PrimaryButton
            onClick={() => setMode('light')}
            aria-expanded={mode === 'light'}
          >
            Åpne en lys drawer
          </PrimaryButton>
          <SecondaryButton
            onClick={() => setMode('dark')}
            aria-expanded={mode === 'dark'}
          >
            Åpne en mørk drawer
          </SecondaryButton>
        </ButtonGroup>
        <Drawer
          contrast={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>
          <PrimaryButton type="button" onClick={() => setMode('closed')}>
            Den er grei
          </PrimaryButton>
        </Drawer>
      </div>
    );
  }

Bruk Drawer når

du trenger å gi tilleggsinformasjon der og da, uten å avbryte flyten — brukeren kan fortsette å jobbe i kontekst
du vil supplere informasjon på en side eller i en tabell, eller enkelt bytte mellom ulike typer tilleggsinfo

Unngå Drawer når

du skal starte en flyt eller en handling over flere steg, eller gjøre redigerbare endringer som innstillinger og filtrering, bruk Modal i stedet
innholdet trenger navigasjon (tabs, expansion panels eller menyer) eller er komplekst — vurder heller en egen side

Retningslinjer

På desktop er Drawer 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. Den bør ikke inneholde navigasjon (tabs, expansion panels eller menyer).

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

Eksempler

Lys og mørk drawer
() => {
    const [mode, setMode] = React.useState('closed');
    const Wrapper = mode === 'dark' ? Contrast : React.Fragment;
    return (
      <div>
        <ButtonGroup>
          <PrimaryButton
            onClick={() => setMode('light')}
            aria-expanded={mode === 'light'}
          >
            Åpne en lys drawer
          </PrimaryButton>
          <SecondaryButton
            onClick={() => setMode('dark')}
            aria-expanded={mode === 'dark'}
          >
            Åpne en mørk drawer
          </SecondaryButton>
        </ButtonGroup>
        <Drawer
          contrast={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>
          <PrimaryButton type="button" onClick={() => setMode('closed')}>
            Den er grei
          </PrimaryButton>
        </Drawer>
      </div>
    );
  }

Drawer trigget fra en tabellrad
() => {
    const [mode, setMode] = React.useState('closed');
    return (
      <div>
        <Table>
          <TableHead>
            <TableRow>
              <HeaderCell>Navn</HeaderCell>
              <HeaderCell>Publisert</HeaderCell>
              <HeaderCell>Kategori</HeaderCell>
              <HeaderCell>Mottaker</HeaderCell>
              <HeaderCell padding="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>
              <DataCell padding="overflow-menu">
                <IconButton onClick={() => 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>
              <DataCell padding="overflow-menu">
                <IconButton onClick={() => 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>
              <DataCell padding="overflow-menu">
                <IconButton onClick={() => setMode(true)} aria-label="mer informasjon">
                  <ValidationInfoFilledIcon />
                </IconButton>
              </DataCell>
            </TableRow>
          </TableBody>
        </Table>
        <Drawer
          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>
          <PrimaryButton type="button" onClick={() => setMode('closed')}>
            Den er grei
          </PrimaryButton>
        </Drawer>
      </div>
    );
  }