Drawer

En skuff viser elementer i front, mens andre elementer skjules i backdrop. Skuffen kommer inn fra høyre side av skjermen.

Figma Endringslogg

Komponenten er klar til testing, men ikke ferdig

Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.

Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.

Send innspill

Eksempler

Enkel drawer

Skuffen trenger ikke state for å kunne åpnes eller lukkes. Det er viktig å inkludere tittel, så innholdet blir beskrevet for skjermlesere.

<Drawer>
  <DrawerTrigger asChild>
    <Button
      variant="primary"
    >
      Åpne
    </Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader closeAriaLabel="Lukk" title="Her er tittel" />
    Her er noe innhold.
  </DrawerContent>
</Drawer>

Kontrollert drawer

Du kan også lukke skuffen via state, for eksempel ved en lukk- eller submit-knapp.

function ControlledDrawer() {
  const [open, setOpen] = React.useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    setOpen(false);
  };
  
  const handleClose = (event) => {
    event.preventDefault();
    setOpen(false);
  };

  return (
    <Drawer open={open} onOpenChange={setOpen}>
      <DrawerTrigger asChild>
        <Button variant="primary">Åpne</button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader closeAriaLabel="Lukk" title="Her er tittel" />
        <form onSubmit={handleSubmit}>
          <Stack gap={16} flexDirection="row" justifyContent="flex-end">
            <Button 
              variant="ghost" 
              type="button" 
              onClick={handleClose}>
              Lukk
            </Button>
            <Button variant="primary" type="submit">Åpne</button>
          </Stack>
        </form>
      </DrawerContent>
    </Drawer>
  );
}

Forskjellige bredder

Bredden på skuffen kan styres ved hjelp av size-propen på <DrawerContent />

<Stack gap="md" flexDirection="row">
  <Drawer>
    <DrawerTrigger asChild>
      <Button
        variant="primary"
      >
        Åpne Narrow
      </Button>
    </DrawerTrigger>
    <DrawerContent size="narrow">
      <DrawerHeader closeAriaLabel="Lukk" title="Narrow Drawer" />
      Her er noe innhold.
    </DrawerContent>
  </Drawer>
  <Drawer>
    <DrawerTrigger asChild>
      <Button
        variant="primary"
      >
        Åpne Default
      </Button>
    </DrawerTrigger>
    <DrawerContent size="default">
      <DrawerHeader closeAriaLabel="Lukk" title="Default Drawer" />
      Her er noe innhold.
    </DrawerContent>
  </Drawer>
  <Drawer>
    <DrawerTrigger asChild>
      <Button
        variant="primary"
      >
        Åpne Wide
      </Button>
    </DrawerTrigger>
    <DrawerContent size="wide">
      <DrawerHeader closeAriaLabel="Lukk" title="Default Wide" />
      Her er noe innhold.
    </DrawerContent>
  </Drawer>
</Stack>

Retningslinjer

Du bruker skuffen om du trenger å vise noe i kontekst av den eksisterende handlingen. Innad en skuff skal det ikke åpnes flere dialoger. Et alternativ til en skuff er å heller navigere brukeren til en ny side.

Kode

<Drawer />

import { Drawer } from "@aneo-org/design-react/clientComponents";

Rot-komponenten for Drawer.

Prop	Type	Beskrivelse
open?	`boolean`	For kontrollert tilstand. Brukes sammen med onOpenChange.
onOpenChange?	`(open: boolean) => void`	Event-handler for når open-staten endres.

<DrawerTrigger />

import { DrawerTrigger } from "@aneo-org/design-react/clientComponents";

Trigger for å åpne skuffen.

Prop	Type	Beskrivelse
asChild?	`boolean`	Endre default element til hva enn child element er.

<DrawerContent />

import { DrawerContent } from "@aneo-org/design-react/clientComponents";

Innhold i skuffen. Implementerer også lukkeknapp og tittel hvis du bruker title-propen.

Prop	Type	Beskrivelse
size	`"narrow" \| "default" \| "wide"`	Bredden på draweren. Blir skalert opp til 100% av skjermbredde på mobil.

<DrawerHeader />

import { DrawerHeader } from "@aneo-org/design-react/clientComponents";

Drawer-header som inneholder lukke-knapp og som du må legge til tittel.

Prop	Type	Beskrivelse
closeAriaLabel	`string`	Aria label for lukke-ikonet.