腾讯云智能体开发平台 Card 卡片

卡片(Card) 用于在 Widget 中对其他组件进行组织展示,支持状态信息展示、主题模式切换,适用于多组件组合展示、信息分组及交互操作场景。

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

一、基础用法

通过 children 属性配置内部子组件,常用于组合标题、文本、表单控件等内容。

Template 示例:

<Card> <Title value="卡片标题" size="lg" /> <Text value="这是卡片内容" size="md" /></Card>

效果展示如下:

二、属性说明

属性名 类型 描述 默认值
children ★ ChatKitComponent[] 子组件列表,用于定义卡片内部内容 –
size "sm" | "md" | "lg" | "full" 卡片尺寸 "md"
padding number | string | Spacing 卡片内边距设置 –
background string | ThemeColor 背景颜色 –
status WidgetStatus 状态配置 –
collapsed boolean 是否折叠 false
confirm CardAction 确认按钮配置 –
cancel CardAction 取消按钮配置 –
theme "light" | "dark" 主题模式 "light"
asForm boolean 是否作为表单容器 false

注意:★ 标记为必填属性。

三、WidgetStatus 类型

用于定义卡片顶部的状态展示区域,支持以下两种形式:

1. 字符串:直接显示状态文本

Template 示例:

<Card status="加载中…"> <Title value="卡片标题" /> <Text value="这是卡片内容" /></Card>

效果展示如下:

2. 对象:包含 text 字段的对象。

Template 示例:

<Card status={{ text: "共 3 条记录" }}> <Title value="卡片标题" /> <Text value="这是卡片内容" /></Card>

效果展示如下:

注意:虽然类型定义中包含 icon 和 favicon 字段,但当前实现仅显示文本内容,不支持图标显示。

四、CardAction 对象

用于配置 Card 的操作按钮(例如确认、取消)。

属性名 类型 描述
label ★ string 按钮文本
action ★ ActionConfig 动作配置

五、ThemeColor 对象

用于配置不同主题下的颜色设置。

属性名 类型 描述
light ★ string 浅色模式颜色
dark ★ string 深色模式颜色
赞 (0)
上一篇 4天前
下一篇 4天前