支付寶小程序引導組件 標簽·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