Splitter

Créez des panneaux divisés redimensionnables avec des séparateurs déplaçables.

Import

import { Splitter } from 'asterui'

Exemples

Splitter horizontal basique

Faites glisser le séparateur pour redimensionner les panneaux.

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

Divisez les panneaux verticalement.

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

Tailles contrôlées

Contrôlez les tailles des panneaux de manière programmatique.

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

Panneaux multiples

Divisez en plus de deux panneaux.

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

Avec tailles min/max

Contraignez les tailles des panneaux avec des valeurs min et 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 imbriqués

Combinez des splitters horizontaux et verticaux.

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

Taille de gouttière personnalisée

Ajustez la taille de la gouttière (séparateur).

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

Disposition de style IDE

Disposition complexe similaire à un 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

Panneaux pliables

Les panneaux peuvent être pliés à l'aide des boutons fléchés sur la gouttière.

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

Panneau non redimensionnable

Désactivez le redimensionnement pour des panneaux spécifiques.

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`

Propriété	Description	Type	Défaut
`direction`	Direction du splitter	`'horizontal' \| 'vertical'`	`'horizontal'`
`sizes`	Tailles de panneaux contrôlées en pourcentages	`number[]`	`-`
`defaultSizes`	Tailles de panneaux par défaut en pourcentages (non contrôlées)	`number[]`	`-`
`onSizesChange`	Callback lorsque les tailles changent	`(sizes: number[]) => void`	`-`
`gutterSize`	Taille de la gouttière déplaçable en pixels	`number`	`8`
`minSize`	Taille minimale de panneau par défaut en pixels	`number`	`50`
`className`	Classes CSS supplémentaires	`string`	`-`
`data-testid`	ID de test pour les tests	`string`	-

`Splitter.Panel`

Propriété	Description	Type	Défaut
`children`	Contenu du panneau	`React.ReactNode`	`-`
`defaultSize`	Pourcentage de taille par défaut	`number`	`-`
`size`	Pourcentage de taille contrôlée	`number`	`-`
`minSize`	Taille minimale en pixels	`number`	`-`
`maxSize`	Taille maximale en pixels	`number`	`-`
`collapsible`	Permettre de plier le panneau	`boolean`	`false`
`collapsed`	État plié contrôlé	`boolean`	`-`
`defaultCollapsed`	État plié par défaut	`boolean`	`false`
`onCollapse`	Callback lorsque l’état plié change	`(collapsed: boolean) => void`	`-`
`resizable`	Permettre de redimensionner le panneau	`boolean`	`true`
`className`	Classes CSS supplémentaires	`string`	`-`
`data-testid`	ID de test pour les tests	`string`	-

Accessibilité

La gouttière est accessible au clavier avec les touches fléchées
Les attributs ARIA annoncent les tailles actuelles des panneaux
Les indicateurs de focus sont visibles sur la gouttière
Augmentez gutterSize pour une interaction tactile plus facile