Tag 标签

进行标记和分类的小标签。

何时使用#

用于标记事物的属性和维度。
进行分类。

API#

参数	说明	类型	可选值	默认值
closable	标签是否可以关闭	boolean		false
onClose	关闭时的回调	function		无
afterClose	动画关闭后的回调	function		无
color	标签的色彩	string	blue green yellow red	无

代码演示

import { Tag } from 'antd';

function onClose(e) {
  console.log(e);
}

ReactDOM.render(<div>
  <Tag>标签一</Tag>
  <Tag>标签二</Tag>
  <Tag closable onClose={onClose}>标签三</Tag>
  <Tag><a href="https://www.alipay.com/" target="_blank">标签四（链接）</a></Tag>
</div>, mountNode);

基本

简单的标签展示，添加 closable 表示可关闭。

import { Tag, Button } from 'antd';

let index = 2;
const App = React.createClass({
  getInitialState() {
    return {
      tags: [
        { key: 1, name: '标签一' },
        { key: 2, name: '标签二' },
      ],
    };
  },
  handleClose(key) {
    const tags = [...this.state.tags].filter(tag => (tag.key !== key) && tag);
    console.log(tags);
    this.setState({ tags });
  },
  addTag() {
    const tags = [...this.state.tags];
    index += 1;
    tags.push({ key: index, name: `新标签${index}` });
    this.setState({ tags });
  },
  render() {
    return (
      <div>
        {this.state.tags.map(tag =>
          <Tag key={tag.key} closable afterClose={this.handleClose.bind(this, tag.key)}>{tag.name}</Tag>
        )}
        <div>
          <Button onClick={this.addTag}>添加标签</Button>
        </div>
      </div>
    );
  }
});

ReactDOM.render(<App />, mountNode);

数据生成标签

用数组生成一组标签。

使用 afterClose 而不是 onClose，删除时有动画效果。

import { Tag } from 'antd';

ReactDOM.render(<div>
  <Tag closable color="blue">蓝色</Tag>
  <Tag closable color="green">绿色</Tag>
  <Tag closable color="yellow">黄色</Tag>
  <Tag closable color="red">红色</Tag>
</div>, mountNode);

各种类型

四种颜色的标签。