Divider 分割线

最近更新时间:2025-12-30 17:25:52

我的收藏

组件功能

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

基础用法

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

属性说明

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

使用示例

下面示例展示了在两个文本内容之间插入一条分割线,并设置上下间距为16px。
JSON 格式:
{
"type": "Card",
"children": [
{ "type": "Text", "value": "内容 1" },
{ "type": "Divider", "spacing": "16px" },
{ "type": "Text", "value": "内容 2" }
]
}
效果展示如下:




flush 属性说明

flushtrue 时:
分割线会自动延伸到父容器的边缘。
自动读取父容器的 padding 值。
如果无法读取,默认使用 16px