Button

按钮。Button UI 提供与WeLink规范一致的视图。 按钮的类型包括：页面主操作、页面次要操作、警告类操作和页面一般操作。

参数说明

效果示例

import React from 'react';
import { Button, ButtonArea } from '@wecode/react-weui';
import './button.less';

const imgStyle = { display: 'inline-block', verticalAlign: 'middle' };
export default class ButtonDemo extends React.Component {
  state = {
    btnType: 'spacingBtns'
  };

  handleChangeValue = (key, value) => {
    this.setState({ [key]: value });
  };

  clickBtns(type) {
    this.setState({ btnType: type });
  }

  render() {
    const { btnType } = this.state;
    return (
      <div>
        <section>
          {btnType === 'spacingBtns' ? (
            <ButtonArea fixedSpacing>
              <Button type="warn">取消</Button>
              <Button type="primary">确定</Button>
            </ButtonArea>
          ) : null}

          {btnType === 'btns' ? (
            <ButtonArea fixed>
              <Button type="warn">取消</Button>
              <Button type="primary">确定</Button>
            </ButtonArea>
          ) : null}
          {btnType === 'sureBtn' ? (
            <ButtonArea fixedSpacing>
              <Button type="primary">确定</Button>
            </ButtonArea>
          ) : null}

          {btnType === 'deleteBtn' ? (
            <ButtonArea fixedSpacing>
              <Button type="warn">删除</Button>
            </ButtonArea>
          ) : null}
          <div>
            <Button>页面主操作 Normal</Button>

            <Button disabled>页面主操作 Disabled</Button>

            <Button type="warn">警告类操作 Normal</Button>

            <Button type="warn" disabled>
              警告类操作 Normal
            </Button>
          </div>

          <div className="page__bd page__bd_spacing button-sp-area__item">
            <Button type="primary" size="small" plain>
              四字按钮
            </Button>{' '}
            <Button type="default" size="small" plain>
              四字按钮
            </Button>
          </div>

          <div className="page__bd page__bd_spacing button-sp-area__item">
            <Button size="small">Mini</Button>
          </div>

          <div className="button-sp-area button-sp-area__item">
            <Button
              type="primary"
              size="small"
              plain
              icon={(
                <img
                  alt="加入会议"
                  src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjYgKDY3NDkxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT7liIfniYc8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iMTXmjInpkq4oYnV0dG9u77yJIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i57uE5Lu2L+W3peS9nOWPsC/ml6XljobljaHniYcvaWNvbuinhumikSI+CiAgICAgICAgICAgIDxnIGlkPSJQYWdlLTEiPgogICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBvcGFjaXR5PSIwLjMwMDAwMDAxMiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMS41ODU4MTcwNywxMiBDMS4yNjMwNDEzLDEyIDEsMTEuNzMyNzY0NCAxLDExLjQwMzY1MzggTDEsNC41OTYzNDYxOCBDMSw0LjI2NzIzNTYzIDEuMjYzMDQxMyw0IDEuNTg1ODE3MDcsNCBMMTEuMjcwMjYzMSw0IEMxMS41OTMwMzg4LDQgMTEuODU2MDgwMSw0LjI2NzIzNTYzIDExLjg1NjA4MDEsNC41OTYzNDYxOCBMMTEuODU2MDgwMSw1Ljk3NDEyOTg4IEwxNC4xNDAxMzc5LDUuMDc5MjU1MDEgQzE0LjE5Nzc3NjQsNS4wMzg3MTYyNyAxNSw0LjU2MzgwODUxIDE1LDQuODkyMzg1NjUgTDE1LDExLjIzNDAzMTIgQzE1LDExLjU2MzY3NTIgMTQuMTk3Nzc2NCwxMS4wODgyMzQgMTQuMTAzOTgyOCwxMS4wMjg0OTI3IEwxMS44NTYwODAxLDEwLjAyMjY2OTcgTDExLjg1NjA4MDEsMTEuNDAzNjUzOCBDMTEuODU2MDgwMSwxMS43MzI3NjQ0IDExLjU5MzAzODgsMTIgMTEuMjcwMjYzMSwxMiBMMS41ODU4MTcwNywxMiBaIiBpZD0iRmlsbC0xIiBmaWxsPSIjMDM5QkU1Ij48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="
                  style={imgStyle}
                />
              )}
            >
              加入会议
            </Button>
          </div>
          <div className="btn-tep-container">
            <Button type="warn" size="middle">
              中等按钮
            </Button>
            <Button type="primary" size="middle">
              中等按钮
            </Button>
          </div>
          <div className="page__bd page__bd_spacing button-sp-area__item">
            <Button
              type="primary"
              size="small"
              plain
              onClick={() => {
                this.clickBtns('spacingBtns');
              }}
            >
              有间距双按钮
            </Button>
            <Button
              type="primary"
              size="small"
              plain
              onClick={() => {
                this.clickBtns('btns');
              }}
            >
              无间距双按钮
            </Button>
            <Button
              type="primary"
              size="small"
              plain
              onClick={() => {
                this.clickBtns('sureBtn');
              }}
            >
              确定单按钮
            </Button>
            <Button
              type="primary"
              size="small"
              plain
              onClick={() => {
                this.clickBtns('deleteBtn');
              }}
            >
              删除单按钮
            </Button>
          </div>
          <br />
          <br />
          <br />
          <br />
          <br />
        </section>
      </div>
    );
  }
}