import React, {Component} from 'react';
import {Tag} from 'hana-ui';

/**
 * @en
 * Base
 *
 * Using prop `hasClose` to show the close button
 * Using prop `onClose` to control
 *
 * @cn
 * 基础
 *
 * 使用`hasClose`属性显示关闭按钮，`onClose`属性来控制点击事件。
 */
export default class ExampleBase extends Component {

  state = {
    label: ''
  }

  render() {
    return (
      <div>
        <Tag>a tag</Tag>
        <Tag hasClose onClose={(e, label) => this.setState({label})}>tag with close</Tag>
        <Tag hasClose onClose={(e, label) => this.setState({label})}>another tag</Tag>
        <Tag hasClose onClose={(e, label) => this.setState({label})}>another tag2</Tag>
        <p style={{marginTop: 10}}>You want to close <b className="sign">{this.state.label}</b></p>
      </div>
    );
  }
}

使用hasClose属性显示关闭按钮，onClose属性来控制点击事件。

import React, {Component} from 'react';
import {Tag} from 'hana-ui';

/**
 * @en
 * Size
 *
 * Using prop `size` to modify the tag's size
 *
 * @cn
 * 尺寸
 *
 * 使用`size`来改变标签的尺寸。
 */
export default class ExampleBase extends Component {

  state = {
    label: ''
  }

  render() {
    return (
      <div>
        <Tag size="small">small</Tag>
        <Tag size="large">large</Tag>
      </div>
    );
  }
}

使用size来改变标签的尺寸。

import React, {Component} from 'react';
import {Tag} from 'hana-ui';

/**
 * @en
 * Colorful
 *
 * Using prop `color` to change the tag's color
 *
 * @cn
 * 溢彩
 *
 * 使用`color`来改变标签的颜色。
 */
export default class ExampleBase extends Component {

  render() {
    return (
      <div>
        <Tag color="#6cd4a4">#6cd4a4</Tag>
        <Tag hasClose color="#f60">#f40</Tag>
      </div>
    );
  }
}

使用color来改变标签的颜色。