Resizable

可伸缩组件族：Resizable 单体容器（4 边 + 4 角共 8 个可选把手，拖拽改自身宽/高，支持 min/max、锁比例、网格吸附、缩放/像素比修正、边界限制）与 ResizeGroup/ResizeItem/ResizeHandler 分栏组（水平/垂直多面板，相邻两项联动一增一减、总和守恒，各项 min/max clamp 后重分配）。严格对齐 Semi Design：把手是裸 div（无 role/aria/tabindex/键盘），ResizeHandler 默认渲染 IconHandle。core 沉淀通用拖拽原语 createResizeDrag（单次拖拽生命周期，命令式绑/解全局监听）+ computeGroupResize（分栏联动几何），供 Table 列宽拖拽、SideBar Container 复用。

设计文档

如何引入

import { Resizable, ResizeGroup, ResizeItem, ResizeHandler } from '@chenzy-design/svelte';

单体右边缘调宽

enable={{ right: true }} + minWidth/maxWidth clamp

拖右边缘调宽

拖拽回调

onResizeStart / onChange / onResizeEnd 三阶段回调，实时显示尺寸与状态

拖右下角调整大小

260 × 160

八方向把手

不设 enable 时四边 + 四角八个把手全部启用

八方向把手：拖任意边或角

四角自由缩放

四个角把手，宽高各自 min/max 约束

四角自由缩放

锁比例 / 网格吸附

lockAspectRatio 锁定宽高比；grid 吸附步长

锁比例 (5:3)

网格吸附 24px

吸附到指定尺寸

snap 吸附到指定像素档位，snapGap 控制吸附生效间隙

拖右边缘：宽度吸附到 160 / 260 / 360 三档（距目标 24px 内生效）。当前宽 160

吸附到 160 / 260 / 360

边界约束

boundElement="parent" 限制伸缩框不超出父容器

拖不出虚线父容器

受控尺寸

size 受控：按钮与拖拽经 onChange 双向同步

受控尺寸（按钮或拖拽都可改）

设置缩放值

scale=0.5 修正外层 transform:scale 下的拖拽 delta

scale 0.5

自定义把手

handleNode 自定义某方向把手内容

右边缘自定义抓握条 →

自定义边角样式

handleNode / handleStyle / handleClass 自定义边角 handler

自定义右下角 handler ↘

组合基本使用

ResizeGroup/Item/Handler：defaultSize 多单位（400px / 20% / 0.5 / 1）

400px

20%

比例 0.5

比例 1

垂直分栏

direction="vertical"，拖把手上下面板联动

上 40%

下（拖把手上下联动）

多面板 / 锁定把手

三面板两把手，ResizeHandler disabled 锁定其中一个

A（可拖）

B（右侧把手锁定）

C（左侧把手锁定）

嵌套分栏

水平分栏内嵌垂直分栏，典型 IDE 三区布局

左：导航

右上：编辑区

右下：终端

动态方向

运行时切换 horizontal / vertical

面板 A

面板 B

API 参考

Resizable

Props

属性	说明	类型	默认值
`size`	受控尺寸（数字或 px/vw/vh/% 字符串）	`{ width?: string\|number; height?: string\|number }`	undefined
`defaultSize`	非受控初始尺寸	`Size`	undefined
`enable`	启用哪些把手；false 全禁用	`Partial<Record<Direction, boolean>> \| false`	全 true
`minWidth`	—	`string \| number`	undefined
`minHeight`	—	`string \| number`	undefined
`maxWidth`	—	`string \| number`	undefined
`maxHeight`	—	`string \| number`	undefined
`lockAspectRatio`	锁定宽高比	`boolean \| number`	false
`lockAspectRatioExtraWidth`	锁定比例时宽度额外补偿	`number`	0
`lockAspectRatioExtraHeight`	锁定比例时高度额外补偿	`number`	0
`grid`	吸附网格步长；单数字归一为 [n,n]	`[number, number] \| number`	[1, 1]
`snap`	吸附到指定像素尺寸	`{ x?: number[]; y?: number[] }`	undefined
`snapGap`	吸附生效的最小间隙，0=总吸附到最近目标	`number`	0
`boundElement`	限制伸缩范围的边界元素	`'parent' \| 'window' \| HTMLElement`	undefined
`boundsByDirection`	按方向计算边界（对齐 Semi）	`boolean`	undefined
`scale`	画布缩放系数	`number`	1
`ratio`	像素比修正	`number \| [number, number]`	1
`class`	根节点类名	`string`	undefined
`style`	根节点内联样式	`string`	undefined
`handleWrapperClass`	把手 wrapper 层类名	`string`	undefined
`handleWrapperStyle`	把手 wrapper 层内联样式	`string`	undefined
`handleClass`	各向把手自定义类名	`Partial<Record<Direction, string>>`	undefined
`handleStyle`	各向把手自定义内联样式	`Partial<Record<Direction, string>>`	undefined
`handleNode`	各向把手自定义内容	`Partial<Record<Direction, Snippet>>`	undefined
`onResizeStart`	返回 false 取消本次拖拽	`(e, dir) => void \| boolean`	undefined
`onChange`	拖拽中，载荷顺序对齐 Semi	`(size, event, direction) => void`	undefined
`onResizeEnd`	—	`(size, event, direction) => void`	undefined

ResizeGroup

Props

属性	说明	类型	默认值
`direction`	分栏方向	`'horizontal' \| 'vertical'`	'horizontal'
`class`	—	`string`	undefined
`style`	—	`string`	undefined

ResizeItem

Props

属性	说明	类型	默认值
`defaultSize`	初始尺寸；%/px 或纯数字/数字表示按比例分配剩余空间	`string \| number`	undefined
`min`	最小尺寸（百分比或像素）	`string`	undefined
`max`	最大尺寸（百分比或像素）	`string`	undefined
`class`	—	`string`	undefined
`style`	—	`string`	undefined
`onResizeStart`	—	`(e, dir) => void \| boolean`	undefined
`onChange`	—	`(size, event, direction) => void`	undefined
`onResizeEnd`	—	`(size, event, direction) => void`	undefined

ResizeHandler

Props

属性	说明	类型	默认值
`disabled`	禁用该把手	`boolean`	false
`class`	—	`string`	undefined
`style`	—	`string`	undefined
`children`	自定义把手内容，缺省渲染 IconHandle	`Snippet`	IconHandle