Tag 标签

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

何时使用

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

代码演示

基本

基本标签的用法，可以通过添加 closable 变为可关闭标签。可关闭标签具有 onClose afterClose 两个事件。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag } from 'choerodon-ui';
​
function log(e) {
  console.log(e);
}
​
function preventDefault(e) {
  e.preventDefault();
  console.log('Clicked! But prevent default.');
}
​
ReactDOM.render(
  <div>
    <Tag>Tag 1</Tag>
    <Tag>
      <a href="https://github.com/choerodon/choerodon-ui">Link</a>
    </Tag>
    <Tag closable onClose={log}>
      Tag 2
    </Tag>
    <Tag closable onClose={preventDefault}>
      Prevent Default
    </Tag>
  </div>,
  document.getElementById('container'),
);

多彩标签

我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。

import React from 'react';
import ReactDOM from 'react-dom';
import { Tag } from 'choerodon-ui';
​
ReactDOM.render(
  <div>
    <h4 style={{ marginBottom: 16 }}>Presets:</h4>
    <div>
      <Tag color="magenta">magenta</Tag>
      <Tag color="red">red</Tag>
      <Tag color="volcano">volcano</Tag>
      <Tag color="orange">orange</Tag>
      <Tag color="gold">gold</Tag>
      <Tag color="lime">lime</Tag>
      <Tag color="green">green</Tag>
      <Tag color="cyan">cyan</Tag>
      <Tag color="blue">blue</Tag>
      <Tag color="geekblue">geekblue</Tag>
      <Tag color="purple">purple</Tag>
    </div>
    <h4 style={{ margin: '16px 0' }}>Custom:</h4>
    <div>
      <Tag color="#f50">#f50</Tag>
      <Tag color="#2db7f5">#2db7f5</Tag>
      <Tag color="#87d068">#87d068</Tag>
      <Tag color="#108ee9">#108ee9</Tag>
    </div>
  </div>,
  document.getElementById('container'));
​

动态添加和删除

用数组生成一组标签，可以动态添加和删除，通过监听删除动画结束的事件 afterClose 实现。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag, Input, Tooltip, Icon } from 'choerodon-ui';
​
class EditableTagGroup extends React.Component {
  state = {
    tags: ['Unremovable', 'Tag 2', 'Tag 3'],
    inputVisible: false,
    inputValue: '',
  };
​
  handleClose = (removedTag) => {
    const tags = this.state.tags.filter(tag => tag !== removedTag);
    console.log(tags);
    this.setState({ tags });
  }
​
  showInput = () => {
    this.setState({ inputVisible: true }, () => this.input.focus());
  }
​
  handleInputChange = (e) => {
    this.setState({ inputValue: e.target.value });
  }
​
  handleInputConfirm = () => {
    const state = this.state;
    const inputValue = state.inputValue;

可选择

可通过 CheckableTag 实现类似 Checkbox 的效果，点击切换选中效果。

该组件为完全受控组件，不支持非受控用法。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag } from 'choerodon-ui';
​
const { CheckableTag } = Tag;
​
class MyTag extends React.Component {
  state = { checked: true };
​
  handleChange = checked => {
    this.setState({ checked });
  };
​
  render() {
    return (
      <CheckableTag {...this.props} checked={this.state.checked} onChange={this.handleChange} />
    );
  }
}
​
ReactDOM.render(
  <div>
    <MyTag>Tag1</MyTag>
    <MyTag>Tag2</MyTag>
    <MyTag>Tag3</MyTag>
  </div>,
  document.getElementById('container'),
);

热门标签

选择你感兴趣的话题。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag } from 'choerodon-ui';
​
const CheckableTag = Tag.CheckableTag;
​
const tagsFromServer = ['Movies', 'Books', 'Music', 'Sports'];
​
class HotTags extends React.Component {
  state = {
    selectedTags: [],
  };
​
  handleChange(tag, checked) {
    const { selectedTags } = this.state;
    const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
    console.log('You are interested in: ', nextSelectedTags);
    this.setState({ selectedTags: nextSelectedTags });
  }
​
  render() {
    const { selectedTags } = this.state;
    return (
      <div>
        <h6 style={{ marginRight: 8, display: 'inline' }}>Categories:</h6>
        {tagsFromServer.map(tag => (
          <CheckableTag
            key={tag}

API

Tag

Tag.CheckableTag