Divider 分割线

2026-04-30   访问量:0


组件功能

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


热门文章
更多>