标签 Tag

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

    标签大小

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

    标签大小

    示例代码

    1. <l-tag size="mini">小标签</l-tag>
    2. <l-tag size="large">大标签</l-tag>

    设置标签高度

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

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

      示例代码

      标签颜色

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

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

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

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

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

      图标标签

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

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

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

      图标标签

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

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

      示例代码

      标签是否可选中

      通过select属性设置标签是否可以选中,属性值为true时为可选中按钮。默认值为false

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

      1. <l-tag plain="{{true}}" select="{{true}}" l-select-class="select">可选中标签</l-tag>
      1. /* wxss文件 */
      2. .select{
      3. background:#333 !important;
      4. }

      标签属性(Tag Attributes)

      事件名称说明返回值备注
      bind:lintap点击标签时触发的事件,返回当前标签的名称和选中状态{name,select}————