Splitter 分割面板

使用可拖动分隔符创建可调整大小的分割面板。

导入

import { Splitter } from 'asterui'

示例

基础水平分割器

拖动分隔符以调整面板大小。

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

垂直分割器

垂直分割面板。

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

受控尺寸

以编程方式控制面板尺寸。

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

多个面板

分割为两个以上的面板。

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

带最小/最大尺寸

使用 min 和 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

嵌套分割器

组合水平和垂直分割器。

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

自定义分隔符大小

调整分隔符(分隔线)大小。

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

IDE 样式布局

类似于 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

可折叠面板

可以使用分隔符上的箭头按钮折叠面板。

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

不可调整大小的面板

禁用特定面板的调整大小。

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`

属性	描述	类型	默认值
`direction`	分割器的方向	`'horizontal' \| 'vertical'`	`'horizontal'`
`sizes`	受控面板尺寸(百分比)	`number[]`	`-`
`defaultSizes`	默认面板尺寸(百分比)(非受控)	`number[]`	`-`
`onSizesChange`	尺寸更改时的回调	`(sizes: number[]) => void`	`-`
`gutterSize`	可拖动分隔符的大小(像素)	`number`	`8`
`minSize`	默认最小面板尺寸(像素)	`number`	`50`
`className`	额外的 CSS 类	`string`	`-`
`data-testid`	用于测试的测试 ID	`string`	-

`Splitter.Panel`

属性	描述	类型	默认值
`children`	面板内容	`React.ReactNode`	`-`
`defaultSize`	默认尺寸百分比	`number`	`-`
`size`	受控尺寸百分比	`number`	`-`
`minSize`	最小尺寸(像素)	`number`	`-`
`maxSize`	最大尺寸(像素)	`number`	`-`
`collapsible`	允许折叠面板	`boolean`	`false`
`collapsed`	受控折叠状态	`boolean`	`-`
`defaultCollapsed`	默认折叠状态	`boolean`	`false`
`onCollapse`	折叠状态更改时的回调	`(collapsed: boolean) => void`	`-`
`resizable`	允许调整面板大小	`boolean`	`true`
`className`	额外的 CSS 类	`string`	`-`
`data-testid`	用于测试的测试 ID	`string`	-

可访问性

分隔符可通过箭头键访问
ARIA 属性宣布当前面板尺寸
分隔符上的焦点指示器可见
增加 gutterSize 以获得更轻松的触摸交互