1.Spin加载中
用于页面和区块的加载中状态。
2.何时使用
页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。
组件代码来自: 加载中 Spin - Ant Design
3.本地验证前的准备
参考文章【react项目+antd组件-demo:hello-world_西晋的no1的博客-CSDN博客】,将 加载中 Spin - Ant Design 中需要在本地使用的代码复制覆盖App2.js中的全部代码,启动代码,可在本地查看现象和更改代码。
4.本地验证Spin的3种尺寸
复制下图所示代码,了解Spin的3种尺寸和对应尺寸的使用场景
小的用于文本加载,默认用于卡片容器级加载,大的用于页面级加载。
5.本地验证控制Spin的显示和隐藏以及包含其他标签
在使用Spin过程中,需要用一个变量来控制其显示和隐藏,参考官方示例,
复制下图所示代码,体验如何用一个变量来控制Spin的显示和隐藏以及如何将内容内嵌到 Spin 中,将现有容器变为加载状态。
<Spin spinning={loading}>
<Alert ***
/>
</Spin>
本文仅介绍了组件Spin的部分内容,更多内容请参阅官方文档: 加载中 Spin - Ant Design