标签 Tag

关于标记或选择的标签。

标签形状

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

示例代码

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

标签大小

通过size属性设置标签大小为mini（小）和large（大）。默认值为mini(默认)。

示例代码

<l-tag size="mini">小标签</l-tag>
<l-tag size="large">大标签</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-name属性设置标签文字前的icon名称。

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

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

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

<l-tag icon-size="20" icon-name="warning">图标标签</l-tag>
<l-tag icon-size="20" icon-name="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属性传入外部样式类更改标签选中时的样式。

示例代码

<l-tag plain="{{true}}" select="{{true}}" l-select-class="select">可选中标签</l-tag>

  /* wxss文件 */
  .select{
    background:#333 !important;
    color:#fff !important;
  }

标签属性（Tag Attributes）

标签事件（Tag Events）