Splitter

Crie painéis redimensionáveis divididos com divisores arrastáveis.

Importação

import { Splitter } from 'asterui'

Exemplos

Splitter Horizontal Básico

Arraste o divisor para redimensionar os painéis.

Left Panel

Drag the divider to resize.

Right Panel

Content on the right side.

import { Splitter } from 'asterui'

function App() {
  return (
      <div className="h-64 border border-base-300 rounded-lg overflow-hidden">
        <Splitter>
          <Splitter.Panel>
            <div className="p-4 bg-base-200 h-full">
              <h3 className="font-semibold">Left Panel</h3>
              <p className="text-sm text-base-content/70 mt-2">Drag the divider to resize.</p>
            </div>
          </Splitter.Panel>
          <Splitter.Panel>
            <div className="p-4 h-full">
              <h3 className="font-semibold">Right Panel</h3>
              <p className="text-sm text-base-content/70 mt-2">Content on the right side.</p>
            </div>
          </Splitter.Panel>
        </Splitter>
      </div>
    )
}

export default App

Splitter Vertical

Divide painéis verticalmente.

Top Panel

Bottom Panel

import { Splitter } from 'asterui'

function App() {
  return (
      <div className="h-64 border border-base-300 rounded-lg overflow-hidden">
        <Splitter direction="vertical">
          <Splitter.Panel>
            <div className="p-4 bg-base-200 h-full">
              <h3 className="font-semibold">Top Panel</h3>
            </div>
          </Splitter.Panel>
          <Splitter.Panel>
            <div className="p-4 h-full">
              <h3 className="font-semibold">Bottom Panel</h3>
            </div>
          </Splitter.Panel>
        </Splitter>
      </div>
    )
}

export default App

Tamanhos Controlados

Controle tamanhos de painel programaticamente.

30%

70%

import { Splitter, Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [sizes, setSizes] = useState([30, 70]);
  
  return (
      <div>
        <Space className="mb-4">
          <Button size="sm" onClick={() => setSizes([20, 80])}>
            20/80
          </Button>
          <Button size="sm" onClick={() => setSizes([50, 50])}>
            50/50
          </Button>
          <Button size="sm" onClick={() => setSizes([80, 20])}>
            80/20
          </Button>
        </Space>
        <div className="h-48 border border-base-300 rounded-lg overflow-hidden">
          <Splitter sizes={sizes} onSizesChange={setSizes}>
            <Splitter.Panel>
              <div className="p-4 bg-primary/10 h-full">{sizes[0].toFixed(0)}%</div>
            </Splitter.Panel>
            <Splitter.Panel>
              <div className="p-4 bg-secondary/10 h-full">{sizes[1].toFixed(0)}%</div>
            </Splitter.Panel>
          </Splitter>
        </div>
      </div>
    )
}

export default App

Múltiplos Painéis

Divida em mais de dois painéis.

Panel 1

Panel 2

Panel 3

import { Splitter } from 'asterui'

function App() {
  return (
      <div className="h-48 border border-base-300 rounded-lg overflow-hidden">
        <Splitter defaultSizes={[25, 50, 25]}>
          <Splitter.Panel>
            <div className="p-4 bg-primary/10 h-full">Panel 1</div>
          </Splitter.Panel>
          <Splitter.Panel>
            <div className="p-4 bg-secondary/10 h-full">Panel 2</div>
          </Splitter.Panel>
          <Splitter.Panel>
            <div className="p-4 bg-accent/10 h-full">Panel 3</div>
          </Splitter.Panel>
        </Splitter>
      </div>
    )
}

export default App

Com Tamanhos Min/Max

Restrinja tamanhos de painel com valores min e max.

Min: 100px, Max: 300px

Min: 150px

import { Splitter } from 'asterui'

function App() {
  return (
      <div className="h-48 border border-base-300 rounded-lg overflow-hidden">
        <Splitter>
          <Splitter.Panel minSize={100} maxSize={300}>
            <div className="p-4 bg-warning/10 h-full">
              <p className="text-sm">Min: 100px, Max: 300px</p>
            </div>
          </Splitter.Panel>
          <Splitter.Panel minSize={150}>
            <div className="p-4 bg-info/10 h-full">
              <p className="text-sm">Min: 150px</p>
            </div>
          </Splitter.Panel>
        </Splitter>
      </div>
    )
}

export default App

Splitters Aninhados

Combine splitters horizontais e verticais.

Sidebar

Main Content

Terminal

import { Splitter } from 'asterui'

function App() {
  return (
      <div className="h-72 border border-base-300 rounded-lg overflow-hidden">
        <Splitter defaultSizes={[30, 70]}>
          <Splitter.Panel>
            <div className="p-4 bg-base-200 h-full">
              <h3 className="font-semibold">Sidebar</h3>
            </div>
          </Splitter.Panel>
          <Splitter.Panel>
            <Splitter direction="vertical" defaultSizes={[60, 40]}>
              <Splitter.Panel>
                <div className="p-4 h-full">
                  <h3 className="font-semibold">Main Content</h3>
                </div>
              </Splitter.Panel>
              <Splitter.Panel>
                <div className="p-4 bg-base-200 h-full">
                  <h3 className="font-semibold">Terminal</h3>
                </div>
              </Splitter.Panel>
            </Splitter>
          </Splitter.Panel>
        </Splitter>
      </div>
    )
}

export default App

Tamanho de Gutter Personalizado

Ajuste o tamanho do gutter (divisor).

Wide gutter (12px)

Easier to grab

import { Splitter } from 'asterui'

