Vox Mente
Navegação

Componentes

Resizable

beta

Painéis com divisa arrastável, para o usuário decidir quanto espaço cada lado merece. Lista à esquerda, detalhe à direita.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/resizable

Playground
Lista de alunos
Detalhe do aluno
<ResizablePanelGroup>
  <ResizablePanel defaultSize="35">Lista de alunos</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="65">Detalhe do aluno</ResizablePanel>
</ResizablePanelGroup>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
ResizablePanelGroup
  └─ ResizablePanel
  └─ ResizableHandle
  └─ ResizablePanel

Uso

Divide uma área em painéis que o próprio usuário redimensiona arrastando o divisor. Bom para lista à esquerda, detalhe à direita.
Ana Beatriz
Bruno Carvalho
Carla Dias

Ana Beatriz

6º ano A · trilha de leitura · 8 sessões concluídas

Orientação

`orientation` aceita `horizontal` (padrão) ou `vertical`. Nenhum dos dois é obrigatório — sem a prop, os painéis ficam lado a lado.
Turmas da coordenação
6º ano A · 6º ano B · 6º ano C

Limites de tamanho

`minSize` e `maxSize` evitam que um painel feche demais ou tome a tela toda. Nenhum dos dois tem valor padrão — sem eles, o painel aceita qualquer tamanho.
Lista de alunos
Detalhe do aluno

Sem alça visível

`withHandle` é opcional. Sem ele, o divisor ainda funciona, só não mostra a alça central — use quando a interface já deixa óbvio que dá para arrastar.
Painel esquerdo
Painel direito

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

ResizableHandle

PropTipoPadrão
withHandleboolean—

Também aceita as props de React e outras, incluindo className e os atributos de DOM.

ResizablePanel, ResizablePanelGroup não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css