图标按钮模块。
import React, {Component} from 'react';
import {IconButton} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';
/**
* @en
* Base
*
* An icon-button with tooltip.
*
* @cn
* 基础
*
* 图标按钮,带有tooltip功能。
*/
export default class ExampleBase extends Component {
state = {
clicked: false
}
render() {
return (
<div>
<ExampleBlock
en={this.state.clicked ? 'you clicked me' : 'click me plz'}
cn={this.state.clicked ? '你点击了我>_<' : '点我点我0v0'}
>
<IconButton
tipContent="Hello Shooting Star"
type="yukibana-o"
size="large"
onClick={() => this.setState({clicked: true})}
/>
</ExampleBlock>
<ExampleBlock
en={<p>you can only use iconbutton without tooltip</p>}
cn={<p>不传`tipContent`时,不显示tooltip</p>}
>
<IconButton type="gomi" color="red" size="large" />
</ExampleBlock>
<ExampleBlock
en={'disabled icon'}
cn={'被禁用的图标按钮'}
>
<IconButton
type="gomi"
color="red"
size="large"
disabled
onClick={
() => alert('1') //eslint-disable-line
}
/>
</ExampleBlock>
</div>
);
}
}
图标按钮,带有tooltip功能。
不传`tipContent`时,不显示tooltip
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type * | string | 图标类型 | |
color | string | 图标颜色 | |
style | object | 图标按钮的外层样式 | |
size | enum: 'small' 'middle' 'large' |
图标尺寸 | |
iconStyle | object | 图标的样式 | |
tipContent | node | Tooltip 的内容 |
|
tipStyle | object | Tooltip 的样式 |
|
tipColor | string | Tooltip 的颜色 |
|
tipPosition | enum: 'top' 'bottom' 'left' 'right' |
Tooltip 的位置 |
|
disabled | bool | false | 是否禁用 |
onClick | function | 点击时的回调函数 |
未在文档中说明的属性将会被自动加到根元素或form元素上。