function App() {
  return (
      <div className="h-48 border border-base-300 rounded-lg overflow-hidden">
        <Splitter gutterSize={12}>
          <Splitter.Panel>
            <div className="p-4 bg-success/10 h-full">Wide gutter (12px)</div>
          </Splitter.Panel>
          <Splitter.Panel>
            <div className="p-4 bg-error/10 h-full">Easier to grab</div>
          </Splitter.Panel>
        </Splitter>
      </div>
    )
}

export default App

Layout Estilo IDE

Layout complexo similar a uma IDE.

Explorer

import React from 'react'

$ npm run build

import { Splitter, Menu } from 'asterui'

function App() {
  return (
      <div className="h-80 border border-base-300 rounded-lg overflow-hidden">
        <Splitter defaultSizes={[20, 80]}>
          <Splitter.Panel minSize={150}>
            <div className="h-full bg-base-200">
              <div className="p-2 border-b border-base-300 font-semibold text-sm">Explorer</div>
              <Menu>
                <Menu.Item>src/</Menu.Item>
                <Menu.Item>components/</Menu.Item>
                <Menu.Item>App.tsx</Menu.Item>
                <Menu.Item>index.ts</Menu.Item>
              </Menu>
            </div>
          </Splitter.Panel>
          <Splitter.Panel>
            <Splitter direction="vertical" defaultSizes={[70, 30]}>
              <Splitter.Panel>
                <div className="h-full p-4">
                  <div className="font-mono text-sm">
                    <span className="text-purple-500">import</span> React{' '}
                    <span className="text-purple-500">from</span>{' '}
                    <span className="text-green-500">'react'</span>
                  </div>
                </div>
              </Splitter.Panel>
              <Splitter.Panel>
                <div className="h-full bg-base-300 p-2">
                  <div className="text-xs font-mono text-base-content/70">$ npm run build</div>
                </div>
              </Splitter.Panel>
            </Splitter>
          </Splitter.Panel>
        </Splitter>
      </div>
    )
}

export default App

Painéis Recolhíveis

Painéis podem ser recolhidos usando botões de seta no gutter.

Sidebar

Click the arrow to collapse.

Main Content

This panel expands when the sidebar collapses.

import { Splitter } from 'asterui'

function App() {
  return (
      <div className="h-64 border border-base-300 rounded-lg overflow-hidden">
        <Splitter defaultSizes={[25, 75]}>
          <Splitter.Panel collapsible minSize={100}>
            <div className="p-4 bg-base-200 h-full">
              <h3 className="font-semibold">Sidebar</h3>
              <p className="text-sm text-base-content/70 mt-2">
                Click the arrow to collapse.
              </p>
            </div>
          </Splitter.Panel>
          <Splitter.Panel>
            <div className="p-4 h-full">
              <h3 className="font-semibold">Main Content</h3>
              <p className="text-sm text-base-content/70 mt-2">
                This panel expands when the sidebar collapses.
              </p>
            </div>
          </Splitter.Panel>
        </Splitter>
      </div>
    )
}

export default App

Painel Não Redimensionável

Desabilite redimensionamento para painéis específicos.

Fixed width (30%)

Cannot resize - divider is disabled.

import { Splitter } from 'asterui'

function App() {
  return (
      <div className="h-48 border border-base-300 rounded-lg overflow-hidden">
        <Splitter>
          <Splitter.Panel resizable={false} defaultSize={30}>
            <div className="p-4 bg-base-200 h-full">
              <p className="text-sm">Fixed width (30%)</p>
            </div>
          </Splitter.Panel>
          <Splitter.Panel>
            <div className="p-4 h-full">
              <p className="text-sm">Cannot resize - divider is disabled.</p>
            </div>
          </Splitter.Panel>
        </Splitter>
      </div>
    )
}

export default App

API

`Splitter`

Propriedade	Descrição	Tipo	Padrão
`direction`	Direção do splitter	`'horizontal' \| 'vertical'`	`'horizontal'`
`sizes`	Tamanhos de painel controlados como porcentagens	`number[]`	`-`
`defaultSizes`	Tamanhos de painel padrão como porcentagens (não controlado)	`number[]`	`-`
`onSizesChange`	Callback quando tamanhos mudam	`(sizes: number[]) => void`	`-`
`gutterSize`	Tamanho do gutter arrastável em pixels	`number`	`8`
`minSize`	Tamanho mínimo padrão do painel em pixels	`number`	`50`
`className`	Classes CSS adicionais	`string`	`-`
`data-testid`	ID de teste para testes	`string`	-

`Splitter.Panel`

Propriedade	Descrição	Tipo	Padrão
`children`	Conteúdo do painel	`React.ReactNode`	`-`
`defaultSize`	Porcentagem de tamanho padrão	`number`	`-`
`size`	Porcentagem de tamanho controlado	`number`	`-`
`minSize`	Tamanho mínimo em pixels	`number`	`-`
`maxSize`	Tamanho máximo em pixels	`number`	`-`
`collapsible`	Permitir que o painel seja recolhido	`boolean`	`false`
`collapsed`	Estado recolhido controlado	`boolean`	`-`
`defaultCollapsed`	Estado recolhido padrão	`boolean`	`false`
`onCollapse`	Callback quando o estado recolhido muda	`(collapsed: boolean) => void`	`-`
`resizable`	Permitir que o painel seja redimensionado	`boolean`	`true`
`className`	Classes CSS adicionais	`string`	`-`
`data-testid`	ID de teste para testes	`string`	-

Acessibilidade

Gutter é acessível por teclado com teclas de seta
Atributos ARIA anunciam tamanhos atuais dos painéis
Indicadores de foco visíveis no gutter
Aumente gutterSize para interação de toque mais fácil