Cover 封面

帮助用户快速识别对象间差异,获取关键信息。

Cover 封面

通用原则

  • 大图类型下,所有的信息及操作,均在卡片上显示

  • 卡片本身均带链接,点击后前往对象详情页

  • 小图模式下,图片上尽量不要有额外的操作

  • 文字模式下,中文取首字符的拼音首音节,英文取首字母,并大写显示

基本用法

大图模式的基本用法展示

小图模式

小图模式,不带任何操作

A
A
A
A
A
A
A
A
B
C
D
E
F
G

文字封面

小图模式,不带任何操作

API

Cover

参数说明类型默认值
img封面图片,必填String-
title封面标题,必填React node-
extra封面操作区React node-
description封面描述React node-
tag封面标签String-
link封面点击跳转地址,必填String-
target封面点击打开窗口,同a元素targetString-
onMouseEnter鼠标悬浮触发事件Functionnoop
onMouseLeave鼠标离开触发事件Functionnoop

Cover.Img

参数说明类型默认值
src封面图片地址,必填String-
size封面图片尺寸,可选值'xs', 'small', 'medium', 'large', 'xl'String'medium'

Cover.Text

参数说明类型默认值
text封面文字,必填String-
size封面尺寸,可选值'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl'String'medium'
colorSets封面背景色集,会根据text的charCode选取其中一个作为背景色String数组'#BC61CF', '#F26666', '#F29A52', '#F4C329', '#CBD057', '#289ED3', '#29B3F0'