二、AntDesign UI组件-按钮

1.新建用于展示各种按钮的文件UiButton.js

import React from 'react'
import {Card,Button} from 'antd'

class UiButton {

  render() {
    return (
      <div>
        <Card title="普通的按钮">
          <Button> 无样式按钮 </Button>
          <Button type="primary"> 普通按钮 </Button>
          <Button type="dashed"> 虚线按钮 </Button>
          <Button type="danger"> 危险按钮 </Button>
          <Button disabled> 被禁用的按钮 </Button>
        </Card>
      </div>
    );
  }
}

export default UiButton;

2.配置下路由让我们能够测试

项目是基于ant design pro2，修改config/router.config.js

3.效果

4.给按钮们加样式

新建ui.less

button{ //所有的button的样式
  margin-right: 10px;
}

在UiButton.js中引入这个样式

import './ui.less'

效果：

5.常用的按钮

效果：

代码：

import React from 'react'
import {Card,Button,Radio} from 'antd'

import './ui.less'  //导入样式

class UiButton extends React.Component{
  //构造器
  constructor(props){
    super(props);

    this.state = {   //组件内的变量等都通过state来存取
      loading : false,  //按钮等待状态
      size : 'default'  //按钮尺寸
    };
  }

  //保存，锁定按钮
  makeLoading = ()=>{
    this.setState({loading: true});
  }
  //取消按钮等待状态
  cancelLoading = ()=>{
      this.setState({loading: false});
  }

  //改变按钮尺寸
  changeButtonSize = (e)=>{
    this.setState({size: e.target.value})
  }

  render() {
    return (
      <div>
        <Card title="普通的按钮">
          <Button> 无样式按钮 </Button>
          <Button type="primary"> 主题颜色的按钮 </Button>
          <Button type="dashed"> 虚线按钮 </Button>
          <Button type="danger"> 危险按钮 </Button>
          <Button disabled> 被禁用的按钮 </Button>
        </Card>

        {/*icon:指定按钮图标
          shape:指定按钮形状*/}
        <Card title="带图形的按钮">
          <Button icon="plus" type="primary">新建</Button>
          <Button icon="edit" type="primary">编辑</Button>
          <Button icon="save" type="primary">保存</Button>
          <Button icon="delete" type="danger">删除</Button>
          <Button icon="download" type="primary">导出</Button>
          <Button icon="search" shape="circle"></Button>
          <Button icon="search">查询</Button>
        </Card>

        {/*loading:等待状态，true为等待中 */}
        <Card title="点击保存就锁定的按钮">
          <Button loading={this.state.loading} icon="plus" type="primary">新建</Button>
          <Button loading={this.state.loading} icon="edit" type="primary">编辑</Button>
          <Button loading={this.state.loading} icon="delete" type="danger">删除</Button>
          <Button loading={this.state.loading} icon="save" type="primary" onClick={this.makeLoading}>保存</Button>
          <Button icon="delete" type="primary" onClick={this.cancelLoading}>取消等待</Button>
        </Card>

        <Card title="把两个按钮组装在一起">
          <Button.Group>
            <Button icon="left" type="primary">上一步</Button>
            <Button icon="right" type="primary">下一步</Button>
          </Button.Group>
        </Card>

        {/*size:按钮尺寸*/}
        <Card title="尺寸可变的按钮">
          <Radio.Group value={this.state.size} onChange={this.changeButtonSize}> {/*单选组*/}
            <Radio value="large">大</Radio>
            <Radio value="default">中</Radio>
            <Radio value="small">小</Radio>
          </Radio.Group>
          <Button size={this.state.size} icon="plus" type="primary">新建</Button>
          <Button size={this.state.size} icon="edit" type="primary">编辑</Button>
          <Button size={this.state.size} icon="delete" type="danger">删除</Button>
        </Card>

      </div>
    );
  }
}

export default UiButton;