Tag 标签

定义／Definition

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

规则 / Rule

移动端标签文字必须显示完全，标签内允许文字换行；
只读型样式设计避免有点击感

代码演示

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

import { Tag, WingBlank, WhiteSpace } from 'antd-mobile';
ReactDOM.render(
  <div className="tag-container">
    <WhiteSpace />
    <WingBlank size={20}>
      <Tag type="action" size="large">大号标签</Tag>
      <WhiteSpace />
      <Tag type="action" size="small">小号标签</Tag>
      <WhiteSpace />
      <Tag type="read" size="large">只读标签大</Tag>
      <WhiteSpace />
      <Tag type="read" size="small">只读标签小</Tag>
      <WhiteSpace />
    </WingBlank>
    <WhiteSpace />
  </div>
, mountNode);

标签失效状态

添加 disabled 属性即可让标签处于不可用状态，同时标签样式也会改变。

import { Tag, WingBlank, WhiteSpace } from 'antd-mobile';
ReactDOM.render(
  <div className="tag-container">
    <WhiteSpace />
    <WingBlank size={20}>
      <Tag type="action" disabled>不可点大标签</Tag>
      <WhiteSpace />
      <Tag type="action" size="small" disabled>不可点小标签</Tag>
      <WhiteSpace />
    </WingBlank>
    <WhiteSpace />
  </div>
, mountNode);

可关闭标签

添加 closeable 属性可以让标签项消失，当手势点击到整个标签的热区时，该标签项就被删除。

import { Tag, WingBlank, WhiteSpace } from 'antd-mobile';
function onClose() {
  console.log('tag closing');
}
function afterClose() {
  console.log('tag closed');
}
function onChange(selected) {
  console.log(`tag selected: ${selected}`);
}
ReactDOM.render(
  <div className="tag-container">
    <WhiteSpace />
    <WingBlank size={20}>
      <Tag type="action" size="large" closable>可关闭标签</Tag>
      <WhiteSpace />
      <Tag
        type="action"
        size="large"
        closable
        onClose={onClose}
        onChange={onChange}
        afterClose={afterClose}
      >事件</Tag>
    </WingBlank>
    <WhiteSpace />
  </div>
, mountNode);

标签选中项

添加 selected 属性即可让标签处于被选中状态。

import { Tag, WingBlank, WhiteSpace } from 'antd-mobile';
ReactDOM.render(
  <div className="tag-container">
    <WhiteSpace />
    <WingBlank size={20}>
      <Tag type="action" size="large" selected>大号标签默认选中</Tag>
      <WhiteSpace />
      <Tag type="action" size="small" selected>小号标签默认选中</Tag>
      <WhiteSpace />
    </WingBlank>
    <WhiteSpace />
  </div>
, mountNode);

API

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

Tag标签

Tag 标签

定义／Definition

规则 / Rule

代码演示

API