释放双眼，带上耳机，听听看~！
AntDesign UI组件-局部加载效果Spin
1.简单的使用一下
新建用于展示局部加载效果Spin的页面UiSpin.js
代码：
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
2 * AntDesign UI 局部加载效果Spin示例
3 */
4import React from 'react'
5import {Card, Spin, Icon} from 'antd'
6
7class UiSpin extends React.Component {
8
9 constructor(props) {
10 super(props);
11 this.state = {};
12 }
13
14 render() {
15 return (
16 <div>
17 <Card title="Spin示例">
18 <Spin size={"small"}></Spin>
19 <Spin/>
20 <Spin size={"large"}></Spin>
21 </Card>
22 </div>
23 )
24
25 }
26
27}
28
29export default UiSpin;
30
31
效果：
2.在信息框Alert上加载效果
只需要将要被加载的内容放在中即可
代码：
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
2 * AntDesign UI 局部加载效果Spin示例
3 */
4import React from 'react'
5import {Card, Spin, Icon, Alert} from 'antd'
6
7class UiSpin extends React.Component {
8
9 constructor(props) {
10 super(props);
11 this.state = {};
12 }
13
14 render() {
15 //使用我们自定义的Icon,使用type给Icon指定一个图标，为一个圆圈
16 const loadingIcon = <Icon type="loading" style={{fontSize:24}}/>
17
18 return (
19 <div>
20 <Card title="Spin示例">
21 <Spin size={"small"}></Spin>
22 <Spin/>
23 <Spin size={"large"}></Spin>
24
25 {/*通过indicator指定局部加载效果的图标*/}
26 <Spin indicator={loadingIcon}></Spin>
27 </Card>
28
29 <Card title="内容遮罩-信息框Alert">
30 <Alert message="信息框Alert"
31 description="这是信息框Aleat的description"
32 type="info" />
33 <Alert message="警告框Alert"
34 description="这是警告框Aleat的description"
35 type="warning" />
36 </Card>
37
38 <Card title="内容遮罩-信息框Alert-加载效果">
39 <Spin>
40 <Alert message="信息框Alert"
41 description="这是信息框Aleat的description"
42 type="info" />
43 </Spin>
44 <Spin tip="加载中...">
45 <Alert message="信息框Alert"
46 description="这是信息框Aleat的description"
47 type="info" />
48 </Spin>
49 </Card>
50 </div>
51 )
52
53 }
54
55}
56
57export default UiSpin;
58
59
效果：
