Button 按钮

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

何时使用

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

代码演示

按钮展现模式

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

import React from 'react';
import ReactDOM from 'react-dom';
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 />,
  document.getElementById('container'));
​
​

按钮颜色

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

​
import React from 'react';
import ReactDOM from 'react-dom';
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">

按钮不可选择

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'choerodon-ui/pro';
​
class App extends React.PureComponent {
  render() {
    return (
      <div>
        <Button>默认可选择按钮</Button>
        <Button disabled>不可选择按钮</Button>
        <Button color="primary" disabled>
          不可选择按钮
        </Button>
      </div>
    );
  }
}
​
ReactDOM.render(<App />, document.getElementById('container'));
​

图标按钮

为按钮增加图标的多种方式。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Row, Col } from 'choerodon-ui';
import { Button, Icon } from 'choerodon-ui/pro';
​
class App extends React.PureComponent {
  render() {
    return (
      <div>
        <h3>funcType - 默认 raised</h3>
        <Row>
          <Col span={12}>
            icon - save & children - false &nbsp;{' '}
            <Button icon="save">{false}</Button>
          </Col>
          <Col span={12}>
            children - Icon 组件 &nbsp;{' '}
            <Button>
              <Icon type="sync" />
            </Button>
          </Col>
        </Row>
        <h3>funcType - flat</h3>
        <Row>
          <Col span={12}>
            color - primary & icon - save & children - 保存 &nbsp;
            <Button funcType="flat" color="primary" icon="save">
              保存
            </Button>
          </Col>
          <Col span={12}>
            icon - sync &nbsp; <Button funcType="flat" icon="sync" />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            color - primary & icon - search &nbsp;{' '}
            <Button funcType="flat" icon="search" color="primary" />
          </Col>
          <Col span={12}>
            icon - close & style - color: #e12330 & disabled - true &nbsp;

图标加载中

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

​
import React from 'react';
import ReactDOM from 'react-dom';
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}>
          保存

超链接按钮

超链接按钮。

import React from 'react';
import ReactDOM from 'react-dom';
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>,
  document.getElementById('container')
);
​

按钮大小

按钮大小。

import React from 'react';
import ReactDOM from 'react-dom';
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 />,
  document.getElementById('container')
);
​

按钮节流

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

​
import React from 'react';
import ReactDOM from 'react-dom';
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}

API

按钮的属性说明如下：

更多属性请参考 ViewComponent。