Hi-kits

Card 卡片

6/27/2022 卡片面板

通用卡片容器。将信息聚合在卡片容器中展示。

# 何时使用

最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。

import { HiCard } from 'hi-kits/card'
1

# 简单卡片

卡片可以只有内容区域。

Card content

Card content

<h-card>
    <h-card-content>
        <p>Card content</p>
        <p>Card content</p>
    </h-card-content>
</h-card>
1
2
3
4
5
6
7
Expand Copy

# 带有标题的卡片

卡片头是用来显示卡的标题。

Card title

Card content

Card content

<h-card>
    <h-card-header>Card title</h-card-header>
    <h-card-content>
        <p>Card content</p>
        <p>Card content</p>
    </h-card-content>
</h-card>
1
2
3
4
5
6
7
8
Expand Copy

# 带有尾的卡片

页脚是一些附加信息或自定义操作。

Card content

Card content
Card title

Card content

Card content

Card content

 2015年1月20日 评论 5
<h-row gutter="20">
    <h-col span="12">
        <h-card>
            <h-card-content>
                <p>Card content</p>
                <p>Card content</p>
            </h-card-content>
            <h-card-footer>
                <div><h-icon name="sync" size="16" color="#F44336"></h-icon></div>
                <div><h-icon name="person" size="16" color="#42b983"></h-icon></div>
                <div><h-icon name="heart" size="16" color="#F44336"></h-icon></div>
            </h-card-footer>
        </h-card>
    </h-col>
    <h-col span="12">
        <h-card>
            <h-card-header>
                Card title
                <div slot="extra">
                    <a href="javascript:;">More</a>
                </div>
            </h-card-header>
            <h-card-content>
                <p>Card content</p>
                <p>Card content</p>
                <p>Card content</p>
            </h-card-content>
            <h-card-footer style="justify-content: space-between">
                <span>2015年1月20日</span>
                <span>评论 5</span>
            </h-card-footer>
        </h-card>
    </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
Expand Copy

# 基础卡片

包含标题、内容、操作区域。

Card title

Card content

Card content

Card content
Card title

Card content

Card content

Card content

 喜欢 查看更多
<h-row gutter="20">
    <h-col span="12">
        <h-card>
            <h-card-header>
                Card title
                <div slot="extra">
                    <a href="javascript:;">More</a>
                    <a href="javascript:;">More</a>
                    <a href="javascript:;">More</a>
                </div>
            </h-card-header>
            <h-card-content>
                <p>Card content</p>
                <p>Card content</p>
                <p>Card content</p>
            </h-card-content>
            <h-card-footer>
                <div><h-icon name="sync" size="16" color="#F44336"></h-icon></div>
            </h-card-footer>
        </h-card>
    </h-col>
    <h-col span="12">
        <h-card>
            <h-card-header>Card title</h-card-header>
            <h-card-content>
                <p>Card content</p>
                <p>Card content</p>
                <p>Card content</p>
            </h-card-content>
            <h-card-footer  style="justify-content: space-between">
                <a href="javascript:;" class="Link">喜欢</a>
                <a href="javascript:;" class="Link">查看更多</a>
            </h-card-footer>
        </h-card>
    </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
Expand Copy

# 圆角卡片

圆角卡片 带有标题和尾的卡片。卡片头是用来显示卡的标题和脚注的一些附加信息或自定义操作。 
 <h-card radius="12">
    <h-card-header style="background-image:url(https://ys-oss-zjrs.haier.net/content/img/2022072617500217861338.jpg);height: 300px; color: white;align-items: flex-end;">
        圆角卡片
    </h-card-header>
    <h-card-content>
        带有标题和尾的卡片。卡片头是用来显示卡的标题和脚注的一些附加信息或自定义操作。
    </h-card-content>
    <h-card-footer>
        <div><h-icon name="sync" size="16" color="#F44336"></h-icon></div>
    </h-card-footer>
</h-card>
1
2
3
4
5
6
7
8
9
10
11
12
Expand Copy

# 无边框

无边框

在灰色背景上使用无边框的卡片。

Card content

Card content

 
<div style="background: #ccc;padding: 10px">
    <h-card noBorder>
        <h-card-header>
            无边框
        </h-card-header>
        <h-card-content>
            <p>在灰色背景上使用无边框的卡片。</p>
            <p>Card content</p>
            <p>Card content</p>
        </h-card-content>
        <h-card-footer>
            <div><h-icon name="sync" size="16" color="#F44336"></h-icon></div>
            <div><h-icon name="person" size="16" color="#42b983"></h-icon></div>
            <div><h-icon name="heart" size="16" color="#F44336"></h-icon></div>
        </h-card-footer>
    </h-card>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Expand Copy

# 参数说明

参数 说明 类型 可选值 默认值
noBorder 是否移除边框 boolean - false
Last Updated: 4/25/2023, 16:14:30

Badge 徽标数