Divider 分割线
区分内容的分割线。基于 BrConfigProvider 实现全局主题配置。
基础用法
分隔不同章节的文本段落。
BreezeUI
A Vue 3 Component Library
Docs
Source
Releases
Example
带文本的分割线
你可以在分割线的中间、起始或结束位置显示文本。
Center
Start
End
Custom Slot
Example
垂直分割线
使用 orientation="vertical" 属性将其设置为垂直方向。
Left
Middle
Right
OR
Example
样式
支持实线、虚线、点线，以及自定义颜色和粗细。
Solid
Dashed
Dotted
Custom Color
Thickness
Example
自定义间距与渲染标签
你可以使用 gap 属性调整文本与分割线之间的间距，使用 as 属性更改渲染的 HTML 标签。
Custom Gap
Default Gap
Gap: 0
Gap: 2rem
Gap: 50px
Render as <li>
- Item 1
- Item 2
- Item 3
Example
主题定制
BrDivider 完全集成了 BrConfigProvider，允许你通过全局配置或局部类名定制样式。
全局配置 (BrConfigProvider)
你可以通过 BrConfigProvider 全局修改分割线颜色（对应 --border 变量）。
Global Theme (Blue Border)
Link 1
Link 2
Local Override (Red)
Example
局部定制 (TailwindCSS)
你可以直接通过 class 属性传递 TailwindCSS 类名来覆盖默认样式。
vue
<BrDivider class="bg-red-500 h-2" />API
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | 分割线方向 |
decorative | boolean | true | 是否纯装饰性（无语义） |
label | string | - | 分割线文本 |
labelPlacement | 'start' | 'center' | 'end' | 'center' | 文本位置 |
type | 'solid' | 'dashed' | 'dotted' | 'solid' | 分割线样式类型 |
color | string | - | 自定义颜色 |
thickness | number | string | - | 分割线粗细 |
gap | number | string | - | 文本与分割线之间的间距 |
as | string | 'div' | 渲染的 HTML 标签 |
class | string | - | 自定义类名 |
Slots
| 插槽名 | 说明 |
|---|---|
default | 自定义分割线内容，优先级高于 label 属性 |