FS-UI v0.1.33

Card 卡片

使用指南

import { Card } from 'fs-ui'

export default {
  components: {
    fsCard: Card
  }
}
1
2
3
4
5
6
7

代码演示

  • 普通
<fs-card title="卡片标题"></fs-card>

<fs-card
  title="卡片标题"
  sub-title="副标题非必填"
  to="/button"
>
1
2
3
4
5
6
7
  • 带图片
<fs-card
  title="卡片标题"
  sub-title="小标题"
  img="https://dummyimage.com/50x50/509292/fff"
  circle
>
1
2
3
4
5
6
  • 带说明
<fs-card
  title="100元代金券"
  sub-title="小标题"
  img="https://dummyimage.com/50x50/509292/fff"
  append="483米有门店"
>
</fs-card>

<fs-card
  title="100元代金券"
  sub-title="小标题"
  img="https://dummyimage.com/50x50/509292/fff"
>
<span slot="append">
  <i class="iconfont icon-view" />
  查看门店
</span>
</fs-card>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

属性

参数 说明 类型 默认值
title 主标题 String -
sub-title 小标题 String -
img 图片地址(可选) String -
circle 图片圆形 Boolean -
append 附加信息 String -
to 内部跳转链接 String -
url 外部跳转链接 String -

插槽

插槽名 说明
append 自定义append内容

事件

event 说明 返回值
click 点击 event

← List 列表 →