Resize Handle Props

名称	类型	默认值	说明
direction	'horizontal' | 'vertical'	'horizontal'	horizontal 改宽度，vertical 改高度。横向分隔条的 aria-orientation 是 vertical。
position	'inline' | 'overlay'	'inline'	inline 占一格，overlay 贴在父级边缘。
isReversed	boolean	false	面板在结束边时，把拖拽方向反过来。
isDisabled	boolean	false	关掉指针和键盘调整。
hasDivider	boolean	false	画出 1px 分隔线。线本身就是把手。
isAlwaysVisible	boolean	true	静止时也显示握把。
pillPlacement	'auto' | 'start' | 'end' | 'center'	'auto'	握把相对分隔线的位置。auto 靠面板一侧，面板收到 0 时翻到另一侧。
label	string	当前语言	无障碍名称。英文默认是 “Resize handle”，中文默认是 “拖拽分隔条”。
resizable	ResizableProps	-	useResizable 返回的 props。

插槽

名称	说明
default	替换握把。分隔条角色和键盘行为仍留在把手上。

useResizable

从 @astryx-vue/core 引入。单个区域返回 { size, isCollapsed, collapse, expand, resize, props }。传入 regions 时，每个键各返回一份。

名称	类型	默认值	说明
defaultSize	number | string | ResizablePercentSize	250	初始尺寸。数字是像素。有吸附点时，初值会落到最近的点上。
minSize	number | string | ResizablePercentSize	50	展开时的最小尺寸。
maxSize	number | string | ResizablePercentSize	Infinity	最大尺寸。
collapsible	boolean	false	允许收到 0。
collapsedSize	number	40	拖拽低于这个像素值时收起。
snaps	number[]	-	尺寸只会停在这些像素点上。离两个点一样远时，留在更靠前的那个。
shrinkOrder	number	-	多个区域共用 containerRef 时的收缩顺序。容器比这些区域更窄时，数字更小的先收到 minSize。拖拽仍然改的是该区域自己的目标尺寸。
direction	'horizontal' | 'vertical'	'horizontal'	百分比尺寸读取容器的哪一条轴。
containerRef	Ref<HTMLElement | null>	-	用来解析百分比的元素。还没量到时按 1200 计算，并且不写入存储。
autoSaveId	string	-	把 { size, isCollapsed } 存在 astryx-resizable: 加这个 id。多个区域会再接 :key。
defaultIsCollapsed	boolean	false	collapsible 为 true 时，一开始就收起。
isCollapsed	boolean	-	受控的收起状态。变化通过 onCollapseChange 报出。
onSizeChange	(size: number) => void	-	尺寸落下之后调用。
onCollapseChange	(isCollapsed: boolean) => void	-	收起状态变化时调用。
regions	Record<string, ResizableRegionConfig>	-	一次管多个区域。每一项接受上面的尺寸字段。

percent(value, { min }) 或 percent(value, { max }) 用来写百分比尺寸。min 和 max 的形状是 { type: 'pixel', value }。

方向键移动 10px，按住 Shift 移动 50px。有吸附点时改为跳到相邻吸附点，Shift 跳两个。Home、End、Enter 分别跳到最小值、配置过的最大值和折叠前的尺寸。没写最大值时 End 不动。

原生属性

ResizeHandle 渲染 <div role="separator">。

以下内容落到这个元素上：

• HTML 属性。
• aria-* 属性。
• data-* 属性。
• class。
• style。

class 会合并。