Card 卡片

2026-04-28   访问量:1031


组件功能

卡片(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

深色模式颜色


热门文章
更多>