Tag 标签

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

何时使用#

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

API#

参数	说明	类型	可选值	默认值
href	链接的地址，会传给 a 标签	string		false
closable	标签是否可以关闭	boolean		false
onClose	组合时根据此项判定checked	function		无
color	标签的色彩	string	blue green yellow red	无

代码演示

import { Tag } from 'antd';

function onClose(e) {
  console.log(this.props.children);
}

ReactDOM.render(<div>
  <Tag>标签一</Tag>
  <Tag>标签二</Tag>
  <Tag closable onClose={onClose}>标签三</Tag>
  <Tag href="http://www.baidu.com">标签四（链接）</Tag>
</div>, document.getElementById('components-tag-demo-basic'));

基本

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

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>, document.getElementById('components-tag-demo-colorful'));

各种类型

四种颜色的标签。