Separator 分隔线

在内容块之间（横向）或一行里的几组元素之间（纵向）画一条 1px 的细线。

基础用法

横向分隔线占满容器宽度，默认插槽有内容时渲染成「线 文字 线」。

<pt-separator></pt-separator>
<pt-separator>或</pt-separator>

纵向

在 flex 行里撑满行高，放在普通行内时默认与文字等高（1em）。

<pt-button variant="ghost" size="sm">撤销</pt-button>
<pt-button variant="ghost" size="sm">重做</pt-button>
<pt-separator orientation="vertical"></pt-separator>
<pt-button variant="ghost" size="sm">加粗</pt-button>

尺寸从哪来

• 横向：占满容器宽度，并会扣掉自身的外边距 —— 在弹层里用负的 margin-inline 让线贯通到边缘时不会偏出去。 放在可换行的 flex 行里会独占一行。
• 纵向：宽 1px。在 flex 行里撑满行高（即便父级是 align-items: center）；放在普通行内时默认 1em 高， 与文字居中对齐。需要别的高度直接给元素写 height。

宿主上不带外边距，间距由容器或使用方决定。

文字

默认插槽有内容时渲染成「线 文字 线」，文字用弱化色与 xs 字号。只对横向生效，纵向时插槽内容不显示。

无障碍

默认是装饰性的：宿主 role="none"，读屏跳过它。需要把「这里分成了两段」传达给读屏时关掉 decorative， 宿主换成 role="separator"，纵向时再带上 aria-orientation="vertical"。

decorative 是默认为真的布尔属性，原生 HTML 里关掉它要写 decorative="false"； React / Vue / Angular 里传布尔值 false 即可。宿主上始终带着 decorative="true" / "false" 反映当前状态， 可以用属性选择器区分，序列化后的 HTML 也能原样还原。

定制

线的颜色用 --pt-separator-color，默认取 --pt-border-default。可以设在容器上统一生效。

API

属性

属性	Attribute	类型	默认值	说明
decorative	decorative	boolean	true	是否仅作装饰。为真时宿主 `role="none"`，为假时 `role="separator"`
orientation	orientation	"horizontal" | "vertical"	'horizontal'	方向。横向占满容器宽度；纵向在 flex 行里撑满行高，在普通行内默认 1em 高

插槽

名称	说明
（默认）	可选的居中文字，只对横向生效

可定制的内部元素（::part()）

part	说明
label	文字容器
line	线段（有文字时左右各一段）