Tag 标签

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

规则

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

代码演示

基本

Tag 分为两种类型：selectable / readonly, 后者是无交互的，尺寸更小，通常用于内容展示。 

  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">Basic</Tag>
  10.     <Tag selected>Selected</Tag>
  11.     <Tag disabled>Disabled</Tag>
  12.     <Tag onChange={onChange}>Callback</Tag>
  13.     <Tag closable
  14.       onClose={() => {
  15.         console.log('onClose');
  16.       }}
  17.       afterClose={() => {
  18.         console.log('afterClose');
  19.       }}
  20.     >
  21.       Closable
  22.     </Tag>
  23.     <Tag small>Small and Readonly</Tag>
  24.   </div>
  25.   , mountNode);
  1. .tag-container{
  2.   display: flex;
  3.   padding-top: 9px;
  4.   flex-direction: row;
  5.   flex-wrap: wrap;
  6. }
  7. .tag-container > div {
  8.   margin-left: 9px;
  9.   margin-bottom: 9px;
  10. }

Tag标签 - 图1

API

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