> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/splitter.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# Splitter 分割面板

调整工作区面板的大小。

## 基础用法


导航 — 拖动分隔条或使用方向键调整。

−

工作区

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/splitter/basic.tsx"
import { Splitter } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function SplitterBasic() {
  const [sizes, setSizes] = useState<readonly number[]>([35, 65]);
  return (
    <Splitter
      style={{ height: 220 }}
      sizes={sizes}
      onResize={setSizes}
      panels={[
        {
          key: 'navigation',
          min: 20,
          max: 55,
          collapsible: true,
          children: (
            <div style={{ padding: 16 }}>
              {'导航 — 拖动分隔条或使用方向键调整。'}
            </div>
          ),
        },
        {
          key: 'content',
          min: 30,
          children: <div style={{ padding: 16 }}>{'工作区'}</div>,
        },
      ]}
    />
  );
}
```

展开代码

## 上下布局


编辑器

输出内容

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/splitter/basic.tsx"
import { Splitter } from '@ifhover/leaf-ui';

export function SplitterVertical() {
  return (
    <Splitter
      direction="vertical"
      style={{ height: 240 }}
      defaultSizes={[60, 40]}
      panels={[
        {
          key: 'editor',
          min: 25,
          children: <div style={{ padding: 16 }}>{'编辑器'}</div>,
        },
        {
          key: 'output',
          min: 15,
          children: <div style={{ padding: 16 }}>{'输出内容'}</div>,
        },
      ]}
    />
  );
}
```

展开代码

## SplitterPanel

| 属性            | 类型          | 默认值 | 说明                  |
| ------------- | ----------- | --- | ------------------- |
| `key`         | `string`    | —   | 必需。稳定且唯一的标识。        |
| `children`    | `ReactNode` | —   | 必需。子内容；嵌套数据类型表示子节点。 |
| `min`         | `number`    | —   | 面板最小百分比。            |
| `max`         | `number`    | —   | 面板最大百分比。            |
| `collapsible` | `boolean`   | —   | 允许折叠和恢复面板。          |
| `resizable`   | `boolean`   | —   | 允许拖动和使用方向键调整大小。     |

## Splitter API

| 属性             | 类型                                               | 默认值            | 说明                   |
| -------------- | ------------------------------------------------ | -------------- | -------------------- |
| `panels`       | `readonly `[`SplitterPanel`](#splitterpanel)`[]` | —              | 必需。工作区面板。            |
| `sizes`        | `readonly number[]`                              | —              | 受控的面板比例，总和会归一化为 100。 |
| `defaultSizes` | `readonly number[]`                              | —              | 初始的面板比例。             |
| `onResize`     | `(sizes: number[]) => void`                      | —              | 大小改变时调用。             |
| `onResizeEnd`  | `(sizes: number[]) => void`                      | —              | 调整结束时调用。             |
| `direction`    | `'horizontal' \| 'vertical'`                     | `'horizontal'` | 左右或上下排列面板。           |

## 类型与交互

组装可复用配置时，可导入对应的属性和数据类型。

```ts
import type { SplitterPanel, SplitterProps } from '@ifhover/leaf-ui';
```

为仅展示图标的操作提供可访问名称。交互控件支持键盘操作，并跟随 ConfigProvider 的主题和减少动画设置。