Divider 分割线

用于将内容分隔为多个区域。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

默认渲染一条水平分割线。

<zq-divider />

展示文本

通过插槽在分割线中间插入内容。

<zq-divider>文本</zq-divider>

内容位置

通过 content-position 属性设置内容的位置。

<zq-divider content-position="left">左侧文本</zq-divider>
<zq-divider content-position="center">居中文本</zq-divider>
<zq-divider content-position="right">右侧文本</zq-divider>

虚线

通过 dashed 属性设置为虚线。

<zq-divider dashed />
<zq-divider dashed>虚线</zq-divider>

细线

通过 hairline 属性设置为细线（默认开启）。

<zq-divider :hairline="false">粗线</zq-divider>

API

Props

参数	说明	类型	默认值
hairline	是否使用细线	boolean	true
dashed	是否使用虚线	boolean	false
content-position	内容位置	'left' | 'center' | 'right'	'center'

Slots

名称	说明
default	分割线中间的内容

主题定制

变量名	说明
--color-divider	分割线颜色
--color-text-secondary	文本颜色