跳到主要内容

卡片

用于展示相关信息的容器组件。

何时使用​

  • 当需要展示一组相关内容时，例如产品信息、用户资料等。
  • 在需要强调某个特定信息块时，使用卡片可以提高可见性。

一、属性​

1. 数据源​

数据绑定​

详见：数据绑定

2. 功能​

标题​

卡片的标题支持直接输入或结合多种组件实现，默认为输入模式。

卡片标题设置示意图

标题支持三种绑定方式，默认为自定义，默认值为“卡片”。

卡片标题绑定方式

  • 手动赋值：直接输入固定文本。
  • 数据绑定：绑定父级组件的 API 或查询模型中的字段。
  • 成员变量：绑定页面内其他组件的值。
标题输入模式​

开启标题输入功能后，可以自定义标题内容，并在标题区域添加其他组件。

标题输入示例

3. 操作区​

卡片右上角的操作区默认隐藏。此区域支持添加组件，也可设置为完全隐藏。

操作区示意图

4. 外观​

显示边框​

默认关闭。若需要卡片边框，可开启此选项。

显示边框示意图

5. 状态​

载入状态​

载入状态默认关闭。开启后，在卡片加载数据时会显示骨架屏动画效果。

骨架屏示例

隐藏状态​

隐藏功能支持以下四种绑定方式，默认为手动赋值，且隐藏状态为“关闭”。

隐藏状态配置示意图

  • 手动赋值：手动设置按钮的开启或关闭状态（默认关闭）。
  • 数据绑定：详见：数据绑定
  • 组件绑定：绑定当前组件的数据集。
  • 视图参数：绑定页面接收到的视图参数。

二、样式​

本组件无特殊样式配置，详见：通用样式

三、常见使用场景​

1. 产品展示​

在电商平台中，使用卡片展示每个产品的图片、描述和价格。

产品展示示例

2. 用户资料​

在社交媒体或后台管理系统中，使用卡片展示用户头像、姓名和基本信息。

用户资料示例

3. 信息摘要​

在数据仪表盘中，使用卡片展示关键指标或数据摘要，便于快速浏览。

信息摘要示例

4. 内容预览​

在博客或新闻网站中，使用卡片展示标题、摘要和图片，吸引用户点击。

内容预览示例

5. 操作面板​

在业务应用中，使用卡片作为操作面板，展示可执行的功能或操作按钮。

操作面板示例