Card 卡片

最近更新时间:2025-12-30 17:25: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. 字符串:直接显示状态文本
JSON 格式:
"status": "加载中..."
效果展示如下:



2. 对象:包含 text 字段的对象。
JSON 格式:
"status": {
"text": "共 3 条记录"
}
效果展示如下:



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

CardAction 对象

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

ThemeColor 对象

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