Hi-kits

Board 卡牌布局

9/2/2022 卡片式布局

商品卡片，用于展示商品的图片、价格等信息。

# 何时使用

import { HiBoard } from 'hi-kits/board'
1

# 基本用法

<h-row gutter="10">
    <h-col span="10">
        <h-divider text="一行一个" dir="left"></h-divider>
        <h-board gutter="10">
            <h-goods picture="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2F79bH5QEe4hO6yps3XG3JsA.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664694209&t=4be791401a14527fea19700b574d1efb"
                name="商品名称"
                price="¥100.00"
                discount="¥90.00"
            >
            </h-goods>
            <h-goods picture="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2F79bH5QEe4hO6yps3XG3JsA.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664694209&t=4be791401a14527fea19700b574d1efb"
                name="商品名称"
                price="¥100.00"
                discount="¥90.00"
            >
            </h-goods>
        </h-board>
    </h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Expand Copy

# 多种模式

<h-row gutter="10">
     <h-col span="16" >
        <h-divider text="一行两个" dir="left"></h-divider>
        <h-board mode="1/1"  gutter="10">
            <h-goods picture="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2F79bH5QEe4hO6yps3XG3JsA.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664694209&t=4be791401a14527fea19700b574d1efb"
              name="商品名称"
              price="¥100.00"
              discount="¥90.00"
            >
            </h-goods>
            <h-goods picture="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2F79bH5QEe4hO6yps3XG3JsA.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664694209&t=4be791401a14527fea19700b574d1efb"
              name="商品名称"
              price="¥100.00"
              discount="¥90.00"
            >
            </h-goods>
            <h-goods picture="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2F79bH5QEe4hO6yps3XG3JsA.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664694209&t=4be791401a14527fea19700b574d1efb"
              name="商品名称"
              price="¥100.00"
              discount="¥90.00"
            >
            </h-goods>
        </h-board>
    </h-col>
    <h-col span="20" >
          <h-divider text="一行三个" dir="left"></h-divider>
          <h-board mode="1/1/1"  gutter="10px 20px">

            <h-goods picture="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2F79bH5QEe4hO6yps3XG3JsA.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664694209&t=4be791401a14527fea19700b574d1efb"
              name="商品名称"
              price="¥100.00"
              discount="¥90.00"
            >
            </h-goods>
            <h-goods picture="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2F79bH5QEe4hO6yps3XG3JsA.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664694209&t=4be791401a14527fea19700b574d1efb"
              name="商品名称"
              price="¥100.00"
              discount="¥90.00"
            >
            </h-goods>
            <h-goods picture="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2F79bH5QEe4hO6yps3XG3JsA.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664694209&t=4be791401a14527fea19700b574d1efb"
              name="商品名称"
              price="¥100.00"
              discount="¥90.00"
            >
            </h-goods>
            <h-goods picture="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2F79bH5QEe4hO6yps3XG3JsA.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664694209&t=4be791401a14527fea19700b574d1efb"
              name="商品名称"
              price="¥100.00"
              discount="¥90.00"
            >
            </h-goods>
            <h-goods picture="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2F79bH5QEe4hO6yps3XG3JsA.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664694209&t=4be791401a14527fea19700b574d1efb"
              name="商品名称"
              price="¥100.00"
              discount="¥90.00"
            >
            </h-goods>
        </h-board>
    </h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
Expand Copy

# 自定义内容

商品名称

¥100.00

¥90.00

<h-row gutter="10">
    <h-col span="18">
        <h-board mode="1/1"  gutter="10px 20px">
            <h-goods>
              <div slot="custom">
                <div>
                  <img style="max-width: 100%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2F79bH5QEe4hO6yps3XG3JsA.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664694209&t=4be791401a14527fea19700b574d1efb"/>
                </div>
                <p style="color: #f00;">商品名称</p>
                <p style=" font-size: 12px; color: rgb(140, 140, 140);">¥100.00</p>
                <p style=" font-size: 16px; color: rgb(9, 255, 5);">¥90.00</p>
              </div>
            </h-goods>
        </h-board>
    </h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Expand Copy

# 参数说明

# h-board

参数 说明 类型 可选值 默认值
mode 显示模式 string '1/1' | '1/1/1' | 'auto' -
gutter 子项目间距 string - -

# h-goods

参数 说明 类型 可选值 默认值
picture 商品图片 string - -
name 商品名称 string - -
price 商品价格 string - -
discount 商品折扣价 string - -
Last Updated: 4/25/2023, 16:14:30

Breadcrumb 面包屑