Ravox KitSuperfícies

Redimensionável

Painéis lado a lado ou empilhados com um divisor que arrasta, anda pelas setas do teclado e recolhe com Enter. Cada painel tem mínimo e máximo, e os tamanhos podem voltar iguais na próxima visita.

Pastas

  • Entrada
  • Pedidos
  • Suporte
  • Arquivadas

Pedido #4821

Marina Rocha comprou o acesso anual

Pix de R$ 297,00 confirmado às 14:32. O acesso já foi liberado e o recibo saiu por e-mail.

Ajustes

Direção

Exemplos

Editor e terminal, com aoMudar

export default function Pagina() {
  return <Landing />;
}

pronto compilado em 412 ms

aoMudar: arraste o divisor

Um dentro do outro

Camadas

Tela

Propriedades

Instalação

O shadcn cria components/ui/redimensionavel.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.

npx shadcn@latest add https://ui.ravoxlabs.com/r/redimensionavel.json

Opções

OpçãoTipoPadrãoO que faz
direcao"horizontal" | "vertical""horizontal"Painéis lado a lado ou um em cima do outro (Redimensionavel).
chavestring—Guarda os tamanhos no localStorage e volta com eles depois (Redimensionavel).
aoMudar(tamanhos: number[]) => void—Ao soltar o divisor ou mudar pelo teclado, com os tamanhos em % na ordem (Redimensionavel).
padraonumber—Tamanho inicial em %. Sem ele, divide o que sobrar com os outros (RedimensionavelPainel).
minimo / maximonumber10 / 100Limites em % (RedimensionavelPainel).
alcabooleanfalseMostra a alça no meio do fio, para quem não sabe que dá para arrastar (RedimensionavelDivisor).
rotulostring"Redimensionar painéis"Nome do divisor para leitores de tela (RedimensionavelDivisor).