Tag

2021-07-06 11:36

You can use the tag component to highlight the information, such as the warning.

Sample code

See the sample codes in different languages:

.json

copy

{
 "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"
 }
}

.axml

copy

<view style="padding: 12px;">

  <view style="display: flex; justify-content: space-evenly;">

    <tag size="lg" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="primary">tag</tag>

    <tag size="lg" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="warning">tag</tag>

    <tag size="lg" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="danger">tag</tag>

    <tag size="lg" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="success">tag</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>

    <tag size="sm" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="warning">tag</tag>

    <tag size="sm" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="danger">tag</tag>

    <tag size="sm" iconType="{{useIcon ? 'qr' : ''}}" ghost="{{ghost}}" type="success">tag</tag>

  </view>

  <view style="padding: 20px 10px;">

    <list-item>

      icon

      <am-switch slot="extra" onChange="setInfo" data-name="useIcon" checked="{{useIcon}}"/>

    </list-item>

    <list-item>

      the style of the wireframe

      <am-switch slot="extra" onChange="setInfo" data-name="ghost" checked="{{ghost}}"/>

    </list-item>

  </view>

</view>

.js

copy

 Page({

  data: {},

  onLoad() {},

  setInfo(e) {

    const { dataset } = e.target;

    const { name } = dataset;

    this.setData({

      [name]: e.detail.value,

    });

  },

});

Parameters

Property	Type	Description
className	String	Class name.
type	String	Tag type. Valid values are: `primary` `success` `warning` `danger` The default value is `primary`.
iconType	String	Icon type. The icon is a thumbnail image in the tag.
size	String	Tag size. Valid values are: `lg`: large `sm`: small The default value is `lg`.
ghost	Boolean	An indicator of whether the tag has a frame. The default value is `false`.

slot

Name	Description
extra	The slot that is used to display texts in the tag.