SplitPane 分割面板

布局组件

可拖拽分割线的双栏/多栏布局容器。

何时使用

需要分割面板功能时使用本组件。

tsx

import { SplitPane } from "@/components/ui/split-pane"

export function Basic() {
return <SplitPane />
}

Prop	Type	Default	说明
`className`	`string`	—	自定义样式类名
`direction`	`"horizontal" \| "vertical"`	`horizontal`	排列方向
`defaultSize`	`number`	`50`
`minSize`	`number`	`20`
`maxSize`	`number`	`80`
`onResize`	`() => void`	—
`first`	`React.ReactNode`	—
`second`	`React.ReactNode`	—
`resizer`	`boolean`	`true`
...rest	`React.HTMLAttributes`	—	透传原生 DOM 属性

📘 完整交互式示例与控件属性请查看 Storybook 文档。