定价

Indicator 使用手册

v1.4.0 · @snowui-design-system/components

许可阅读：首次阅读组件文档、源码或 npm 使用流程，先读完整 LICENSE；同任务同版本去重。公开 API 配置与内部实现修改分别按许可处理；全部组件使用统一运行包，源码权益以许可为准。

组件介绍

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

使用选择

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

  • target 默认是直接父元素，也可显式关联其他元素；minSize / maxSize 限制尺寸范围。

  • applySize 控制是否直接应用尺寸，onSizeChange 提供更新值；键盘步长使用 step / largeStep。

快速开始

以下示例展示推荐的基本组合。更多场景与组合限制见后文。

<script lang="ts">	import { Button, Frame, Indicator, Text } from '@snowui-design-system/components';	let width = $state(280);</script> <Frame style="position: relative; box-sizing: border-box; width: 280px; max-width: 100%; min-height: 120px; padding: var(--padding-6); border-radius: var(--radius-4); background: var(--background-1);"><Text>SnowUI documentation preview</Text><Indicator axis="width" minWidth={200} maxWidth={520} onSizeChange={(next) => width = next} ariaLabel="Resize documentation preview" /></Frame>

API

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

未重新声明的继承能力请查所属基础组件文档；本表只列本组件源码具名公开属性。

使用边界与详细说明

API 参考

关键字 类型 默认值 描述
pinOffset number | string var(--padding-1) line 可见短条外缘到宿主物理边缘的距离；hover / focus / dragging 加粗向内生长，间距不变。corner 保持 Pin 角点偏移语义。
enableResponsive boolean false 启用根 Frame 响应式能力；默认关闭以保持手柄几何。
enableContext boolean false 是否向子内容提供 Frame 通用上下文。
enableScaleObserver boolean false 是否启用根 Frame 尺寸观察；默认不新增观察。
enableDefaultMotion boolean true 启用 Frame 默认交互动效；手柄颜色仍复用共享颜色动效。
...rest FrameProps - 透传到根 Frame

视觉状态

  • 颜色与 overlay 滚动条 thumb 一致：默认 Black/10，hover / focus / dragging 为 Black/20。

  • line + width：命中带 = 父级全高 × (pinOffset + 8px)（top/bottom:0）；视觉默认 2px × 16px，hover / focus / dragging 时视觉宽变为 4px；沿边长度可用 --snowui-indicator-visual-length 覆盖。

  • line + height：命中带 = 父级全宽 × (pinOffset + 8px)（left/right:0）；视觉默认 16px × 2px，hover / focus / dragging 时视觉高变为 4px；沿边长度同上变量。

  • line 与 Scrollbar 一致通过实际 width / height 变化而非 transform 缩放，使用 var(--radius-full, 9999px)，端点始终为完整胶囊圆角。

  • corner：使用 1rem 视觉盒，通过 ComponentIcon 复用 rounded-corner；图形与外框比例以 raw-assets/icons/snowui/RoundedCorner.svg 为准。显示时为 Black/10，自身 hover / focus-visible / dragging 时为 Black/20；保留原 path 与 viewBox，按用户确认的指示器特例沿轮廓补描边：常态总笔画 2px，hover / focus / dragging 总笔画 4px，不缩放外框。

  • corner 固定在右下角，仅在角点附近激活；默认 axis="both"，同时调整宽度和高度。

  • corner 默认使用 nwse-resize 对角双箭头；显式设置单轴时使用对应方向光标。

  • 定位：line 自管 absolute 贴边（不用 pin 居中）；corner 默认 as="pin-bottom-right" + pinOffset="var(--padding-1)" + z-index: 6。

  • 默认隐藏；宿主 hover、focus-visible 或 dragging 时显示；与同一 target 内 overlay scrollbar Thumb 重叠时保持显示及 Pointer、键盘命中。

  • 视觉与命中区分层；line 命中带铺满所在边缘全高/全宽。

  • 动效消费与 overlay scrollbar 相同的 Frame color motion bridge。

示例

<Frame style="position: relative; width: 16rem; height: 10rem;">    内容    <Indicator axis="width" /></Frame>
<script lang="ts">  import { Frame, Indicator } from '@snowui-design-system/components';  let panel = $state<HTMLElement>();</script> <Frame bind:element={panel} style="position: relative;">    内容    <Indicator        target={panel}        axis="height"        appearance="corner"        minSize={60}    /></Frame>

Indicator 样式覆盖

先阅读 完整 LICENSE；同任务、同版本、同范围去重。

优先用组件公开 Props 匹配合适样式，尽可能保留原有视觉。确需改写时按 样式选择与改写顺序 使用自己的 class（含项目已有 Tailwind）或实例 style。以下名称来自源码实际消费的公开 override；先核对目标作用域，不修改私有 DOM。采用 SnowUI Token 时选择正确类别，外部应用不被要求安装一方 utilities。

变量 用途与默认参考
--snowui-indicator-active-color-override hover / focus / dragging 颜色（默认 var(--black-20)）
--snowui-indicator-color-override 默认颜色（默认 var(--black-10)）

设计指南 · Token · 组合边界

Indicator 类型与状态

必填属性：无具名必填属性。

可双向绑定：本组件未声明具名双向绑定属性；状态更新通过公开回调或所属宿主处理。

继承声明：Omit<FrameProps, "children">。继承能力以基类公开文档为准；Omit 中的字段已排除，不能按基类原样使用。

共享 Frame API · 返回 API

以下为公开属性实际引用的类型声明，来自源码；Svelte Snippet 表示内容片段，ComponentProps 表示对应组件的 Props。

IndicatorAxis

来源：components/src/components/Indicator.svelte

export type IndicatorAxis = "width" | "height" | "both";

IndicatorEdge

来源：components/src/components/Indicator.svelte

export type IndicatorEdge = "start" | "end" | "top" | "bottom";

IndicatorAppearance

来源：components/src/components/Indicator.svelte

export type IndicatorAppearance = "line" | "corner";