Drawer

Painel deslizante ancorado a qualquer borda do viewport, construído sobre o Radix UI Dialog com acessibilidade completa.

Demonstração

Props

Prop	Tipo	Padrão	Descrição
`side`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'right'`	Lado do viewport de onde o drawer desliza.
`open`	`boolean`	`—`	Estado aberto controlado.
`onOpenChange`	`(open: boolean) => void`	`—`	Callback quando o estado aberto muda.

Uso

import {
  Drawer, DrawerContent, DrawerHeader,
  DrawerTitle, DrawerDescription,
  DrawerFooter, DrawerClose
} from '@ghiberti85/ui'

const [open, setOpen] = useState(false)

<Drawer open={open} onOpenChange={setOpen}>
  <DrawerContent side="right">
    <DrawerHeader>
      <DrawerTitle>Title</DrawerTitle>
      <DrawerDescription>Description</DrawerDescription>
    </DrawerHeader>
    <div>Body content</div>
    <DrawerFooter>
      <DrawerClose asChild>
        <Button variant="secondary">Close</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Ver no Storybook

Abrir no Storybook →

←Stepper DataTable→