Fighting Design

Appearance

On this page

Expand Card 折叠动效 ​

针对于图片展示的一个扩展折叠动效组件

基本使用 ​

image-list 需要传入一个图片数组集合来展示

开启

描述信息 ​

image-list 可以传入一个对象类型的数组，里面包含 url 和一个可选的 text，text 可用作图片的描述信息

第一张图片
第二张图片
第三张图片
开启

圆角图片 ​

round 属性可以配置圆角图片

开启

纵向排列 ​

vertical 属性可以配置纵向排列

开启

Attributes ​

参数说明类型可选值默认值
image-list需要展示的图片列表ExpandCardImageList——[]
round是否显示圆角boolean——false
height自定义高度string / number————
width自定义宽度string / number————
color左下角文字的颜色string————
expand-index默认展开的索引，从 0 开始number——0
vertical是否纵向排列boolean——false
on-change切换时执行的回调ExpandCardChange————

Interface ​

组件导出以下类型定义：

ts
import type {
  ExpandCardInstance,
  ExpandCardProps,
  ExpandCardImageListItem,
  ExpandCardImageList
} from 'fighting-design'

ExpandCardImageListItem ​

ts
interface ExpandCardImageListItem {
  url: string
  text?: string
}

ExpandCardImageList ​

ts
type ExpandCardImageList = ExpandCardImageListItem[] | string[]

ExpandCardChange ​

ts
type ExpandCardChange = (
  evt: MouseEvent,
  index: number,
  item: ExpandCardImageListItem
) => void

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式

名称描述
--expand-card-height高度
--expand-card-width宽度
--expand-card-color文字颜色

Contributors ​