Separator 分割线

基于 BrConfigProvider 实现全局主题配置，支持水平/垂直展示、样式自定义的企业级分割线组件，支持带有文本的插槽展示。

组件特性

📏 多方向支持：支持水平和垂直两个方向，自动适配容器的宽高度。
🎨 样式自定义：提供多种样式（solid、dashed、dotted、double）和粗细（thin、medium、thick）配置。
🔤 文本插槽：支持在分割线中间添加文本或元素，自动计算背景色和间距以确保可读性。
🧩 多组件集成：可与卡片、表单、菜单等组件无缝集成，划分内容区域。
🌓 主题适配：基于 BrConfigProvider 自动适配浅色/深色主题，支持全局样式覆盖。
♿ 无障碍访问：提供语义化角色，支持通过 decorative 属性控制是否被屏幕阅读器读取。

基础用法

基础的水平和垂直分割线。

<script setup lang="ts">
import { BrSeparator } from '@breezeui/vue'
</script>

<template>
  <div class="border rounded-md p-6 bg-card max-w-sm">
    <div class="space-y-1">
      <h4 class="text-sm font-medium leading-none">BreezeUI</h4>
      <p class="text-sm text-muted-foreground">
        An enterprise-class UI design language and Vue UI library.
      </p>
    </div>
    <BrSeparator class="my-4" />
    <div class="flex h-5 items-center space-x-4 text-sm">
      <div>Docs</div>
      <BrSeparator orientation="vertical" />
      <div>Components</div>
      <BrSeparator orientation="vertical" />
      <div>GitHub</div>
    </div>
  </div>
</template>

粗细与样式

可以通过 thickness 和 variant 属性定制分割线的粗细和视觉样式。

<script setup lang="ts">
import { BrSeparator, BrFlex } from '@breezeui/vue'
</script>

<template>
  <div class="border rounded-md p-6 bg-card space-y-6 w-full max-w-md">
    <BrFlex direction="column" gap="4">
      <div>
        <p class="text-sm mb-2 font-medium">Thickness</p>
        <div class="space-y-4">
          <BrSeparator thickness="thin" />
          <BrSeparator thickness="medium" />
          <BrSeparator thickness="thick" />
        </div>
      </div>
      
      <BrSeparator class="my-2" />
      
      <div>
        <p class="text-sm mb-2 font-medium">Variants</p>
        <div class="space-y-4">
          <BrSeparator variant="dashed" />
          <BrSeparator variant="dotted" thickness="medium" />
          <BrSeparator variant="double" thickness="thick" />
        </div>
      </div>
    </BrFlex>
  </div>
</template>

卡片与表单集成

分割线常用于在卡片内分隔不同的内容区域，或在表单中分隔不同的配置组。

<script setup lang="ts">
import { BrCard, BrCardHeader, BrCardTitle, BrCardContent, BrSeparator, BrForm, BrFormItem, BrFormLabel, BrInput } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-col md:flex-row gap-8">
    <BrCard class="w-full md:w-[350px]">
      <BrCardHeader>
        <BrCardTitle>Notifications</BrCardTitle>
      </BrCardHeader>
      <BrSeparator />
      <BrCardContent class="pt-6">
        <div class="space-y-4 text-sm">
          <div class="flex justify-between items-center">
            <span>Emails</span>
            <span class="text-muted-foreground bg-muted px-2 py-1 rounded">On</span>
          </div>
          <BrSeparator variant="dashed" />
          <div class="flex justify-between items-center">
            <span>Push Notifications</span>
            <span class="text-muted-foreground bg-muted px-2 py-1 rounded">Off</span>
          </div>
        </div>
      </BrCardContent>
    </BrCard>

    <BrCard class="w-full md:w-[400px]">
      <BrCardHeader>
        <BrCardTitle>Profile Settings</BrCardTitle>
      </BrCardHeader>
      <BrSeparator />
      <BrCardContent class="pt-6">
        <BrForm class="space-y-4">
          <BrFormItem>
            <BrFormLabel>Name</BrFormLabel>
            <BrInput placeholder="John Doe" />
          </BrFormItem>
          <BrSeparator variant="dotted" class="my-4" />
          <BrFormItem>
            <BrFormLabel>Email</BrFormLabel>
            <BrInput placeholder="john@example.com" />
          </BrFormItem>
        </BrForm>
      </BrCardContent>
    </BrCard>
  </div>
