支付宝小程序引导组件 标签·Tag

突出利益点、以及属性说明的标签。

扫码体验

示例代码

{
 "defaultTitle": "Tag",
 "usingComponents": {
   "tag": "mini-ali-ui/es/tag/index",
   "list-item": "mini-ali-ui/es/list/list-item/index",
   "am-switch": "mini-ali-ui/es/am-switch/index"
 }
}
<view style="padding: 12px;">
  <view style="display: flex; justify-content: space-evenly;">
    <tag size="lg" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="primary">标签</tag>
    <tag size="lg" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="warning">标签</tag>
    <tag size="lg" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="danger">标签</tag>
    <tag size="lg" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="success">标签</tag>
  </view>
  <view style="display: flex; justify-content: space-evenly; margin-top: 20px;">
    <tag size="sm" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="primary">标签</tag>
    <tag size="sm" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="warning">标签</tag>
    <tag size="sm" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="danger">标签</tag>
    <tag size="sm" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="success">标签</tag>
  </view>
  <view style="padding: 20px 10px;">
    <list-item>
      图标
      <am-switch slot="extra" onChange="setInfo" data-name="useIcon" checked="{{useIcon}}"/>
    </list-item>
    <list-item>
      线框样式
      <am-switch slot="extra" onChange="setInfo" data-name="ghost" checked="{{ghost}}"/>
    </list-item>
  </view>
</view>  

 Page({
  data: {},
  onLoad() {},
  setInfo(e) {
    const { dataset } = e.target;
    const { name } = dataset;
    this.setData({
      [name]: e.detail.value,
    });
  },
});

属性

slots