Skip to content

Latest commit

 

History

History
55 lines (47 loc) · 1.1 KB

basic.md

File metadata and controls

55 lines (47 loc) · 1.1 KB
order title
0
zh-CN en-US
基本
Basic

zh-CN

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

en-US

There are two kinds of Tag, selectable and readonly type, the latter is a smaller tag without interactive behavior, which is typically used for display content.

import { Tag } from 'antd-mobile';

function onChange(selected) {
  console.log(`tag selected: ${selected}`);
}

ReactDOM.render(
  <div className="tag-container">
    <Tag data-seed="logId">Basic</Tag>
    <Tag selected>Selected</Tag>
    <Tag disabled>Disabled</Tag>
    <Tag onChange={onChange}>Callback</Tag>
    <Tag closable
      onClose={() => {
        console.log('onClose');
      }}
      afterClose={() => {
        console.log('afterClose');
      }}
    >
      Closable
    </Tag>
    <Tag small>Small and Readonly</Tag>
  </div>
  , mountNode);
.tag-container{
  display: flex;
  padding-top: 0.18rem;
  flex-direction: row;
  flex-wrap: wrap;
}
.tag-container > div {
  margin-left: 0.18rem;
  margin-bottom: 0.18rem;
}