Pattern · Lumina
Sheet vs Drawer
Os dois saem de um lado da tela. A diferença é o gesto: Sheet é clicado pra fechar, Drawer é arrastado. Sheet pra desktop, Drawer pra mobile.
Lado a lado
Sheet
Entra por qualquer lado. Fechar com ESC, X ou clique fora. Sem gesture.
Drawer
Sobe do fundo (mobile-first). Handle no topo, arrasta pra fechar.
Quando usar Sheet
- Desktop ou tablet horizontal.
- Formulários longos que precisam de espaço lateral.
- Configurações que afetam a tela visível por trás.
TSX
Quando usar Drawer
- Mobile (especialmente vertical).
- Ações secundárias que valem ter dismiss gestual.
- Confirmações leves, picker de opções, filtros.
TSX
Decisão rápida
| Critério | Sheet | Drawer |
|---|---|---|
| Plataforma | desktop / tablet | mobile |
| Fecha por | ESC, X, clique fora | gesto + clique fora |
| Origem | top / right / bottom / left | bottom (sempre) |
| Underlying | Radix Dialog | Vaul |