标签模块。
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
属性来控制点击事件。
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
来改变标签的尺寸。
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
来改变标签的颜色。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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元素上。