通用原则
大图类型下,所有的信息及操作,均在卡片上显示
卡片本身均带链接,点击后前往对象详情页
小图模式下,图片上尽量不要有额外的操作
文字模式下,中文取首字符的拼音首音节,英文取首字母,并大写显示
大图类型下,所有的信息及操作,均在卡片上显示
卡片本身均带链接,点击后前往对象详情页
小图模式下,图片上尽量不要有额外的操作
文字模式下,中文取首字符的拼音首音节,英文取首字母,并大写显示
大图模式的基本用法展示





小图模式,不带任何操作
小图模式,不带任何操作
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| img | 封面图片,必填 | String | - |
| title | 封面标题,必填 | React node | - |
| extra | 封面操作区 | React node | - |
| description | 封面描述 | React node | - |
| tag | 封面标签 | String | - |
| link | 封面点击跳转地址,必填 | String | - |
| target | 封面点击打开窗口,同a元素target | String | - |
| onMouseEnter | 鼠标悬浮触发事件 | Function | noop |
| onMouseLeave | 鼠标离开触发事件 | Function | noop |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| src | 封面图片地址,必填 | String | - |
| size | 封面图片尺寸,可选值'xs', 'small', 'medium', 'large', 'xl' | String | 'medium' |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| text | 封面文字,必填 | String | - |
| size | 封面尺寸,可选值'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl' | String | 'medium' |
| colorSets | 封面背景色集,会根据text的charCode选取其中一个作为背景色 | String数组 | '#BC61CF', '#F26666', '#F29A52', '#F4C329', '#CBD057', '#289ED3', '#29B3F0' |