Splitter

Divisor — dois painéis com uma alça entre eles, que a pessoa arrasta ou move pelo teclado para dividir o espaço. Use em telas de trabalho, como um cliente de e-mail, um editor com prévia ou uma ferramenta de consultas.

InstalaçãoCopy Anchor Link

Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no cliente.

import { Splitter, SplitterPanel, SplitterHandle } from "@camaleo/react";

AnatomiaCopy Anchor Link

O valor é o tamanho do primeiro painel, em porcentagem; o segundo fica com o resto. Dê uma altura ao splitter. Os painéis recortam o conteúdo, então coloque uma ScrollArea dentro dos que podem crescer.

ExemplosCopy Anchor Link

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor da marca escolhidos na barra acima. Arraste uma alça, ou aperte Tab até uma ganhar o anel de foco e use as setas.

export function InvoiceTable({ rows, currency }: Props) {
  const total = useMemo(
    () => rows.reduce((sum, r) => sum + r.amount, 0),
    [rows],
  );
  return <Table caption={format(total, currency)} rows={rows} />;
}

$ pnpm test invoice-table
 ✓ renders one row per invoice (12 ms)
 ✓ formats the total in the customer's currency (4 ms)
 ✗ updates the total when the currency changes
   Expected "R$ 1.240,00", received "$1,240.00"
Tests: 1 failed, 2 passed, 3 total

Em contextoCopy Anchor Link

São pedaços inteiros de interface para copiar, no estilo que você escolheu.

import { Table } from "@camaleo/react";

export function InvoiceTable({ rows }: Props) {
  return <Table rows={rows} />;
}

$ pnpm dev
 ▲ Ready on http://localhost:3000
 ✓ Compiled /invoices in 812 ms

Boas práticasCopy Anchor Link

PropsCopy Anchor Link

Styling hooksCopy Anchor Link

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio splitter.

/* uma linha fina no lugar da barra, sem o grip */
.editor [data-slot="splitter"] {
  --cml-splitter-handle-size: 0.375rem;
  --cml-splitter-handle-bg: transparent;
}
.editor [data-slot="splitter-grip"] { display: none; }

AcessibilidadeCopy Anchor Link

• A alça tem role="separator" com aria-valuenow, aria-valuemin (0, já que o Enter pode recolher) e aria-valuemax em porcentagem, e aria-controls apontando para o primeiro painel.
• Dê a cada alça o nome do que ela redimensiona ("Redimensionar barra lateral"); o padrão "Resize panel" é em inglês.
• O Enter recolhe o primeiro painel, mas pouca gente conhece essa tecla. Quando esconder um painel importa, ofereça também um botão com aria-expanded.
• Os painéis não se empilham sozinhos em telas estreitas. No celular, troque para orientation="vertical" ou mostre um painel por vez.

RelacionadosCopy Anchor Link