释放双眼，带上耳机，听听看~！
二、AntDesign UI组件-按钮
1.新建用于展示各种按钮的文件UiButton.js
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2import {Card,Button} from 'antd'
3
4class UiButton {
5
6 render() {
7 return (
8 <div>
9 <Card title="普通的按钮">
10 <Button> 无样式按钮 </Button>
11 <Button type="primary"> 普通按钮 </Button>
12 <Button type="dashed"> 虚线按钮 </Button>
13 <Button type="danger"> 危险按钮 </Button>
14 <Button disabled> 被禁用的按钮 </Button>
15 </Card>
16 </div>
17 );
18 }
19}
20
21export default UiButton;
22
23
2.配置下路由让我们能够测试
项目是基于ant design pro2，修改config/router.config.js
3.效果
4.给按钮们加样式
新建ui.less
2
3
4
5
2 margin-right: 10px;
3}
4
5
在UiButton.js中引入这个样式
2
3
2
3
效果：
5.常用的按钮
效果：
代码：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
2import {Card,Button,Radio} from 'antd'
3
4import './ui.less' //导入样式
5
6class UiButton extends React.Component{
7 //构造器
8 constructor(props){
9 super(props);
10
11 this.state = { //组件内的变量等都通过state来存取
12 loading : false, //按钮等待状态
13 size : 'default' //按钮尺寸
14 };
15 }
16
17 //保存，锁定按钮
18 makeLoading = ()=>{
19 this.setState({loading: true});
20 }
21 //取消按钮等待状态
22 cancelLoading = ()=>{
23 this.setState({loading: false});
24 }
25
26 //改变按钮尺寸
27 changeButtonSize = (e)=>{
28 this.setState({size: e.target.value})
29 }
30
31 render() {
32 return (
33 <div>
34 <Card title="普通的按钮">
35 <Button> 无样式按钮 </Button>
36 <Button type="primary"> 主题颜色的按钮 </Button>
37 <Button type="dashed"> 虚线按钮 </Button>
38 <Button type="danger"> 危险按钮 </Button>
39 <Button disabled> 被禁用的按钮 </Button>
40 </Card>
41
42 {/*icon:指定按钮图标
43 shape:指定按钮形状*/}
44 <Card title="带图形的按钮">
45 <Button icon="plus" type="primary">新建</Button>
46 <Button icon="edit" type="primary">编辑</Button>
47 <Button icon="save" type="primary">保存</Button>
48 <Button icon="delete" type="danger">删除</Button>
49 <Button icon="download" type="primary">导出</Button>
50 <Button icon="search" shape="circle"></Button>
51 <Button icon="search">查询</Button>
52 </Card>
53
54 {/*loading:等待状态，true为等待中 */}
55 <Card title="点击保存就锁定的按钮">
56 <Button loading={this.state.loading} icon="plus" type="primary">新建</Button>
57 <Button loading={this.state.loading} icon="edit" type="primary">编辑</Button>
58 <Button loading={this.state.loading} icon="delete" type="danger">删除</Button>
59 <Button loading={this.state.loading} icon="save" type="primary" onClick={this.makeLoading}>保存</Button>
60 <Button icon="delete" type="primary" onClick={this.cancelLoading}>取消等待</Button>
61 </Card>
62
63 <Card title="把两个按钮组装在一起">
64 <Button.Group>
65 <Button icon="left" type="primary">上一步</Button>
66 <Button icon="right" type="primary">下一步</Button>
67 </Button.Group>
68 </Card>
69
70 {/*size:按钮尺寸*/}
71 <Card title="尺寸可变的按钮">
72 <Radio.Group value={this.state.size} onChange={this.changeButtonSize}> {/*单选组*/}
73 <Radio value="large">大</Radio>
74 <Radio value="default">中</Radio>
75 <Radio value="small">小</Radio>
76 </Radio.Group>
77 <Button size={this.state.size} icon="plus" type="primary">新建</Button>
78 <Button size={this.state.size} icon="edit" type="primary">编辑</Button>
79 <Button size={this.state.size} icon="delete" type="danger">删除</Button>
80 </Card>
81
82 </div>
83 );
84 }
85}
86
87export default UiButton;
88
89
