简体中文

标签

标签模块。

基础
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属性来控制点击事件。

a tag
tag with close
another tag
another tag2

You want to close

尺寸
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来改变标签的尺寸。

small
large
溢彩
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来改变标签的颜色。

#6cd4a4
#f40

属性说明

属性名 类型 默认值 说明
children node 标签的子节点
color string 标签的颜色
style object 标签的样式
hasClose bool false 是否有关闭按钮
onClose function () => {} 关闭时的回调函数
(Event event, String label) => void
onClick function () => {} 点击时的回调
size enum:
 'small'
 'middle'
 'large'
'middle' 标签的大小
className string 标签的class

未在文档中说明的属性将会被自动加到根元素或form元素上。