Resizable
resizable拖拽分栏 · 复合 PanelGroup/Panel/Handle + 横竖向 + min/max + 键盘微调(零依赖·role=separator)
用法
横向两栏
direction=horizontal，拖动竖直手柄此消彼长，min 约束最小宽度。
资源管理器
- src/
- app/
- page.tsx
- layout.tsx
- components/
- nav.tsx
- card.tsx
- lib/
- utils.ts
- package.json
- tsconfig.json
components/card.tsx
1export function Card({ title, children }) {2 return (3 <section className="rounded-lg border p-4">4 <h3 className="font-semibold">{title}</h3>5 <div className="mt-2 text-sm">{children}</div>6 </section>7 );8}
tsx
<ResizablePanelGroup direction="horizontal" defaultSizes={[35, 65]}>
<ResizablePanel min={20}><FileTree /></ResizablePanel>
<ResizableHandle />
<ResizablePanel><Editor /></ResizablePanel>
</ResizablePanelGroup>纵向上下分栏
direction=vertical，手柄变水平，上下面板拖动调高。
会话
- 客户 · 王女士：发货了吗？
- 客服 · 小琏：已安排今日发出 📦
- 客户 · 王女士：好的，谢谢！
[12:01:08] INFO 会话已接入 agent#7
[12:01:24] INFO 推送物流单号 SF1024…
[12:01:31] WARN 客户满意度问卷未填
[12:01:40] INFO 会话标记为已解决
tsx
<ResizablePanelGroup direction="vertical" defaultSizes={[55, 45]}>
<ResizablePanel min={20}><ChatLog /></ResizablePanel>
<ResizableHandle />
<ResizablePanel min={20}><LogPanel /></ResizablePanel>
</ResizablePanelGroup>三栏编辑器布局
多面板 + 多手柄；defaultSizes 给初始比例，键盘 ←/→ 也可微调。
资源管理器
- src/
- app/
- page.tsx
- layout.tsx
- components/
- nav.tsx
- card.tsx
- lib/
- utils.ts
- package.json
- tsconfig.json
components/card.tsx
1export function Card({ title, children }) {2 return (3 <section className="rounded-lg border p-4">4 <h3 className="font-semibold">{title}</h3>5 <div className="mt-2 text-sm">{children}</div>6 </section>7 );8}
实时预览
月度概览
本月新增订单 1,284 笔，环比增长 12%。
tsx
<ResizablePanelGroup direction="horizontal" defaultSizes={[24, 46, 30]}>
<ResizablePanel min={15}><FileTree /></ResizablePanel>
<ResizableHandle />
<ResizablePanel min={25}><Editor /></ResizablePanel>
<ResizableHandle />
<ResizablePanel min={18}><Preview /></ResizablePanel>
</ResizablePanelGroup>何时用
要让用户拖动手柄实时改变相邻面板尺寸（IDE 三栏、聊天列表+详情等）时用。它是用户可交互调宽的分栏；若只是按容器宽度自动重排布局用 Viewport，整页固定骨架用 Layout。
导入
ts
import { ResizablePanelGroup, ResizablePanel, ResizableHandle, applyResize, splitEqually } from "@hulianui/ui"Props
ResizablePanelGroup
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| direction | "horizontal" | "vertical" | "horizontal" | horizontal=面板横排(分隔符竖直)；vertical=面板竖排(分隔符水平)。 |
| sizes | number[] | — | 受控尺寸（百分比数组，一项一面板），须配 onSizesChange。 |
| defaultSizes | number[] | 均分 | 非受控初始尺寸；缺省按面板数均分。 |
继承 HTMLAttributes<HTMLDivElement>（除 onChange）。
ResizablePanel
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| min | number | 10 | 最小尺寸百分比下限。 |
| max | number | 100 | 最大尺寸百分比上限。 |
继承 HTMLAttributes<HTMLDivElement>。
ResizableHandle
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| keyboardStep | number | 5 | 键盘方向键每次微调的百分点（role=separator，可聚焦键控）。 |
继承 HTMLAttributes<HTMLDivElement>（除 aria-orientation）。
工具函数
splitEqually(n)— 生成 n 个面板均分的尺寸数组。applyResize(...)— 受控模式下据拖拽增量计算新尺寸数组（含 min/max 钳制）。
Events
ResizablePanelGroup
| 事件 | 类型 | 说明 |
|---|---|---|
| onSizesChange | (sizes: number[]) => void | 尺寸变化回调。 |
Slots
ResizablePanelGroup
| 插槽 | 类型 | 说明 |
|---|---|---|
| children* | ReactNode | Panel 与 Handle 交替排列。 |
禁忌 / 坑
- Panel 与 Handle 必须交替排列：每两个
ResizablePanel之间放一个ResizableHandle，组件按手柄两侧定位相邻面板做尺寸再分配；漏放或多放会错位。 - 受控时尺寸数组长度须等于面板数：
sizes/defaultSizes是百分比数组，一项对应一面板；用splitEqually(n)起步、applyResize算增量更稳。 - 受控模式记得在
onSizesChange回写sizes，否则拖不动。
相关
Layout · AdminLayout · ScrollArea · Viewport · AspectRatio · FitScreen
Playground
资源管理器
- src/
- app/
- page.tsx
- layout.tsx
- components/
- nav.tsx
- card.tsx
- lib/
- utils.ts
- package.json
- tsconfig.json
components/card.tsx
1export function Card({ title, children }) {2 return (3 <section className="rounded-lg border p-4">4 <h3 className="font-semibold">{title}</h3>5 <div className="mt-2 text-sm">{children}</div>6 </section>7 );8}
<ResizablePanelGroup direction="horizontal" defaultSizes={[40, 60]}>
<ResizablePanel min={20}><FileTree /></ResizablePanel>
<ResizableHandle />
<ResizablePanel><Editor /></ResizablePanel>
</ResizablePanelGroup>