Separator 分隔线

新粗野主义风格的视觉分隔线，支持水平和垂直方向。

预览

Preview

水平分隔线

上方内容

下方内容

垂直分隔线

左侧

中间

右侧

变体

尺寸

文字分隔线

章节标题

主色标题

安装

pnpm dlx brutx-vue@latest add separator

用法

<script setup>
import { Separator } from 'brutx-ui-vue'
</script>

<template>
    <div>
        <p class="text-sm font-medium">Content above</p>
        <Separator />
        <p class="text-sm font-medium">Content below</p>
    </div>
</template>

方向

水平（默认）：

<template>
    <Separator orientation="horizontal" />
</template>

垂直：

<template>
    <div class="flex h-8 items-center gap-4">
        <span class="text-sm font-bold">Item 1</span>
        <Separator orientation="vertical" />
        <span class="text-sm font-bold">Item 2</span>
    </div>
</template>

文字分隔线

当 orientation="horizontal" 且默认插槽有实际内容时，Separator 会渲染为居中文字分隔线：两侧为分隔线，中间为插槽内容。

<template>
    <Separator>章节标题</Separator>
</template>

文字分隔线同样支持 variant 与 size：

<template>
    <Separator variant="primary" size="lg">主色标题</Separator>
</template>

注意：文字分隔线模式下，class 属性会应用到两侧的分隔线上，而非外层容器。这与普通模式下 class 应用到分隔线元素上的行为保持一致。

变体

变体	说明
default	前景色（bg-brutal-fg）
primary	主色（bg-brutal-primary）
muted	静音色（bg-brutal-muted）

<template>
    <div class="space-y-2">
        <Separator variant="default" />
        <Separator variant="primary" />
        <Separator variant="muted" />
    </div>
</template>

尺寸

尺寸	粗细
sm	2px
default	var(--brutal-border-width, 3px)
lg	5px

<template>
    <div class="space-y-2">
        <Separator size="sm" />
        <Separator size="default" />
        <Separator size="lg" />
    </div>
</template>

API 参考

Separator — 属性

名称	类型	默认值	说明
variant	"default" | "muted" | "primary" | undefined	"default"	选择分隔线的颜色样式。
详情 声明类型 NonNullable<"default" | "primary" | "muted" | null | undefined> | undefined 字面量 "default" "muted" "primary" 默认值详情 声明 'default' 来源: packages/ui/src/components/separator/Separator.vue 解析值 "default" 来源 Separator.vue:12 packages/ui/src/components/separator/Separator.vue
size	"default" | "lg" | "sm" | undefined	"default"	控制分隔线的粗细预设。
详情 声明类型 NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量 "default" "lg" "sm" 默认值详情 声明 'default' 来源: packages/ui/src/components/separator/Separator.vue 解析值 "default" 来源 Separator.vue:13 packages/ui/src/components/separator/Separator.vue
orientation	"horizontal" | "vertical" | undefined	"horizontal"	选择水平或垂直方向；文字内容仅在水平方向居中显示在线段之间。
详情 声明类型 NonNullable<"vertical" | "horizontal" | null | undefined> | undefined 字面量 "horizontal" "vertical" 默认值详情 声明 'horizontal' 来源: packages/ui/src/components/separator/Separator.vue 解析值 "horizontal" 来源 Separator.vue:14 packages/ui/src/components/separator/Separator.vue
decorative	boolean | undefined	true	设为装饰元素时不暴露分隔线语义；关闭后设置 role="separator" 及方向语义。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 声明 true 来源: packages/ui/src/components/separator/Separator.vue 解析值 true 来源 Separator.vue:15 packages/ui/src/components/separator/Separator.vue
class	string | undefined	undefined	追加到原生分隔线或文字分隔线的线段元素。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/separator/Separator.vue 解析值 undefined 来源 Separator.vue:16 packages/ui/src/components/separator/Separator.vue

Separator — 插槽

名称	签名或类型	说明
#default	{}	可选的分隔线内容；水平且插槽有内容时在线段间显示文字，否则作为内容传给底层 Reka UI 分隔线原语。
详情 声明类型 {} 来源 Separator.vue packages/ui/src/components/separator/Separator.vue

可访问性

• ARIA 属性：decorative 为 true 时无语义角色；为 false 时自动设置 role="separator"