支付宝小程序引导组件 标签·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