Rain-Bus/trailway-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Rain&Bus
2024-01-11 00:49:37 +08:00
commit 1d4ca069e7
169 changed files with 44956 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/ui/Spins.tsx Normal file
View File

@@ -0,0 +1,95 @@
/**
* 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;