• Button 按钮

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

    何时使用

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

    代码演示

    按钮有四种类型:主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。

    dangerantd@2.7 后支持。

    expand code expand code
    import { Button } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Button funcType="raised">Rasied</Button>
        <Button funcType="flat">Flat</Button>
        <Button shape="circle" funcType="flat" icon="search" />
      </div>,
      mountNode);
    

    按钮有大、中、小三种尺寸。

    通过设置 sizelarge small 分别把按钮设为大、小尺寸。若不设置 size,则尺寸为中。

    expand code expand code
    import { Button, Radio, Icon } from 'choerodon-ui';
    
    class ButtonSize extends React.Component {
      state = {
        size: 'large',
      };
    
      handleSizeChange = (e) => {
        this.setState({ size: e.target.value });
      }
    
      render() {
        const size = this.state.size;
        return (
          <div>
            <Radio.Group value={size} onChange={this.handleSizeChange}>
              <Radio.Button value="large">Large</Radio.Button>
              <Radio.Button value="default">Default</Radio.Button>
              <Radio.Button value="small">Small</Radio.Button>
            </Radio.Group>
            <br /><br />
            <Button type="primary" size={size}>默认</Button>
            <Button size={size}>Normal</Button>
            <Button type="dashed" size={size}>Dashed</Button>
            <Button type="danger" size={size}>Danger</Button>
            <br />
            <Button type="primary" shape="circle" icon="cloud_queue" size={size} />
            <Button type="primary" icon="cloud_queue" size={size}>Download</Button>
            <br />
            <Button.Group size={size}>
              <Button type="primary">
                <Icon type="keyboard_arrow_left" />Backward
              </Button>
              <Button type="primary">
                Forward<Icon type="keyboard_arrow_right" />
              </Button>
            </Button.Group>
          </div>
        );
      }
    }
    
    ReactDOM.render(<ButtonSize />, mountNode);
    
    添加 loading 属性即可让按钮处于加载状态,最后两个按钮演示点击后进入加载状态。
    expand code expand code
    import { Button } from 'choerodon-ui';
    
    class App extends React.Component {
      state = {
        loading: false,
        iconLoading: false,
      }
    
      enterLoading = () => {
        this.setState({ loading: true });
      }
    
      enterIconLoading = () => {
        this.setState({ iconLoading: true });
      }
    
      render() {
        return (
          <span>
            <Button type="primary" loading>
              Loading
            </Button>
            <Button type="primary" funcType="raised" loading>
              Loading
            </Button>
            <br />
            <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
              Click me!
            </Button>
            <Button type="primary" icon="poweroff" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
              Click me!
            </Button>
            <br />
            <Button shape="circle" loading />
            <Button type="primary" shape="circle" loading />
          </span>
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    

    可以将多个 Button 放入 Button.Group 的容器中。

    通过设置 sizelarge small 分别把按钮组合设为大、小尺寸。若不设置 size,则尺寸为中。

    expand code expand code
    import { Button, Icon } from 'choerodon-ui';
    const ButtonGroup = Button.Group;
    
    ReactDOM.render(
      <div>
        <h4>Basic</h4>
        <ButtonGroup>
          <Button>Cancel</Button>
          <Button>OK</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button disabled>L</Button>
          <Button disabled>M</Button>
          <Button disabled>R</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button>L</Button>
          <Button>M</Button>
          <Button>R</Button>
        </ButtonGroup>
    
        <h4>With Icon</h4>
        <ButtonGroup>
          <Button type="primary">
            <Icon type="left" />Go back
          </Button>
          <Button type="primary">
            Go forward<Icon type="right" />
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button type="primary" icon="cloud" />
          <Button type="primary" icon="cloud-download" />
        </ButtonGroup>
      </div>,
      mountNode);
    

    当需要在 Button 内嵌入 Icon 时,可以设置 icon 属性,或者直接在 Button 内使用 Icon 组件。

    如果想控制 Icon 具体的位置,只能直接使用 Icon 组件,而非 icon 属性。

    expand code expand code
    import { Button } from 'choerodon-ui';
    ReactDOM.render(
      <div>
        <Button type="primary" funcType="raised" shape="circle" icon="search" />
        <Button type="primary" funcType="raised" icon="search">Search</Button>
        <Button type="primary" funcType="flat" shape="circle" icon="search" />
        <Button type="primary" funcType="flat" icon="search">Search</Button>
      </div>,
      mountNode
    );
    
    添加 disabled 属性即可让按钮处于不可用状态,同时按钮样式也会改变。
    expand code expand code
    import { Button } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Button type="primary" funcType="raised">Primary</Button>
        <Button type="primary" disabled>Primary(disabled)</Button>
        <br />
        <Button>Default</Button>
        <Button disabled>Default(disabled)</Button>
        <br />
        <Button>Ghost</Button>
        <Button disabled>Ghost(disabled)</Button>
        <br />
        <Button type="dashed">Dashed</Button>
        <Button type="dashed" disabled>Dashed(disabled)</Button>
      </div>,
      mountNode);
    
    按钮组合使用时,推荐使用1个主操作 + n 个次操作,3个以上操作时把更多操作放到 Dropdown.Button 中组合使用。
    expand code expand code
    import { Button, Menu, Dropdown, Icon } from 'choerodon-ui';
    
    function handleMenuClick(e) {
      console.log('click', e);
    }
    
    const menu = (
      <Menu onClick={handleMenuClick}>
        <Menu.Item key="1">1st item</Menu.Item>
        <Menu.Item key="2">2nd item</Menu.Item>
        <Menu.Item key="3">3rd item</Menu.Item>
      </Menu>
    );
    
    ReactDOM.render(
      <div>
        <Button type="primary">primary</Button>
        <Button>secondary</Button>
        <Dropdown overlay={menu}>
          <Button>
            Actions <Icon type="down" />
          </Button>
        </Dropdown>
      </div>,
      mountNode
    );
    
    幽灵按钮将其他按钮的内容反色,背景变为透明,常用在有色背景上。
    expand code expand code
    import { Button } from 'choerodon-ui';
    
    ReactDOM.render(
      <div style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}>
        <Button type="primary" ghost>Primary</Button>
        <Button ghost>Default</Button>
        <Button type="dashed" ghost>Dashed</Button>
        <Button type="danger" ghost>danger</Button>
      </div>,
      mountNode);
    

    API

    通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:type -> shape -> size -> loading -> disabled

    按钮的属性说明如下:

    属性 说明 类型 默认值
    ghost 幽灵属性,使按钮背景透明,版本 2.7 中增加 boolean false
    href 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 string -
    htmlType 设置 button 原生的 type 值,可选值请参考 HTML 标准 string button
    icon 设置按钮的图标类型 string -
    loading 设置按钮载入状态 boolean | { delay: number } false
    funcType 设置按钮功能,可选值为 raised flat string flat
    shape 设置按钮形状,可选值为 circle 或者不设 string -
    size 设置按钮大小,可选值为 small large 或者不设 string default
    target 相当于 a 链接的 target 属性,href 存在时生效 string -
    type 设置按钮类型,可选值为 primary dashed danger(版本 2.7 中增加) 或者不设 string -
    onClick click 事件的 handler function -

    <Button>Hello world!</Button> 最终会被渲染为 <button><span>Hello world!</span></button>,并且除了上表中的属性,其它属性都会直接传到 <button></button>

    <Button href="http://example.com">Hello world!</Button> 则会渲染为 <a href="http://example.com"><span>Hello world!</span></a>

    import { Button } from 'choerodon-ui';
    
    ReactDOM.render(
    <div>
        <Button type="primary" funcType="raised" shape="circle" icon="search" />
        <Button type="primary" funcType="raised" icon="search">Search</Button>
        <Button type="primary" funcType="flat" shape="circle" icon="search" />
        <Button type="primary" funcType="flat" icon="search">Search</Button>
    </div>,
    mountNode
    );