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 data-seed="logId">通用标签</Tag>
  10.     <Tag selected>默认选中</Tag>
  11.     <Tag disabled>失效标签</Tag>
  12.     <Tag onChange={onChange}>事件回调</Tag>
  13.     <Tag closable onClose={() => {
  14.       console.log('onClose');
  15.     }} afterClose={() => {
  16.       console.log('afterClose');
  17.     }}
  18.     >
  19.       可关闭标签
  20.     </Tag>
  21.     <Tag small>小号标签</Tag>
  22.   </div>
  23. , 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 ( 适用平台：WEB、React-Native )

成员说明类型默认值
small小号标签Booleanfalse
disabled是否不可用Booleanfalse
closable是否关闭（非 disabled small 状态）Booleanfalse
selected是否默认选中Booleanfalse
onChange切换选中回调函数(selected: bool): void无
onClose点关闭时的回调函数(): void无
afterClose关闭后的回调(): void无