Indicator

提供可拖动的尺寸调整手柄，支持鼠标与键盘操作，可用于面板和内容区域的大小调整。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于组件公开的指示或拖动调节能力。业务页面先使用已经内置该能力的 Sidebar、SidePanel 或表格列，不复制它们的拖动逻辑。

target 默认是直接父元素，也可显式关联其他元素；minSize / maxSize 限制尺寸范围。
applySize 控制是否直接应用尺寸，onSizeChange 提供更新值；键盘步长使用 step / largeStep。

导入

import { Indicator } from '@snowui-design-system/components';

用法

高度

边缘

圆角

命中区域

受控尺寸

独立目标

尺寸变化事件

禁用状态

API 参考

属性	类型	默认值	示例	描述
`axis`	`IndicatorAxis`	line 为 `"width"`；corner 为 `"both"`	`axis={value}`	调整宿主宽度、高度或同时调整；`both` 只用于 corner
`edge`	`IndicatorEdge`	`根据 axis 推导`	`edge={value}`	拖动方向与默认定位边缘
`appearance`	`IndicatorAppearance`	`"line"`	`appearance={value}`	线形或右下角图标视觉
`hitAreaPadding`	`number \| string`	`—`	`hitAreaPadding="Example"`	兼容旧输入，已不再收窄命中带；line 始终覆盖所在整条边
`target`	`HTMLElement`	`直接父元素`	`target={target}`	resize target；可显式关联页面中的任意元素，不要求 Indicator 是其 DOM 后代
`revealTarget`	`HTMLElement`	`target`	`revealTarget={revealTarget}`	控制显隐的 hover 宿主
`value`	`number`	`实测 target 尺寸`	`value={42}`	当前受控尺寸基线，并同步为 ARIA 当前值
`minSize`	`number`	`0`	`minSize={42}`	当前调整轴允许的最小尺寸，单位 px。
`maxSize`	`number`	`Infinity`	`maxSize={42}`	当前调整轴允许的最大尺寸，单位 px。
`minWidth`	`number`	`—`	`minWidth={42}`	width / both 的宽度下限，优先于 minSize。
`maxWidth`	`number`	`—`	`maxWidth={42}`	width / both 的宽度上限，优先于 maxSize。
`minHeight`	`number`	`—`	`minHeight={42}`	height / both 的高度下限，优先于 minSize。
`maxHeight`	`number`	`—`	`maxHeight={42}`	height / both 的高度上限，优先于 maxSize。
`step`	`number`	`8`	`step={42}`	方向键每次调整的像素数。
`largeStep`	`number`	`32`	`largeStep={42}`	按住 Shift 时方向键每次调整的像素数。
`applySize`	`boolean`	`true`	`applySize`	是否直接写入 target 的 width / height
`disabled`	`boolean`	`false`	`disabled`	禁止 Pointer 和键盘调整
`ariaLabel`	`string`	`LocaleProvider`	`ariaLabel="Example"`	无障碍名称；默认随 axis 和 LocaleProvider 切换，英文为 Resize width / Resize height / Resize width and height
`onResizeStart`	`(value: number, axis: "width" \| "height") => void`	`—`	`onResizeStart={(value) => { /* handle value */ }}`	开始调整回调
`onSizeChange`	`(value: number, axis: "width" \| "height") => void`	`—`	`onSizeChange={(value) => { /* handle value */ }}`	尺寸变化回调
`onResizeEnd`	`(value: number, axis: "width" \| "height") => void`	`—`	`onResizeEnd={(value) => { /* handle value */ }}`	结束调整回调