Tag 标签

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

规则

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

代码演示

基本

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

  1. import { Tag } from 'antd-mobile';
  2. function onChange(selected) {
  3. console.log(`tag selected: ${selected}`);
  4. }
  5. ReactDOM.render(
  6. <div className="tag-container">
  7. <Tag data-seed="logId">Basic</Tag>
  8. <Tag selected>Selected</Tag>
  9. <Tag disabled>Disabled</Tag>
  10. <Tag onChange={onChange}>Callback</Tag>
  11. <Tag closable
  12. onClose={() => {
  13. console.log('onClose');
  14. }}
  15. afterClose={() => {
  16. console.log('afterClose');
  17. }}
  18. >
  19. Closable
  20. </Tag>
  21. <Tag small>Small and Readonly</Tag>
  22. </div>
  23. , 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