Tag 标签

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

何时使用

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

API

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

组件演示

var Tag = antd.Tag;

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

React.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 表示可关闭。

var Tag = antd.Tag;

React.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'));

四种颜色的标签。