组件功能

Divider 是分割线组件,用于在内容之间创建视觉分隔,帮助界面层次更清晰。

基础用法

通过使用 Divider 可以在内容间添加水平或垂直的分隔线,spacing 用于设置分割线上下的间距。

Template 示例:

<Divider />

属性说明

属性名 类型 描述 默认值
color string 分割线颜色 (CSS 颜色值) -
size number | string 分割线粗细 1
spacing number | string 上下间距 -
flush boolean 是否贴边(从 CSS 变量读取父容器 padding,回退到 16px) false

使用示例

下面示例展示了在两个文本内容之间插入一条分割线,并设置上下间距为16px。

Template 示例:

<Card>
  <Text value="内容 1" />
  <Divider spacing="16px" />
  <Text value="内容 2" />
</Card>

效果展示如下:

flush 属性说明

flushtrue 时:

  • 分割线会自动延伸到父容器的边缘。

  • 自动读取父容器的 padding 值。

  • 如果无法读取,默认使用 16px