Hi-kits

Tag 标签

4/27/2022 标签基础组件

用于标记和选择。进行标记和分类的小标签。

# 何时使用

  • 用于标记事物的属性和维度。
  • 进行分类。
import { HiTag } from 'hi-kits/tag'
1

# 基本用法

基本标签的用法。可通过text设置标签文字。color 设置文字颜色

<h-tag text="标签一"></h-tag>
<h-tag text="标签二" color="#fff" style="background: purple;"></h-tag>
<h-tag text="标签三" style="background: gold;"></h-tag>
<h-tag text="标签四" color="#fff" style="background: blue;"></h-tag>
<h-tag text="标签五" style="background: cyan;"></h-tag>
<h-tag text="标签六" style="background: #108ee9;"></h-tag>
1
2
3
4
5
6
7
Expand Copy

# 不同尺寸

通过size 设定不同大小的标签

<h-tag text="标签一" size="15"></h-tag>
<h-tag text="标签二" size="20" color="#fff" style="background: purple;"></h-tag>
<h-tag text="标签三" size="25" style="background: gold;"></h-tag>
<h-tag text="标签四" size="30" color="#fff" style="background: blue;"></h-tag>
<h-tag text="标签五" size="35" style="background: cyan;"></h-tag>
<h-tag text="标签六" size="40" style="background: #108ee9;"></h-tag>
1
2
3
4
5
6
7
Expand Copy

# 带图标的Tag

<h-tag text="用户">
    <h-icon name="person" size="20" color="#3F51B5"></h-icon>
</h-tag>
<h-tag text="标签二" color="#fff" style="background: purple;">
  <h-icon name="info" size="20" color="#fff"></h-icon>
</h-tag>
<h-tag text="标签三" style="background: gold;">
    <h-icon name="heart" size="20" color="red"></h-icon>
</h-tag>
<h-tag text="标签四" color="#fff" style="background: blue;">
    <h-icon name="star" size="20" color="aliceblue"></h-icon>
</h-tag>
<h-tag text="标签五" style="background: cyan;">
    <h-icon name="warning" size="20" color="#3F51B5"></h-icon>
</h-tag>
<h-tag text="标签六" style="background: #108ee9;">
    <h-icon name="sync" size="20" color="lightblue"></h-icon>
</h-tag>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Expand Copy

# 有提醒的Tag

<h-tips tips="person" type="info">
    <h-tag text="用户">
    </h-tag>
</h-tips>
<h-tips tips="info" color="#ccc">
    <h-tag text="标签二" color="#fff" style="background: purple;">
    </h-tag>
</h-tips>
<h-tips tips="标签三" color="gold">
    <h-tag text="标签三" style="background: gold;">
    </h-tag>
</h-tips>
<h-tips tips="标签四" type="error">
    <h-tag text="标签四" color="#fff" style="background: blue;">
    </h-tag>
</h-tips>
<h-tips tips="标签五" type="success">
    <h-tag text="标签五" style="background: cyan;">
    </h-tag>
</h-tips>
<h-tips tips="标签六" type="success">
    <h-tag text="标签六" style="background: #108ee9;">
    </h-tag>
</h-tips>
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
Expand Copy

# 参数说明

参数 说明 类型 可选值 默认值
text 标签文字 string - -
color 标签文字颜色 string - -
size 标签文字大小 string - -
Last Updated: 4/25/2023, 16:14:30

Card 卡片