腾讯云智能体开发平台 Divider 分割线

这篇说说腾讯云 Divider 分割线组件的功能、基础用法及属性,用于在内容间创建视觉分隔,支持水平/垂直方向,可通过 spacing 设置间距。 基础用法:通过 在内容间添加分隔线,支持 spacing 属性调整上下间距。 属性说明:关键属性包括 color(颜色)、size(粗细)、spacing(间距)和 flush(是否贴边)。 flush 属性:开启后分割线自动延伸至父容器边缘,默认回退 16px 间距。

相关产品
腾讯云智能体开发平台 产品页,含版本规格、价格与购买入口。

一、组件功能

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 属性说明

当 flush 为 true 时:

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

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

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

赞 (0)
上一篇 4天前
下一篇 4天前