Button 按钮

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

何时使用

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

代码演示

按钮展现模式

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

Button按钮 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button } from 'choerodon-ui/pro';
  4. class App extends React.PureComponent {
  5. render() {
  6. return (
  7. <div>
  8. <Button>默认raised按钮</Button>
  9. <Button funcType="flat">flat按钮</Button>
  10. <Button funcType="raised">raised按钮</Button>
  11. </div>
  12. );
  13. }
  14. }
  15. ReactDOM.render(
  16. <App />,
  17. document.getElementById('container'));

按钮颜色

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

Button按钮 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button } from 'choerodon-ui/pro';
  4. class App extends React.PureComponent {
  5. render() {
  6. return (
  7. <div>
  8. <div>
  9. <div style={{ margin: '20px 0' }}>
  10. Background Color(With raised funcType)
  11. </div>
  12. <Button color="gray">Gray</Button>
  13. <Button color="primary">Blue</Button>
  14. <Button color="green">Green</Button>
  15. <Button color="red">Red</Button>
  16. <Button color="yellow">Yellow</Button>
  17. <Button color="purple">Purple</Button>
  18. <Button color="dark">Dark</Button>
  19. </div>
  20. <div>
  21. <div style={{ margin: '20px 0' }}>Font Color(With flat funcType)</div>
  22. <Button funcType="flat" color="gray">
  23. Gray
  24. </Button>
  25. <Button funcType="flat" color="primary">
  26. Blue
  27. </Button>
  28. <Button funcType="flat" color="green">
  29. Green
  30. </Button>
  31. <Button funcType="flat" color="red">
  32. Red
  33. </Button>
  34. <Button funcType="flat" color="yellow">
  35. Yellow
  36. </Button>
  37. <Button funcType="flat" color="purple">
  38. Purple
  39. </Button>
  40. <Button funcType="flat" color="dark">

按钮不可选择

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

Button按钮 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button } from 'choerodon-ui/pro';
  4. class App extends React.PureComponent {
  5. render() {
  6. return (
  7. <div>
  8. <Button>默认可选择按钮</Button>
  9. <Button disabled>不可选择按钮</Button>
  10. <Button color="primary" disabled>
  11. 不可选择按钮
  12. </Button>
  13. </div>
  14. );
  15. }
  16. }
  17. ReactDOM.render(<App />, document.getElementById('container'));

图标按钮

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

Button按钮 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Row, Col } from 'choerodon-ui';
  4. import { Button, Icon } from 'choerodon-ui/pro';
  5. class App extends React.PureComponent {
  6. render() {
  7. return (
  8. <div>
  9. <h3>funcType - 默认 raised</h3>
  10. <Row>
  11. <Col span={12}>
  12. icon - save & children - false &nbsp;{' '}
  13. <Button icon="save">{false}</Button>
  14. </Col>
  15. <Col span={12}>
  16. children - Icon 组件 &nbsp;{' '}
  17. <Button>
  18. <Icon type="sync" />
  19. </Button>
  20. </Col>
  21. </Row>
  22. <h3>funcType - flat</h3>
  23. <Row>
  24. <Col span={12}>
  25. color - primary & icon - save & children - 保存 &nbsp;
  26. <Button funcType="flat" color="primary" icon="save">
  27. 保存
  28. </Button>
  29. </Col>
  30. <Col span={12}>
  31. icon - sync &nbsp; <Button funcType="flat" icon="sync" />
  32. </Col>
  33. </Row>
  34. <Row>
  35. <Col span={12}>
  36. color - primary & icon - search &nbsp;{' '}
  37. <Button funcType="flat" icon="search" color="primary" />
  38. </Col>
  39. <Col span={12}>
  40. icon - close & style - color: #e12330 & disabled - true &nbsp;

图标加载中

图标是否加载中(加载中无法点击)。

Button按钮 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, Button } from 'choerodon-ui/pro';
  4. import { runInAction } from 'mobx';
  5. class App extends React.Component {
  6. ds = new DataSet();
  7. state = {
  8. loading: true,
  9. };
  10. componentWillMount() {
  11. runInAction(() => {
  12. this.ds.status = 'submitting';
  13. });
  14. }
  15. handleClick = () => {
  16. this.setState({ loading: !this.state.loading });
  17. return new Promise((resolve) => setTimeout(resolve, 1000));
  18. };
  19. render() {
  20. return (
  21. <div>
  22. <Button icon="save" loading={this.state.loading}>
  23. 保存

超链接按钮

超链接按钮。

Button按钮 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button } from 'choerodon-ui/pro';
  4. ReactDOM.render(
  5. <div>
  6. <Button href="https://choerodon.io" target="_blank">跳转按钮</Button>
  7. <Button funcType="flat" href="https://choerodon.io" target="_blank">跳转按钮</Button>
  8. <Button funcType="flat" href="https://choerodon.io" target="_blank" icon="link" />
  9. </div>,
  10. document.getElementById('container')
  11. );

按钮大小

按钮大小。

Button按钮 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button } from 'choerodon-ui/pro';
  4. class App extends React.PureComponent {
  5. render() {
  6. return (
  7. <div>
  8. <div>
  9. <Button>默认raised按钮</Button>
  10. <Button size="large">大raised按钮</Button>
  11. <Button size="small">小raised按钮</Button>
  12. </div>
  13. <div>
  14. <Button funcType="flat">flat按钮</Button>
  15. <Button funcType="flat" size="large">大flat按钮</Button>
  16. <Button funcType="flat" size="small">小flat按钮</Button>
  17. </div>
  18. <div>
  19. <Button funcType="flat" icon="search" />
  20. <Button funcType="flat" icon="search" size="large" />
  21. <Button funcType="flat" icon="search" size="small" />
  22. </div>
  23. </div>
  24. );
  25. }
  26. }
  27. ReactDOM.render(
  28. <App />,
  29. document.getElementById('container')
  30. );

按钮节流

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

Button按钮 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button } from 'choerodon-ui/pro';
  4. class App extends React.Component {
  5. state = {
  6. num: 0,
  7. };
  8. handleClick = e => {
  9. e.stopPropagation();
  10. this.setState({
  11. num: this.state.num + 1,
  12. });
  13. };
  14. handleBubbleClick = () => {
  15. console.log('bubble click');
  16. };
  17. render() {
  18. return (
  19. <div onClick={this.handleBubbleClick}>
  20. <Button onClick={this.handleClick} wait={1000} waitType="throttle">
  21. 节流按钮{this.state.num}
  22. </Button>
  23. <Button onClick={this.handleClick} wait={1000} waitType="debounce">
  24. 去抖按钮{this.state.num}

API

按钮的属性说明如下:

属性说明类型默认值
type设置按钮类型,可选值为 button | submit | resetstringbutton
color设置按钮颜色风格,可选值为 default primary blue yellow red dark green purplestringdefault
funcType设置按钮展现模式,可选值为 flat | raisedstringraised
loading设置按钮是否是加载状态booleanfalse
icon设置按钮图标string
href点击跳转的地址,指定此属性 button 的行为和 a 链接一致string
target相当于 a 链接的 target 属性,href 存在时生效string
wait设置按钮点击间隔时间number
waitType设置按钮点击间隔类型,可选值: throttle | debouncestringthrottle
onClick点击按钮时的回调, 当回调返回值为 Promise,则会出现 loading 状态直到 Promise 的状态不为 pending(e) => voidPromise

更多属性请参考 ViewComponent