CheckCard 多选卡片

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

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

何时使用

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

代码演示

基本使用

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

单选模式

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

多选模式

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

不同尺寸

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

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

自定义尺寸

表单中使用

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

组合样式

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

自定义头像

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

自定义标题

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

自定义描述

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

默认选中

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

操作栏

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

组件 Loading

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

纯图片选项

通过仅仅配置 cover 属性可以让你的选项成为一个纯图片选项。

选项不可用

通过配置 disabled 属性配置选项不可用。

选项列表

CheckCard.Group 支持通过 options 属性配置化来列表展示多个选项。

应用列表示例

这里展示在实际 AiDesk 中图像算法选择的使用示例。

布局

CheckCard.Group 内嵌 CheckCard 并与 Grid 组件一起使用,可以实现更灵活的布局。

API

CheckCard

参数说明类型默认值版本
checked指定当前是否选中booleanfalse
bordered是否显示边框booleantrue1.20.0
value选项值string-
defaultChecked初始是否选中booleanfalse
disabled失效状态booleanfalse
size选择框大小,可选 large smallstringdefault
onChange变化时回调函数Function(checked)-
loading当卡片内容还在加载中时,可以用 loading 展示一个占位booleanfalse
title标题string | ReactNode-
description描述ReactNode-
avatar选项元素的图片地址link | ReactNode-
extra动作区域卡片右上角的操作区域-
cover卡片背景图片, 注意使用该选项后titledescriptionavatar失效ReactNode-

CheckCard.Group

参数说明类型默认值版本
multiple多选booleanfalse
bordered是否显示边框booleantrue1.20.0
defaultValue默认选中的选项string | string[]-
disabled整组失效booleanfalse
loading当卡片组内容还在加载中时,可以用 loading 展示一个占位booleanfalse
options指定可选项string[] | Array<{ title: ReactNode, value: string, description?: ReactNode, avatar?: link or ReactNode, cover?:ReactNode, disabled?: boolean }>[]
value指定选中的选项string | string[]-
size选择框大小,可选 large smallstringdefault
onChange变化时回调函数Function(checkedValue)-