如何设置标签Tag_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

进行标记和分类的小标签，用于标记事物的属性和维度，对事物进行分类。

属性

属性	类型	必填	默认值	说明
type	'outline' \| 'fill' \| 'fill-light'	否	'fill'	类型 outline：显示轮廓 fill：深色填充 fill-light：浅色填充
color	'primary' \| 'success' \| 'warn' \| 'danger'	否	'primary'	标签颜色 primary：蓝 success：绿 warn：黄 danger：红
icon	string	否	-	图标
className	string	否	-	类名

插槽

名称	说明
icon	图标插槽

样式类

类名	说明
amd-tag	整体样式
amd-tag-outline	显示轮廓样式
amd-tag-fill	深色填充样式
amd-tag-fill-light	浅色填充样式
amd-tag-primary	基本样式
amd-tag-success	成功样式
amd-tag-warn	警告样式
amd-tag-danger	危险样式
amd-tag-icon-container	图标区域样式
amd-tag-content	默认插槽内容样式

代码示例

基本使用

index.axml 的代码示例如下：

<view>
  <demo-block title="基础用法">
    <tag>标签</tag>
  </demo-block>
  <demo-block title="语义标签">
    <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="填充模式">
    <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="自定义图标">
    <view class="tag-list">
      <tag className="myTag" type="fill-light" icon="AlipayCircleFill">标签</tag>
      <tag className="myTag" type="fill-light" color="success" icon="AlipayCircleFill">标签</tag>
      <tag className="myTag" type="fill-light" color="warn" icon="AlipayCircleFill">标签</tag>
      <tag className="myTag" type="fill-light" color="danger" icon="AlipayCircleFill">标签</tag>
    </view>
  </demo-block>
</view>

index.js 的代码示例如下：

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

index.acss 的代码示例如下：

.myTag {
  margin-right: 16rpx;
}

index.json 的代码示例如下：

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