Cover 封面

封面就像一个对象的名片,相对于列表而言,封面主要通过视觉化的表现方式,帮助用户快速识别对象间差异,同时能方便地获取重要信息。常用场景为:项目封面、文档封面等等。

通用原则

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

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

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

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

基本用法

大图模式的基本用法展示

小图模式

小图模式,不带任何操作

A
A
A
A
A
A
A
S
S
S
S
S
S
S
F
F
F
F
F
F
F

文字封面

小图模式,不带任何操作

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'