Skip to content

Divider 分割线

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

引入

typescript
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: 分割线的方向,提供可访问性支持