Divider 分割线

Divider 是一种用于视觉分隔内容的界面元素，通过水平或垂直的线条、空白区域或装饰性元素划分不同内容区块，增强页面层次感和组织性。它不承载具体内容，而是通过空间关系引导用户注意力。

Storybook

引入

import { Divider } from '@versakit/vue'

使用

loading

API

属性

属性名	说明	类型	默认值
orientation	分割线方向	'horizontal' | 'vertical'	'horizontal'
variant	线条样式	'solid' | 'dashed' | 'dotted'	'solid'
size	线条粗细	'thin' | 'medium' | 'thick'	'medium'
color	线条颜色	string	-
label	分割线文本	string	-
labelPosition	文本位置	'start' | 'center' | 'end'	'center'
as	自定义渲染元素	string	水平无文本时为'hr'，其他情况为'div'

数据属性

Divider 组件在根元素上添加以下数据属性：

• data-orientation: 分割线的方向，基于 orientation 属性
• role: 设置为 "separator"，提供可访问性支持
• aria-orientation: 分割线的方向，提供可访问性支持