Resizable

Resizable 用于构建可拖拽调整尺寸的面板组。组件基于 react-resizable-panels 封装，导出 ResizablePanelGroup、ResizablePanel 和 ResizableHandle，适合编辑器、控制台、详情页和左右/上下分栏布局。

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup
} from '@skyroc/web-ui';

何时使用

需要用户手动调整左右或上下区域的空间比例。
构建 IDE、日志面板、数据看板、侧边栏和主内容区等分栏界面。
需要支持嵌套分栏，组合出更复杂的布局。
只需要静态栅格布局时使用 CSS Grid 或 Layout 组件；需要折叠导航时使用 Collapsible。

横向分栏

设置 direction="horizontal" 后，面板按左右方向排列。ResizableHandle 放在两个 ResizablePanel 之间，作为可拖拽分隔线。

Preview

Code

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={50}>Left</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>Right</ResizablePanel>
</ResizablePanelGroup>

纵向分栏

设置 direction="vertical" 后，面板按上下方向排列。Handle 会根据面板方向自动切换为横向分隔线。

Preview

Code

<ResizablePanelGroup direction="vertical">
  <ResizablePanel defaultSize={50}>Top</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>Bottom</ResizablePanel>
</ResizablePanelGroup>

嵌套布局

ResizablePanel 内可以继续嵌套新的 ResizablePanelGroup，用于构建多区域布局。Handle 支持 withHandle 和自定义图标。

Preview

Code

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={50}>One</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>
    <ResizablePanelGroup direction="vertical">...</ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>

尺寸

通过 size 调整面板组文字尺寸和 handle 图标容器尺寸。ResizablePanelGroup 与 ResizableHandle 分别接收 size，需要统一视觉时同时传入。

Preview

Code

尺寸	组内字号	Handle 图标容器	适用场景
`xs`	10px	8px × 10.5px	紧凑面板、表格内嵌
`sm`	12px	10px × 13px	小型工具面板
`md`	14px	12px × 16px	常规场景（默认）
`lg`	16px	14px × 18px	重点布局区域
`xl`	18px	16px × 21px	大号编辑面板
`2xl`	20px	18px × 24px	大幅展示布局

API

ResizablePanelGroup

面板组容器，负责定义分栏方向和管理子面板布局。

属性	说明	类型	默认值
direction*	面板排列方向	'horizontal' \| 'vertical'	-
children	ResizablePanel 与 ResizableHandle 组合内容	ReactNode	-
autoSaveId	布局持久化 id，传入后底层库会保存面板尺寸	string	-
onLayout	面板尺寸变化后触发，参数是每个面板的百分比尺寸	(sizes: number[]) => void	-
keyboardResizeBy	键盘调整尺寸时每次变化的百分比	number	-
size	尺寸，影响组内字号	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	'md'
className	面板组容器 class	ClassValue	-

ResizablePanel

单个可调整尺寸的面板，直接来自 react-resizable-panels 的 Panel。

属性	说明	类型	默认值
children	面板内容	ReactNode	-
defaultSize	默认尺寸百分比	number	-
minSize	最小尺寸百分比	number	-
maxSize	最大尺寸百分比	number	-
collapsible	是否允许折叠	boolean	-
collapsedSize	折叠后的尺寸百分比	number	-
order	面板顺序，用于动态渲染场景	number	-
id	面板 id，建议在持久化或动态面板中提供	string	-

ResizableHandle

面板之间的拖拽分隔线。

属性	说明	类型	默认值
withHandle	是否显示可视化拖拽手柄	boolean	false
children	自定义手柄图标；未传入时使用 GripVertical	ReactNode	-
disabled	是否禁用拖拽	boolean	-
size	尺寸，影响手柄图标容器大小	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	'md'
className	分隔线 class	ClassValue	-
classNames	手柄图标相关 slot class	ResizableClassNames	-
id	分隔线 id	string	-

类型

ResizablePanelGroupProps

面板组属性。继承 react-resizable-panels 的 Group props，并增加项目尺寸和 className 类型。

字段	类型	说明
direction*	'horizontal' \| 'vertical'	面板排列方向。
children	ReactNode	面板组内容。
autoSaveId	string	布局持久化 id。
onLayout	(sizes: number[]) => void	布局变化回调。
keyboardResizeBy	number	键盘调整尺寸步长。
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	组件尺寸。
className	ClassValue	面板组 class。

ResizableHandleProps

拖拽分隔线属性。继承 react-resizable-panels 的 PanelResizeHandle props，并增加可视化手柄配置。

字段	类型	说明
withHandle	boolean	是否显示可视化拖拽手柄。
children	ReactNode	自定义手柄图标。
disabled	boolean	是否禁用拖拽。
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	组件尺寸。
className	ClassValue	分隔线 class。
classNames	ResizableClassNames	手柄图标 slot class。
id	string	分隔线 id。

ResizableClassNames

ResizableHandle 可覆盖的 slot class。

字段	类型	说明
handleIconRoot	ClassValue	可视化手柄外层容器 class。
handleIcon	ClassValue	可视化手柄图标 class。

ClassValue

CSS 类名类型

string | null | undefined | Record<string, boolean> | ClassValue[]

Resizable

ResizablePanelGroupProps

ResizableHandleProps

ResizableClassNames

ClassValue

On this page