Button按钮

按钮用于开始一个即时操作。

何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

代码演示

按钮展现模式

按钮的展现模式，有flat和raised两种，默认为raised。

import { Button } from 'choerodon-ui/pro';
class App extends React.PureComponent {
  render() {
    return (
      <div>
        <Button>默认raised按钮</Button>
        <Button funcType="flat">flat按钮</Button>
        <Button funcType="raised">raised按钮</Button>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode);

按钮不可选择

按钮能否选择，默认为false。

import { Button } from 'choerodon-ui/pro';
class App extends React.PureComponent {
  render() {
    return (
      <div>
        <Button>默认可选择按钮</Button>
        <Button disabled>不可选择按钮</Button>
        <Button color="primary" disabled>不可选择按钮</Button>
        <Button funcType="flat" color="primary" disabled>不可选择按钮</Button>
        <Button funcType="flat" icon="save" disabled />
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode);

图标加载中

图标是否加载中（加载中无法点击）。

import { DataSet, Button } from 'choerodon-ui/pro';
import { runInAction } from 'mobx';
class App extends React.Component {
  ds = new DataSet();
  state = {
    loading: true,
  };
  componentWillMount() {
    runInAction(() => {
      this.ds.status = 'submitting';
    });
  }
  handleClick = () => {
    this.setState({ loading: !this.state.loading });
    return new Promise(resolve => setTimeout(resolve, 1000));
  };
  render() {
    return (
      <div>
        <Button icon="save" loading={this.state.loading}>保存</Button>
        <Button funcType="flat" color="primary" icon="save" loading>保存</Button>
        <Button icon="save" loading />
        <Button funcType="flat" icon="save" color="primary" loading />
        <Button dataSet={this.ds} type="submit">数据源状态</Button>
        <Button onClick={this.handleClick}>wait promise</Button>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

按钮大小

按钮大小。

import { Button } from 'choerodon-ui/pro';
class App extends React.PureComponent {
  render() {
    return (
      <div>
        <div>
          <Button>默认raised按钮</Button>
          <Button size="large">大raised按钮</Button>
          <Button size="small">小raised按钮</Button>
        </div>
        <div>
          <Button funcType="flat">flat按钮</Button>
          <Button funcType="flat" size="large">大flat按钮</Button>
          <Button funcType="flat" size="small">小flat按钮</Button>
        </div>
        <div>
          <Button funcType="flat" icon="search" />
          <Button funcType="flat" icon="search" size="large" />
          <Button funcType="flat" icon="search" size="small" />
        </div>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

按钮颜色

按钮的颜色，当 funcType 为 flat 时，color 为字体颜色。

import { Button } from 'choerodon-ui/pro';
class App extends React.PureComponent {
  render() {
    return (
      <div>
        <div>
          <div style={{ margin: '20px 0' }}>Background Color(With raised funcType)</div>
          <Button color="gray">Gray</Button>
          <Button color="primary">Blue</Button>
          <Button color="green">Green</Button>
          <Button color="red">Red</Button>
          <Button color="yellow">Yellow</Button>
          <Button color="purple">Purple</Button>
          <Button color="dark">Dark</Button>
        </div>
        <div>
          <div style={{ margin: '20px 0' }}>Font Color(With flat funcType)</div>
          <Button funcType="flat" color="gray">
            Gray
          </Button>
          <Button funcType="flat" color="primary">
            Blue
          </Button>
          <Button funcType="flat" color="green">
            Green
          </Button>
          <Button funcType="flat" color="red">
            Red
          </Button>
          <Button funcType="flat" color="yellow">
            Yellow
          </Button>
          <Button funcType="flat" color="purple">
            Purple
          </Button>
          <Button funcType="flat" color="dark">
            Dark
          </Button>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

图标按钮

为按钮增加图标。

import { Button, Icon } from 'choerodon-ui/pro';
class App extends React.PureComponent {
  render() {
    return (
      <div>
        <Button icon="save">{false}</Button>
        <Button><Icon type="save" /></Button>
        <Button funcType="flat" color="primary" icon="save">保存</Button>
        <Button icon="sync" />
        <Button funcType="flat" icon="sync" />
        <Button funcType="flat" icon="search" color="primary" />
        <Button funcType="flat" icon="close" style={{ color: '#e12330' }} disabled />
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode);

超链接按钮

超链接按钮。

import { Button } from 'choerodon-ui/pro';
ReactDOM.render(
  <div>
    <Button href="https://choerodon.io" target="_blank">跳转按钮</Button>
    <Button funcType="flat" href="https://choerodon.io" target="_blank">跳转按钮</Button>
    <Button funcType="flat" href="https://choerodon.io" target="_blank" icon="link" />
  </div>,
  mountNode
);

按钮节流

按钮点击节流。该类型按钮事件无法冒泡。

import { Button } from 'choerodon-ui/pro';
class App extends React.Component {
  state = {
    num: 0,
  };
  handleClick = e => {
    e.stopPropagation();
    this.setState({
      num: this.state.num + 1,
    });
  };
  handleBubbleClick = () => {
    console.log('bubble click');
  };
  render() {
    return (
      <div onClick={this.handleBubbleClick}>
        <Button onClick={this.handleClick} wait={1000} waitType="throttle">
          节流按钮{this.state.num}
        </Button>
        <Button onClick={this.handleClick} wait={1000} waitType="debounce">
          去抖按钮{this.state.num}
        </Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

API

按钮的属性说明如下：

更多属性请参考 ViewComponent。