96 lines
3.7 KiB
TypeScript
96 lines
3.7 KiB
TypeScript
/**
|
||
* Created by hao.cheng on 2017/4/23.
|
||
*/
|
||
import React from 'react';
|
||
import { Row, Col, Card, Spin, Alert, Switch, Button } from 'antd';
|
||
import BreadcrumbCustom from '../widget/BreadcrumbCustom';
|
||
import NProgress from 'nprogress';
|
||
import 'nprogress/nprogress.css';
|
||
|
||
class Spins extends React.Component {
|
||
state = { loading: false };
|
||
toggle = (value: boolean) => {
|
||
this.setState({ loading: value });
|
||
};
|
||
nprogressStart = () => {
|
||
NProgress.start();
|
||
};
|
||
nprogressDone = () => {
|
||
NProgress.done();
|
||
};
|
||
render() {
|
||
const container = (
|
||
<Alert
|
||
message="Alert message title"
|
||
description="Further details about the context of this alert."
|
||
type="info"
|
||
/>
|
||
);
|
||
return (
|
||
<div className="gutter-example button-demo">
|
||
<BreadcrumbCustom breads={['UI', '加载中']} />
|
||
<Row gutter={16}>
|
||
<Col className="gutter-row" md={12}>
|
||
<div className="gutter-box">
|
||
<Card bordered={false}>
|
||
<Spin />
|
||
</Card>
|
||
</div>
|
||
</Col>
|
||
<Col className="gutter-row" md={12}>
|
||
<div className="gutter-box">
|
||
<Card>
|
||
<Spin size="small" />
|
||
<Spin />
|
||
<Spin size="large" />
|
||
</Card>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
<Row gutter={16}>
|
||
<Col className="gutter-row" md={12}>
|
||
<div className="gutter-box">
|
||
<Card bordered={false}>
|
||
<Spin tip="Loading...">
|
||
<Alert
|
||
message="Alert message title"
|
||
description="Further details about the context of this alert."
|
||
type="info"
|
||
/>
|
||
</Spin>
|
||
</Card>
|
||
</div>
|
||
</Col>
|
||
|
||
<Col className="gutter-row" md={12}>
|
||
<div className="gutter-box">
|
||
<Card bordered={false}>
|
||
<Spin spinning={this.state.loading}>{container}</Spin>
|
||
Loading state：
|
||
<Switch checked={this.state.loading} onChange={this.toggle} />
|
||
</Card>
|
||
</div>
|
||
</Col>
|
||
<Col className="gutter-row" md={12}>
|
||
<div className="gutter-box">
|
||
<Card bordered={false}>
|
||
<h4>顶部进度条</h4>
|
||
<p>
|
||
<Button icon="caret-right" onClick={this.nprogressStart} />
|
||
<span> NProgress.start() — 显示进度条</span>
|
||
</p>
|
||
<p style={{ marginTop: 20 }}>
|
||
<Button icon="caret-right" onClick={this.nprogressDone} />
|
||
<span> NProgress.done() — 进度条完成</span>
|
||
</p>
|
||
</Card>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default Spins;
|