# tui-tag 标签

介绍

可自定义大小,设置字体大小,圆角,镂空等。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiTag from "@/components/thorui/tui-tag/tui-tag"
export default {
	components:{
		tuiTag
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 升级中 升级中 升级中 升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-tag": "/components/thorui/tui-tag/tui-tag"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基础用法

通过 type 属性控制标签颜色。

<tui-tag type="black">实心标签</tui-tag>
<tui-tag type="white">实心标签</tui-tag>
<tui-tag type="danger">实心标签</tui-tag>
<tui-tag type="warning">实心标签</tui-tag>
设置大小

通过 padding 属性控制标签大小。

<tui-tag type="black" padding="12rpx">实心标签</tui-tag>
<tui-tag type="white" padding="20rpx 30rpx">实心标签</tui-tag>
<tui-tag type="danger" padding="20rpx 30rpx">实心标签</tui-tag>
<tui-tag type="warning" padding="8rpx" size="24rpx">实心标签</tui-tag>
空心样式

通过 plain 属性设置为空心样式。

<tui-tag type="black" plain>实心标签</tui-tag>
<tui-tag type="white" plain>实心标签</tui-tag>
<tui-tag type="danger" plain>实心标签</tui-tag>
<tui-tag type="warning" plain>实心标签</tui-tag>
标签形状

通过 shape 属性设置标签形状,支持 circle(圆角)square(默认方形)circleLeft(左圆角)circleRight(右圆角)

<tui-tag type="black">实心标签</tui-tag>
<tui-tag type="white" shape="circle">实心标签</tui-tag>
<tui-tag type="danger" shape="circleLeft">实心标签</tui-tag>
<tui-tag type="warning" shape="circleRight">实心标签</tui-tag>

# Slots

名称 说明
default 标签内显示内容,可插入图片

# Props

参数 类型 说明 默认值
type String 样式类型,可传入[primary, white, danger, warning, green, gray,black,light-blue,light-brownish,light-orange,light-green]等 primary
padding String 内边距值 16rpx 26rpx
margin String 外边距值 0
size String 文字大小 单位rpx 28rpx
shape String 形状:circle, square,circleLeft,circleRight square
plain Boolean 是否空心 false
hover Boolean 点击效果 false
scaleMultiple Number 缩放倍数 1
originLeft Boolean 元素的基点位置0 center false
originRight Boolean 元素的基点位置100% center false
index Number 索引 0

# Events

事件名 说明 回调参数
click 点击事件,点击标签时触发 {index: Number}

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码