组件功能
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 属性说明
当
flush 为 true 时:分割线会自动延伸到父容器的边缘。
自动读取父容器的
padding 值。如果无法读取,默认使用
16px。