标签 Tag
通过属性设置标签形状为square
(方形标签)或circle
(半圆标签)。默认形状为square
(默认)。
标签大小
通过size
属性设置标签大小为mini
(小)和large
(大)。默认值为mini
(默认)。
示例代码
<l-tag size="mini">小标签</l-tag>
<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)。
<l-tag bg-color="#333">自定义标签颜色</l-tag>
<l-tag plain="{{true}}" font-color="#333">自定义标签颜色</l-tag>
图标标签
通过icon-name
属性设置标签文字前的icon名称。
通过location
属性可设置icon的位置,默认值为left
。
通过属性设置标签文字前的图片。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
属性设置标签的禁用。
示例代码
标签是否可选中
通过select
属性设置标签是否可以选中,属性值为true
时为可选中按钮。默认值为false
。
通过l-select-class
属性传入外部样式类更改标签选中时的样式。
<l-tag plain="{{true}}" select="{{true}}" l-select-class="select">可选中标签</l-tag>
/* wxss文件 */
.select{
background:#333 !important;
}
标签属性(Tag Attributes)
事件名称 | 说明 | 返回值 | 备注 |
---|---|---|---|
bind:lintap | 点击标签时触发的事件,返回当前标签的名称和选中状态 | {name,select} | ———— |