mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 18:09:22 +08:00
6776bb8916
* docs: update demo * chore: add script * test: fix demo test * docs: convert demos * chore: move script * test: remove react-dom import * chore: update deps * docs: update riddle js * test: fix image test * docs: fix riddle demo
50 lines
1006 B
Markdown
50 lines
1006 B
Markdown
---
|
||
order: 5
|
||
title:
|
||
zh-CN: 延迟
|
||
en-US: delay
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
延迟显示 loading 效果。当 spinning 状态在 `delay` 时间内结束，则不显示 loading 状态。
|
||
|
||
## en-US
|
||
|
||
Specifies a delay for loading state. If `spinning` ends during delay, loading status won't appear.
|
||
|
||
```jsx
|
||
import { Spin, Alert, Switch } from 'antd';
|
||
|
||
class Card extends React.Component {
|
||
state = { loading: false };
|
||
|
||
toggle = value => {
|
||
this.setState({ loading: value });
|
||
};
|
||
|
||
render() {
|
||
const container = (
|
||
<Alert
|
||
message="Alert message title"
|
||
description="Further details about the context of this alert."
|
||
type="info"
|
||
/>
|
||
);
|
||
return (
|
||
<div>
|
||
<Spin spinning={this.state.loading} delay={500}>
|
||
{container}
|
||
</Spin>
|
||
<div style={{ marginTop: 16 }}>
|
||
Loading state：
|
||
<Switch checked={this.state.loading} onChange={this.toggle} />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default () => <Card />;
|
||
```
|