Ravox KitSobreposição
Painel lateral
Diálogo que entra por uma borda da tela: filtros, detalhes de um pedido, carrinho, edição sem sair da lista. Cabeçalho e rodapé fixos, corpo rolável, foco preso e devolvido como no Diálogo.
Ajustes
Lado
Largura (laterais)
Exemplos
Carrinho com total fixo embaixo
Menu pela esquerda
Aviso por cima, largura livre
Instalação
O shadcn cria components/ui/painel-lateral.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/painel-lateral.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| lado | "direita" | "esquerda" | "cima" | "baixo" | "direita" | <PainelLateralConteudo>: a borda por onde o painel entra. |
| largura | "pequena" | "media" | "grande" | string | "media" | Nas laterais: 320, 416 ou 576px, ou um valor CSS ("30rem"). No celular sobra sempre uma faixa do fundo para tocar e fechar. |
| fecharFora / travado / semFechar | boolean | — | Iguais aos do <DialogoConteudo>. |
| aberto / padrao / aoMudar | boolean / boolean / (aberto) => void | — | <PainelLateral>: controlado ou não. |
| Peças | PainelLateralGatilho · Cabecalho · Titulo · Descricao · Corpo · Rodape · Fechar | — | As mesmas do Diálogo, com nome próprio. usePainelLateral() fecha de dentro. |