Hawthorn-Api

# HtCard 卡片组件

HtCard 卡片组件，用于页面搭建
Author yangmeng@expservice.com.cn

# 示例

个人信息
标记 标记 标记 标记 标记
标记类型:
标记 标记 标记 标记 标记
<template>
  <div>
    <!--
    gutter：设置row的列间距
    xs：设置手机屏幕大小显示
    sm：设置手机屏幕大小显示
    md：设置pad屏幕大小显示
    lg：设置普通pc屏幕大小显示
    xl：设置大屏幕大小显示-->
    <ht-row :gutter="20">
      <ht-col :xs="24" :sm="24" :md="6" :lg="6" :xl="5" style="padding-right: 20px;">
        <ht-card style="height:320px;">
          <div slot="header" style="font-size: 14px;font-weight: 500;">
            <span>个人信息</span>
          </div>
          <!--
          ht-badge ：自定义气泡标记组件
          value : 设置标记数量; 默认值 0
          max : 设置标记最大数量； 默认值 10
          isDot : 设置是否以圆点方式显示； 默认值 false
          hidden : 设置是否隐藏标记； 默认值 false
          type : 设置标记显示类型 可选值 primary / success / warning / danger / info 默认值 warning -->
          <ht-badge :value="msgNums" :max="5" type="danger">
            <ht-button>标记</ht-button>
          </ht-badge>
          <ht-badge :value="maxMsgNums" :max="5" type="primary">
            <ht-button>标记</ht-button>
          </ht-badge>
          <ht-badge :value="maxMsgNums" :max="5" type="success">
            <ht-button>标记</ht-button>
          </ht-badge>
          <ht-badge :value="msgNums" :max="5" type="warning">
            <ht-button>标记</ht-button>
          </ht-badge>
          <ht-badge :value="msgNums" :max="5" type="info">
            <ht-button>标记</ht-button>
          </ht-badge>
        </ht-card>
      </ht-col>
      <ht-col :xs="24" :sm="24" :md="26" :lg="18" :xl="19" style="padding-right: 20px;">
        <ht-card style="height:320px;">
          <div slot="header" style="font-size: 14px;font-weight: 500;">
            <span> 标记类型: </span>
          </div>
          <ht-badge :value="msgNums" :max="5" type="danger">
            <ht-button>标记</ht-button>
          </ht-badge>
          <ht-badge :value="maxMsgNums" :max="5" type="primary">
            <ht-button>标记</ht-button>
          </ht-badge>
          <ht-badge :value="maxMsgNums" :max="5" type="success">
            <ht-button>标记</ht-button>
          </ht-badge>
          <ht-badge :value="msgNums" :max="5" type="warning">
            <ht-button>标记</ht-button>
          </ht-badge>
          <ht-badge :value="msgNums" :max="5" type="info">
            <ht-button>标记</ht-button>
          </ht-badge>
        </ht-card>
      </ht-col>
    </ht-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msgNums: 1,
      maxMsgNums: 6
    };
  }
};
</script>
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
63
64
65
66
67
68
69
70
71
72
73
74
Expand Copy

# 版本

  • v1.0.0

← 前端 →