Drawer
Painel que desliza da borda, sobre o vaul. No celular, o painel de baixo pode ser arrastado para fechar. Esc e o clique no scrim também fecham.
De baixo
Resumo do envelope na tela de assinatura pelo celular.
Da direita
Histórico do envelope no painel do remetente. Use direction no Drawer.
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| direction | "bottom" | "top" | "left" | "right" | "bottom" | Borda de onde o painel entra. Só o de baixo mostra a alça. |
| open / onOpenChange | boolean / (open: boolean) => void | — | Estado controlado. |
| shouldScaleBackground | boolean | false | Encolhe a página atrás. Exige o wrapper do vaul no layout. |
| dismissible | boolean | true | false impede fechar por arraste, Esc ou scrim. |
<Drawer>
<DrawerTrigger asChild><Button>Ver detalhes</Button></DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Contrato de prestação de serviços</DrawerTitle>
<DrawerDescription>ENV-2026-1042</DrawerDescription>
</DrawerHeader>
<DrawerFooter><DrawerClose asChild><Button>Fechar</Button></DrawerClose></DrawerFooter>
</DrawerContent>
</Drawer>