Card 卡片

2026-04-28   访问量:0


组件功能

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

深色模式颜色


热门文章
更多>