HIPS-UNI-UI

# Tag 标签

# 使用指南

import Tag from '@hips/uni-ui/lib/tag';

export default {
  components: {
    'hips-tag': Tag,
  },
};
1
2
3
4
5
6
7

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-tag>标签内容</hips-tag>
<hips-tag type="success">
  标签内容
</hips-tag>
<hips-tag type="error">
  标签内容
</hips-tag>
<hips-tag type="warn">
  标签内容
</hips-tag>
1
2
3
4
5
6
7
8
9
10

# 设定大小

<hips-tag size="large">
  标签内容
</hips-tag>
<hips-tag>
  标签内容
</hips-tag>
<hips-tag size="small">
  标签内容
</hips-tag>
<hips-tag size="mini">
  标签内容
</hips-tag>
1
2
3
4
5
6
7
8
9
10
11
12

# 空心样式

<hips-tag plain>
  标签内容
</hips-tag>
<hips-tag plain type="success">
  标签内容
</hips-tag>
<hips-tag plain type="error">
  标签内容
</hips-tag>
<hips-tag plain type="warn">
  标签内容
</hips-tag>
1
2
3
4
5
6
7
8
9
10
11
12

# 标签样式

<hips-tag mark>
  标签内容
</hips-tag>
<hips-tag mark type="success">
  标签内容
</hips-tag>
<hips-tag mark type="error">
  标签内容
</hips-tag>
<hips-tag mark type="warn">
  标签内容
</hips-tag>
1
2
3
4
5
6
7
8
9
10
11
12

# 圆角

<hips-tag round>
  标签内容
</hips-tag>
<hips-tag round type="success">
  标签内容
</hips-tag>
<hips-tag round type="error">
  标签内容
</hips-tag>
<hips-tag round type="warn">
  标签内容
</hips-tag>
1
2
3
4
5
6
7
8
9
10
11
12

# 自定义颜色

<hips-tag color="blue" bg-color="white">
  标签内容
</hips-tag>
1
2
3

# 关闭按钮

<hips-tag closeable>
  标签内容
</hips-tag>
<hips-tag closeable type="success">
  标签内容
</hips-tag>
<hips-tag closeable type="error">
  标签内容
</hips-tag>
<hips-tag closeable type="warn">
  标签内容
</hips-tag>
1
2
3
4
5
6
7
8
9
10
11
12

# Tag API

参数 说明 类型 可选值 默认值
closeable 是否显示关闭按钮 Boolean - false
type 类型 String ['primary','success','error','warn'] 5
round 是否圆角 Boolean - false
mark 是否为标记类型 Boolean - false
plain 是否镂空 Boolean - false
color 自定义文字颜色 String - -
bg-color 自定义背景颜色 String - -
size 大小 String ['default','small','large','mini'] default

# Tag Events

名称 说明
close 点击关闭按钮触发

# 样式变量

变量名 说明 默认值
tag-primary-bg-color type=primary 时背景颜色 #1F8CEB
tag-primary-border-color type=primary 时边框颜色 #1F8CEB
tag-primary-color type=primary 时文字颜色 white
tag-success-bg-color type=success 时背景颜色 #48D2A0
tag-success-border-color type=success 时边框颜色 #48D2A0
tag-success-color type=success 时文字颜色 white
tag-error-bg-color type=error 时背景颜色 #F96F68
tag-error-border-color type=error 时边框颜色 #F96F68
tag-error-color type=error 时文字颜色 white
tag-warn-bg-color type=warn 时背景颜色 #F5A623
tag-warn-border-color type=warn 时边框颜色 #F5A623
tag-warn-color type=warn 时文字颜色 white
tag-plain-bg-color plain=true 时背景颜色 white
tag-primary-plain-color type=primary plain=true 时文字颜色 #1F8CEB
tag-success-plain-color type=success plain=true 时文字颜色 #48D2A0
tag-error-plain-color type=error plain=true 时文字颜色 #F96F68
tag-warn-plain-color type=warn plain=true 时文字颜色 #F5A623
tag-small-font-size size=small 时文字大小 20rpx
tag-large-font-size size=large 时文字大小 28rpx
tag-mini-font-size size=mini 时文字大小 16rpx
tag-default-font-size 默认文字大小 24rpx
tag-border-radius 边框弧度 50rpx

注意

Stepper 步进器