Tag 标签

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

规则

  • 标签文字必须显示完全。

代码演示

标签类型

标签类型分为选择型标签和只读型标签，只读型标签无交互过程，仅展示内容。 

  1. import { Tag } from 'antd-mobile';
  3. function onChange(selected) {
  4.   console.log(`tag selected: ${selected}`);
  5. }
  7. ReactDOM.render(
  8.   <div className="tag-container">
  9.     <Tag>通用标签</Tag>
  10.     <Tag selected>默认选中</Tag>
  11.     <Tag disabled>失效标签</Tag>
  12.     <Tag onChange={onChange}>事件回调</Tag>
  13.   </div>
  14. , mountNode);
  1. .tag-container{
  2.   display: flex;
  3.   padding-top: 0.18rem;
  4.   flex-direction: row;
  5.   flex-wrap: wrap;
  6. }
  7. .tag-container > div {
  8.   margin-left: 0.18rem;
  9.   margin-bottom: 0.18rem;
  10. }

Tag标签 - 图1

API

成员说明类型默认值
typeTag 类型，可选值为action(操作)或 read(只读)Stringread
sizeTag 大小，可选值为large 或 smallStringlarge
closable是否可关闭, type='action' & size='large'Booleanfalse
disabled是否不可用Booleanfalse
onChange切换选中回调函数Function无
onClose关闭前的回调Function无
afterClose关闭后的回调Function无