Tag

Properties

Property	Type	Required	Default value	Description
type	'outline' | 'fill' | 'fill-light'	No	'fill'	Display type. outline: Displays an outline. fill: Dark fill. fill-light: Light fill.
color	'primary' | 'success' | 'warn' | 'danger'	No	'primary'	Tag color. primary: Blue success: Green warn: Yellow danger: Red
icon	string	No	-	The icon.
className	string	No	-	The class name.

Slots

Name	Description
icon	The icon slot.

Style classes

Class name	Description
amd-tag	Overall tag style.
amd-tag-outline	Outline style.
amd-tag-fill	Dark fill style.
amd-tag-fill-light	Light fill style.
amd-tag-primary	Primary style.
amd-tag-success	Success style.
amd-tag-warn	Warning style.
amd-tag-danger	Danger style.
amd-tag-icon-container	Icon area style.
amd-tag-content	Default slot content style.

Code examples

Basic usage

Sample index.axml:

<view>
  <demo-block title="Basic Usage">
    <tag>Tag</tag>
  </demo-block>
  <demo-block title="Semantic Tags">
    <view class="tag-list">
      <tag className="myTag">default</tag>
      <tag className="myTag" color="success">success</tag>
      <tag className="myTag" color="warn">warn</tag>
      <tag className="myTag" color="danger">danger</tag>
    </view>
  </demo-block>
  <demo-block title="Fill Patterns">
    <view class="tag-list">
      <tag className="myTag" type="fill">fill</tag>
      <tag className="myTag" type="outline">outline</tag>
      <tag className="myTag" type="fill-light">fill-light</tag>
    </view>
  </demo-block>
  <demo-block title="Custom Icons">
    <view class="tag-list">
      <tag className="myTag" type="fill-light" icon="AlipayCircleFill">Tag</tag>
      <tag className="myTag" type="fill-light" color="success" icon="AlipayCircleFill">Tag</tag>
      <tag className="myTag" type="fill-light" color="warn" icon="AlipayCircleFill">Tag</tag>
      <tag className="myTag" type="fill-light" color="danger" icon="AlipayCircleFill">Tag</tag>
    </view>
  </demo-block>
</view>

Sample index.js:

Page({
  data: {
    image:
      'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ',
  },
});

Sample index.acss:

.myTag {
  margin-right: 16rpx;
}

Sample index.json:

{
  "defaultTitle": "Tag",
  "usingComponents": {
    "tag": "antd-mini/es/Tag/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}