Skip to content

QHCLF/dynamic-card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

dynamic-card

使用纯css实现的弹性卡片组件

预览

image

image

使用方式

1.下载组件:

npm install dynamic-card

2添加到组件中

例如: 根据一下数据格式为其添加属性,为添加则表示使用默认:
卡片的宽: width: {type: Number, default: 370}
卡片的高: height:{ type: Number, default: 430 },
卡片中的图片链接:imgSrc: { type: String, default: 'https://hbimg.huabanimg.com/1ccac3a5bdc74168e8b91d886a12be75471e82ce40b19-MoLdbk_fw658' },
卡片内容中的大标题title:{ type: String, default: '越努力,越幸运!' },
卡片内容中的小标题 subtitle:{ type: String, default: 'QHMILK' },
卡片内容中的文本: desc:{ type: String, default: '正文的详细内容描述,越努力,越幸运,机不可失,失不再来。正文的详细内容描述,越努力,越幸运,机不可失,失不再来' },
尾部文字: footer_text:{ type: String, default: '此组件由QHMILK设计' },
尾部链接: footer_link:{ type:String, default: '#' }

About

利用纯css3的transistion动画写的一个卡片组件

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published