简体中文

图标按钮

图标按钮模块。

基础
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功能。

点我点我0v0

不传`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元素上。