tencent cloud

Card 卡片

PDF
聚焦模式
字号
最后更新时间: 2026-02-02 17:08:52

组件功能

卡片(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>
效果展示如下:



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

CardAction 对象

用于配置 Card 的操作按钮(例如确认、取消)。
属性名
类型
描述
label
string
按钮文本
action
ActionConfig
动作配置

ThemeColor 对象

用于配置不同主题下的颜色设置。
属性名
类型
描述
light
string
浅色模式颜色
dark
string
深色模式颜色


帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