mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 17:19:11 +08:00
49 lines
974 B
Markdown
49 lines
974 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.
|
||
|
||
```tsx
|
||
import { Alert, Spin, Switch } from 'antd';
|
||
import React, { useState } from 'react';
|
||
|
||
const App: React.FC = () => {
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const toggle = (checked: boolean) => {
|
||
setLoading(checked);
|
||
};
|
||
const container = (
|
||
<Alert
|
||
message="Alert message title"
|
||
description="Further details about the context of this alert."
|
||
type="info"
|
||
/>
|
||
);
|
||
|
||
return (
|
||
<div>
|
||
<Spin spinning={loading} delay={500}>
|
||
{container}
|
||
</Spin>
|
||
<div style={{ marginTop: 16 }}>
|
||
Loading state：
|
||
<Switch checked={loading} onChange={toggle} />
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default App;
|
||
```
|