组件功能
卡片(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 类型
用于定义卡片顶部的状态展示区域,支持以下两种形式:
-
字符串:直接显示状态文本
Template 示例:
<Card status="加载中..."> <Title value="卡片标题" /> <Text value="这是卡片内容" /> </Card>效果展示如下:
-
对象:包含 text 字段的对象。
Template 示例:
<Card status={{ text: "共 3 条记录" }}> <Title value="卡片标题" /> <Text value="这是卡片内容" /> </Card>效果展示如下:
注意:
虽然类型定义中包含
icon和favicon字段,但当前实现仅显示文本内容,不支持图标显示。
CardAction 对象
用于配置 Card 的操作按钮(例如确认、取消)。
| 属性名 | 类型 | 描述 |
|---|---|---|
| label ★ | string |
按钮文本 |
| action ★ | ActionConfig |
动作配置 |
ThemeColor 对象
用于配置不同主题下的颜色设置。
| 属性名 | 类型 | 描述 |
|---|---|---|
| light ★ | string |
浅色模式颜色 |
| dark ★ | string |
深色模式颜色 |