产品动态
产品公告
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 | 深色模式颜色 |
文档反馈