</template>

带有文本的分割线

你可以使用默认插槽在分割线中间添加文本或其他元素。组件会自动管理 z-index 层级和背景色，确保文本清晰可见。

<script setup lang="ts">
import { BrSeparator } from '@breezeui/vue'
</script>

<template>
  <div class="border rounded-md p-8 bg-card space-y-12 w-full max-w-md">
    <div class="relative">
      <BrSeparator>OR</BrSeparator>
    </div>
    
    <div class="relative">
      <BrSeparator variant="dashed">Continue with</BrSeparator>
    </div>
    
    <div class="h-32 flex justify-center items-center">
      <div class="w-1/2 text-center text-sm">Left Content</div>
      <BrSeparator orientation="vertical">AND</BrSeparator>
      <div class="w-1/2 text-center text-sm">Right Content</div>
    </div>
  </div>
</template>

主题定制

结合 BrConfigProvider，分割线会自动根据当前主题的 --border CSS 变量调整其颜色，在深色和浅色模式下都能保持良好的视觉效果。

<script setup lang="ts">
import { ref } from 'vue'
import { BrSeparator, BrConfigProvider, BrButton, BrCard, BrCardContent } from '@breezeui/vue'

const isDark = ref(false)
const theme = ref({
  primary: '#10b981',
  radius: 0.5,
})

function toggleTheme() {
  isDark.value = !isDark.value
}
</script>

<template>
  <BrConfigProvider :theme="theme">
    <div :class="[isDark ? 'dark bg-slate-950' : 'bg-white', 'p-6 rounded-md transition-colors duration-300 border border-border']">
      <div class="flex justify-between items-center mb-6">
        <h3 :class="isDark ? 'text-white' : 'text-slate-900'" class="font-medium">Theme Adaption</h3>
        <BrButton variant="outline" size="sm" @click="toggleTheme">
          Toggle Theme
        </BrButton>
      </div>

      <BrCard class="bg-card text-card-foreground">
        <BrCardContent class="pt-6 space-y-6">
          <div class="space-y-4">
            <p class="text-sm text-muted-foreground">The separator automatically adapts its color to the current theme based on the <code>--border</code> CSS variable provided by ConfigProvider.</p>
            
            <BrSeparator />
            
            <div class="flex h-10 items-center justify-center space-x-4 text-sm">
              <span>Item 1</span>
              <BrSeparator orientation="vertical" />
              <span>Item 2</span>
              <BrSeparator orientation="vertical" variant="dashed" />
              <span>Item 3</span>
            </div>
            
            <BrSeparator variant="dotted">End of Section</BrSeparator>
          </div>
        </BrCardContent>
      </BrCard>
    </div>
  </BrConfigProvider>
</template>

API 参考

BrSeparator

属性	类型	默认值	说明
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	分割线的方向
`decorative`	`boolean`	`true`	是否为纯装饰性元素。为 true 时，无障碍辅助工具（如屏幕阅读器）会跳过该元素
`thickness`	`'thin' \| 'medium' \| 'thick' \| string`	`'thin'`	分割线的粗细
`variant`	`'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'none'`	`'solid'`	分割线的视觉样式变体
`label`	`string`	-	分割线文本
`labelPlacement`	`'start' \| 'center' \| 'end'`	`'center'`	文本位置
`color`	`string`	-	自定义颜色
`gap`	`number \| string`	-	文本与分割线的间距
`as`	`string`	`'div'`	渲染为 HTML 标签
`class`	`any`	-	自定义类名

SeparatorManager

全局单例工具类，用于管理多个带有文本的分割线嵌套或层叠时的 z-index 层级，防止重叠冲突。

方法	说明
`getInstance()`	获取单例实例
`getNextZIndex()`	递增并获取下一个可用的 z-index
`registerInstance(id)`	注册组件实例
`unregisterInstance(id)`	移除组件实例
`getInstancesCount()`	获取当前注册的实例总数

#Separator 分割线

#组件特性

#基础用法

#粗细与样式

#卡片与表单集成

#带有文本的分割线

#主题定制

#API 参考

#BrSeparator

#SeparatorManager