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

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[]`	—	必需。工作区面板。
`sizes`	`readonly number[]`	—	受控的面板比例，总和会归一化为 100。
`defaultSizes`	`readonly number[]`	—	初始的面板比例。
`onResize`	`(sizes: number[]) => void`	—	大小改变时调用。
`onResizeEnd`	`(sizes: number[]) => void`	—	调整结束时调用。
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	左右或上下排列面板。

类型与交互

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

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

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

#Splitter 分割面板

#基础用法

#上下布局

#SplitterPanel

#Splitter API

#类型与交互

Splitter 分割面板

基础用法

上下布局

SplitterPanel

Splitter API

类型与交互