Divider 分割线

介绍

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

基础用法

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

<vd-divider />

展示文本

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

<vd-divider>文本</vd-divider>

内容位置

通过 content-position 指定内容所在位置。

<vd-divider content-position="left">文本</vd-divider>
<vd-divider content-position="right">文本</vd-divider>

虚线

添加 dashed 属性使分割线渲染为虚线。

<vd-divider dashed>文本</vd-divider>

自定义样式

可通过 color、custom-style 设置颜色与样式。

<vd-divider color="#1989fa">文本</vd-divider>
<vd-divider :custom-style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
  文本
</vd-divider>

垂直

文本
<vd-divider vertical />
文本
<vd-divider vertical dashed />
文本
<vd-divider vertical :hairline="false" />
文本

API

Props

参数	说明	类型	默认值
content-position	内容位置	'left' | 'center' | 'right'	'center'
dashed	是否使用虚线	boolean	false
hairline	是否使用 0.5px 线	boolean	true
vertical	是否使用垂直分割线	boolean	false
color	自定义颜色（同时作用于文字与线条）	string	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Slots

名称	说明
default	内容（垂直模式不展示）

类型定义

组件导出以下类型定义：

import type {
  DividerProps,
  DividerContentPosition,
  DividerThemeVars,
} from 'vital-design';

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--vd-divider-theme-margin	var(--vd-padding-md) 0	水平外边距
--vd-divider-theme-vertical-margin	0 var(--vd-padding-xs)	垂直外边距
--vd-divider-theme-color	var(--vd-color-text-2)	文字颜色
--vd-divider-theme-font-size	var(--vd-font-size-md)	字号
--vd-divider-theme-line-height	24px	行高
--vd-divider-theme-border-color	var(--vd-color-border)	线条颜色
--vd-divider-theme-content-padding	var(--vd-padding-md)	内容两侧间距
--vd-divider-theme-content-left-width	10%	左对齐时左侧线宽
--vd-divider-theme-content-right-width	10%	右对齐时右侧线宽