title: 标签 Tag

标签 Tag

关于标记或选择的标签。

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

标签形状

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

:::img :::

示例代码

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

标签大小

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

:::img :::

示例代码

<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>

标签标识

通过name或cell属性设置标签的标识。

::: 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。

:::img :::

示例代码

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

标签颜色

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

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

实心标签bg-color默认值为主题色（theme-color），font-color默认值为#ffffff。

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

:::img :::

示例代码

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

图标标签

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

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

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

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

:::img :::

<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;
  }

标签属性

标签外部样式类

标签插槽

标签事件