卡片

1. 组件概述

卡片是一个内容展示组件，用于以卡片形式展示一条结构化的信息。卡片包含头部区域（标题、副标题、图片、描述）、内容区域和底部按钮区域，可以将相关信息整合在一个视觉单元中。适用于展示人物介绍、知识点卡片、学习资源等需要图文结合的信息展示场景。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：知识点卡片展示。在学习辅导类应用中，用卡片展示一个知识点的概要信息。标题设置为知识点名称，副标题显示所属学科，描述区域放置简要说明，内容区域可添加更多详细信息，底部按钮可设置”开始学习”触发工作流进入详细讲解。
• 场景二：AI 助手角色介绍。在多角色 AI 对话应用中，用卡片展示不同 AI 助手的信息。图片地址设置为助手头像，标题为助手名称，描述为助手的能力介绍，底部按钮”开始对话”可触发工作流切换到对应的 AI 角色。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

配置折叠组

配置项	说明
新增内容	点击此按钮可以从组件面板中选择组件添加到卡片的内容区域。内容区域可以放置文字、图片、表格等各种展示组件。
标题	卡片头部显示的主标题文字。可以绑定变量，实现动态显示。例如显示知识点名称、人物姓名等。
副标题	显示在标题下方的次要信息。可以绑定变量。适合放置分类、标签、时间等辅助信息。
图片地址	卡片头部显示的图片 URL。可以绑定变量，实现动态加载不同图片。适合放置头像、封面图等。
打开外部链接	设置后，点击卡片会跳转到指定的外部网址。注意：此功能在编辑器预览时不可用，需要发布后才能生效。适用于需要跳转到外部资源的场景。
描述	卡片头部的详细描述文字，显示在副标题下方。可以绑定变量。适合放置简介、摘要等较长的说明文字。
是否高亮表达式	设置一个条件表达式，当条件满足时卡片会显示高亮标记。适用于需要突出显示特定卡片的场景，例如标记”推荐”或”热门”内容。

显隐

配置项	说明
可见	控制卡片是否显示。默认可见。可以设置为始终可见，或根据条件动态控制显示/隐藏。

设计

配置项	说明
卡片一行最多能放按钮个数	设置卡片底部按钮区域每行最多显示的按钮数量，范围 1-10，默认为 4。当按钮数量超过此值时会自动换行显示。
标题 CSS 类名	为标题添加自定义样式类名，用于调整标题的外观样式。
高亮 CSS 类名	为高亮标记添加自定义样式类名，用于自定义高亮效果的外观。
副标题 CSS 类名	为副标题添加自定义样式类名，用于调整副标题的外观样式。
描述 CSS 类名	为描述文字添加自定义样式类名，用于调整描述区域的外观样式。
图片外层 CSS 类名	为图片容器添加自定义样式类名，用于调整图片区域的布局和间距。
图片 CSS 类名	为图片本身添加自定义样式类名，用于调整图片的大小、圆角等样式。
内容区 CSS 类名	为卡片内容区域添加自定义样式类名，用于调整内容区的布局和样式。
CSS 类名	为整个卡片组件添加自定义样式类名，用于调整卡片整体的外观样式。