标签 Tag

关于标记或选择的标签。

TIP

建议tag组件的父容器使用flex布局。

标签形状

通过shape属性设置标签形状为square(方形标签)或circle(半圆标签)。默认形状为square(默认)。

标签形状

示例代码

<l-tag shape="square">方形标签</l-tag>
<l-tag shape="circle">半圆标签</l-tag>

标签大小

通过size属性设置标签大小为super-mini(超小)、mini(小)、medium(中)、large(大)。默认值为mini(默认)。

标签大小

示例代码

<l-tag size="mini">小标签</l-tag>
<l-tag size="medium">中标签</l-tag>
<l-tag size="large">大标签</l-tag>

标签类型

通过type属性设置标签的类型。默认值为touch

标签的类型第一类为touch,这类标签主要便于点击,同时具有最小宽度,例如电商小程序sku的场景。

第二类为reading,这类标签主要用于展示阅读,宽度由文本长度所决定,例如展示商品的标签。

示例代码

<l-tag size="medium" type="touch">标签</l-tag>
<l-tag size="mini" type="reading">标签</l-tag>

标签标识

通过namecell属性设置标签的标识。

TIP

标签标示作为tag的属性随点击事件会返回对应的标示。开发者可根据不同的标示类型选择使用name或者cell

示例代码

<l-tag name="name" size="medium" type="touch">标签</l-tag>

设置标签高度

通过height属性设置标签高度。单位为rpx。

示例代码

<l-tag height="60">标签</l-tag>

镂空标签

通过plain属性设置标签是否为镂空标签。属性值为true时为镂空标签。默认值为false

镂空标签

示例代码

<l-tag plain="{{true}}">镂空标签</l-tag>

标签颜色

标签为实心标签时通过bg-color属性设置标签背景颜色,font-color属性设置文字颜色。

标签为镂空标签时通过font-color属性设置字体颜色(镂空标签边框颜色与字体颜色一致)。

实心标签bg-color默认值为主题色(theme-color),font-color默认值为#ffffff。

镂空标签font-color默认值为主题色(thmen-color)。

标签颜色

示例代码

<l-tag bg-color="#333">自定义标签颜色</l-tag>
<l-tag plain="{{true}}" font-color="#333">自定义标签颜色</l-tag>

图标标签

通过icon属性设置标签文字前的icon名称。

通过icon-sizeicon-color属性设置icon大小和颜色。其他关于icon用法可参考icon组件文档

通过location属性可设置icon的位置,默认值为left

通过image属性设置标签文字前的图片。l-image-class自定义设置图片样式。

图标标签

<l-tag icon-size="20" icon="warning">图标标签</l-tag>
<l-tag icon-size="20" icon="warning" location="right">图标标签</l-tag>
<l-tag image="../image.png">图标标签</l-tag>

标签禁用

通过disable属性设置标签的禁用。

示例代码

<l-tag disable="{{true}}">禁用标签</l-tag>

标签是否可选中

通过select属性设置标签是否可以选中,属性值为true时为标签为选中状态,设置false为未选中状态。

通过l-select-class属性传入外部样式类更改标签选中时的样式。

TIP

仅存在选中和未选中两种状态时建议使用select属性进行样式的切换,如果状态较为复杂,建议使用l-class进行手动切换样式。

示例代码

<l-tag plain="{{true}}" select="{{select}}" l-select-class="select" bindtap="onSelect">可选中标签</l-tag>
Page({
  data:{
    select: fasle
  },
  onSelect(){
    this.setData({
      select: true
    })
  }
})
  /* wxss文件 */
  .select{
    background:#333 !important;
    color:#fff !important;
  }

标签属性(Tag Attributes)

参数 说明 类型 可选值 默认值
size 标签尺寸 String large/medium/mini/super-mini medium
shape 标签形状 String square/circle square
type 标签类型 String reading/touch touch
disable 标签是否禁用 Boolean ----- false
plain 标签是否镂空 Boolean ----- false
bg-color 实心标签背景颜色 String ----- ---
font-color 镂空标签字体颜色 String ----- ---
name 标签标识 String ----- ---
cell 标签标识 Object ----- ---
select 标签是否可选中 Boolean ----- false
icon icon名称 String ----- ---
icon-size icon大小 Number ----- ---
icon-color icon颜色 String ----- ---
image 图片路径 String ----- ---
location 图标位置 String left/right left

标签外部样式类 (Tag ExternalClasses)

外部样式类名 说明 备注
l-class 覆盖未选中标签区域的外部样式类 ---
l-select-class 覆盖已选中标签区域的外部样式类 ---
l-image-class 覆盖自定义图片区域的外部样式类 ---

标签插槽(Tag Solt)

插槽名称 说明 备注
- 自定义标签显示内容 ---

标签事件(Tag Events)

事件名称 说明 返回值 备注
bind:lintap 点击标签时触发的事件,返回当前标签的标示和选中状态 {name,cell,select} --------
    上次更新: 2019-12-4 21:07:02