Ravox KitSobreposição
Gaveta
A folha que sobe de baixo no celular: alça, arrastar para fechar (um peteleco rápido também conta) e paradas opcionais de altura. No computador fica centralizada embaixo. Por baixo é o mesmo <dialog> do Diálogo.
Ajustes
Exemplos
Conversa com paradas (meia tela e tela cheia)
Ações rápidas de um pedido
Controlada, aberta por outra ação
Instalação
O shadcn cria components/ui/gaveta.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/gaveta.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| pontos | number[] | — | <GavetaConteudo>: paradas em fração da altura da tela (ex.: [0.5, 0.92]). Sem pontos, a altura é a do conteúdo. |
| pontoInicial | number | 0 | Índice da parada em que a gaveta abre. |
| aoMudarPonto | (indice: number) => void | — | Avisa quando a gaveta para em outro ponto. |
| semFechar | boolean | false | Esconde o X do canto (alça, Esc e toque no fundo continuam fechando). |
| aberto / padrao / aoMudar | boolean / boolean / (aberto) => void | — | <Gaveta>: controlado ou não. |
| data-sem-arrastar | atributo | — | Em qualquer elemento: o arraste não começa nele. O corpo, campos e botões já ficam fora do arraste. |
| Peças | GavetaGatilho · Cabecalho · Titulo · Descricao · Corpo · Rodape · Fechar | — | As mesmas do Diálogo. Com pontos, a alça vira botão: Enter alterna e as setas sobem e descem de parada. |