Separator 使用手册

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

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

组件介绍

用水平或垂直分割线划分内容与操作区域，帮助建立清晰的信息层次。

使用选择

用于 UI 区域之间的水平或竖直分隔。不是图表坐标线、活动轨迹线或装饰路径的通用绘图组件。

row / column 选择方向，length / thickness 控制长度与粗细，值使用对应系统 Token。
纯装饰保持 decorative；只有真正表达内容分隔时才配置可访问语义。

快速开始

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

<script lang="ts">	import { Separator } from '@snowui-design-system/components';</script> <div style="width: min(100%, 24rem); display: flex; flex-direction: column; gap: var(--gap-4);">	<p>SnowUI brings components, layout, and motion together for Svelte applications.</p>	<Separator />	<p>Start with the installation guide, then explore the component documentation.</p></div>

API

关键字	类型	默认值	描述
row	`boolean`	`false`	横向分割线；与 Frame 写法统一
column	`boolean`	`false`	纵向分割线；与 Frame 写法统一
length	`string \| number`	—	主轴长度；数字按 px 处理
thickness	`string \| number`	—	线宽；未传时默认 0.5px（等价 `var(--border-1)`）
rounded	`boolean`	`true`	端点是否圆角；默认圆角
decorative	`boolean`	`true`	是否为装饰分割线；默认输出 `aria-hidden="true"`
children	`Snippet`	—	预留给带文字的分割线场景

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

使用边界与详细说明

命名边界

组件正式名为 Separator，不使用 Line。Separator 表达 UI 区域或项目之间的分隔语义；图表坐标线、网格线、折线图路径等不应复用本组件，未来应在图表域内定义 ChartLine / GridLine / AxisLine。

如果业务代码偏好 <Line /> 这样的短名，只在业务文件中本地别名 Separator as Line，组件库不导出正式 Line 组件，避免和图表线、文本行、路径线等概念冲突。

布局模型

主布局模型：内禀原子布局。定义见 ../../../specs/maintainers/LayoutProtocol.md §12.7（源码参考：specs/maintainers/LayoutProtocol.md）。

Separator 的尺寸由 row / column、length、thickness 与父级上下文变量决定，不承担子元素排列。

默认视觉：

粗细：0.5px，等价 var(--border-1)。
颜色：var(--black-10)。
圆角：开启，使用 var(--radius-full)。

ButtonGroup 自 v1.2.0 起自行绘制相邻 Button 之间的装饰性分割线；ButtonGroup 调用方不再需要插入 Separator。现有 ButtonGroup Context 解析仅作为旧代码兼容保留，不是新用法。

使用示例

<Separator /> <Separator column length="1rem" /> <Separator rounded={false} thickness="1px" />

Separator 样式覆盖

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

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

变量	用途与默认参考
`--snowui-separator-color-override`	分割线颜色
`--snowui-separator-thickness-override`	分割线粗细

设计指南 · Token · 组合边界

Separator 类型与状态

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

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

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

共享 Frame API · 返回 API

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