CheckCard 多选卡片

集合多种相关联说明信息,并且可被选择的卡片。特点:

  • ① 可容纳多种相关联说明信息,如标题、描述、图片、标签等
  • ② 有明显边界
  • ③ 有明显选中态

何时使用

  • 需要展示被选择对象的多种说明信息时
  • 被选择对象的数量不多时

代码演示

基本使用

最常用的选项卡示例,包括头像,标题,描述等部分,可被选择。

示例一
选择一个由流程编排提供的典型用户案例,可以从中学习到流程编排很多设计理念。

单选模式

在多个选项存在的情况下可通过 CheckCard.Group 分组,默认选项卡组件为单选模式。

Card A
选项一
Card B
选项二
Card C
选项三,这是一个不可选项

多选模式

通过设置 CheckCard.Groupmultiple 属性配置多选,注意多选模式下表单项返回值为数组。

Card A
选择一个由流程编排提供的典型用户案例,可以从中学习到流程编排很多设计理念
Card B
选择一个由流程编排提供的典型用户案例,可以从中学习到流程编排很多设计理念

不同尺寸

配置 size 尺寸大小,当前可选 largedefaultsmall,不同尺寸仅宽度不同。

Card title
This is the description

当然你也可以通过 styleclassName 自定义卡片大小。

自定义尺寸

Card title
This is the description

表单中使用

CheckCard 可以和表单组件一起使用,这里给出演示示例。

Spring Boot
通过业界流行的技术栈来快速构建 Java 后端应用
SOFA Boot
使用 SOFAStack 中间件来快速构建分布式后端应用
Node JS
使用前后端统一的语言方案快速构建后端应用

组合样式

头像,标题,描述区域可以自由组合或者单独呈现,组件会为你调整为最合适的对齐方式。

只有图片时

只有图片和描述时

选择一个由流程编排提供的典型用户案例,可以从中学习到流程编排很多设计理念。

只有标题和描述时

示例
选择一个由流程编排提供的典型用户案例,可以从中学习到流程编排很多设计理念。

只有标题和图片

示例

只有标题

示例

只有描述时

选择一个由流程编排提供的典型用户案例,可以从中学习到流程编排很多设计理念。

自定义头像

你可以通过 avatar 属性自定义头像区域。

示例标题

自定义标题

你可以通过 title 属性自定义标题区域。

示例blue
选择一个由流程编排提供的典型用户案例,可以从中学习到流程编排很多设计理念
标题内容过长会自动进行省略,标题内容过长会自动进行省略
选择一个由流程编排提供的典型用户案例,可以从中学习到流程编排很多设计理念

自定义描述

描述区域可通过 description 自定义 React 节点。

默认描述区域不会进行折行
选择一个由流程编排提供的典型用户案例,可以从中学习到流程编排很多设计理念。查看详情
你可以通过排版组件进行省略
选择一个由流程编排提供的典型用户案例,可以从中学习到流程编排很多设计理念。

默认选中

通过配置 defaultChecked 属性为 true 来配置选项默认被选中。

示例二

操作栏

配置 extra 为卡片添加操作栏。

示例一
选择一个由流程编排提供的典型用户案例,可以从中学习到流程编排很多设计理念。

组件 Loading

通过配置 loading 属性为 true 来配置内容在加载中。