Tag 标签

概述

Tag 标签，用于标记或分类。

引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "标签",
  "usingComponents": {
    "fui-tag": "/components/firstui/fui-tag/fui-tag"
  }
}

第二种：在根目录app.json文件中全局引入

"usingComponents": {
    "fui-tag": "components/firstui/fui-tag/fui-tag"
}

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 text 属性设置标签文本，type 属性设置标签类型。

<fui-tag text="标签一"></fui-tag>
<fui-tag text="标签二" type="danger"></fui-tag>

注意：可通过css变量全局修改按钮type类型对应的颜色，css变量参考 自定义主题。

浅色调

通过 theme 属性设置主题，其中 dark（默认值，深色）、light（浅色）、plain（空心）。background 属性为空时生效。

<fui-tag text="标签二" type="danger" theme="light"></fui-tag>
<fui-tag text="标签三" type="success" theme="light"></fui-tag>

自定义颜色

通过 background 属性设置标签背景颜色，color 属性设置字体颜色。自定义 background 背景颜色后，type、theme 属性失效。

<fui-tag text="标签二" background="#CCCCCC" color="#fff"></fui-tag>

Slots

插槽名称	说明
default	标签内自定义展示内容

Props

属性名	类型	说明	默认值	其他说明
text	String	标签显示文本	-	-
type	String	标签类型，可选值：primary，success，warning，danger，purple	primary	-
theme	String	标签主题，可选值：dark、light、plain。background为空时生效	dark	-
background	String	标签背景色。如果设置背景则type、theme失效	-	-
isBorder V2.0.0+	Boolean	是否需要边框	true	-
borderColor	String	标签边框颜色	-	设置background值后生效
color	String	标签字体颜色	-	设置background值后生效
size	Number, String	标签字体大小，单位rpx	24	-
scaleRatio	Number	标签缩放比例	1	-
highlight	Boolean	是否有点击效果	false	-
radius	Number, String	标签圆角值，单位rpx	8	-
padding	String	padding值	16rpx 32rox	-
margin	String	margin值	0	-
index	Number	列表中的索引值	0	-

Events

事件名	说明	回调参数
bind:click	点击标签时触发	event.detail = {   index:索引值 }

示例预览