Spin加载中(antd-design组件库)loading效果简单使用

news/2024/7/15 18:27:40 标签: javascript, 前端, react.js

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


http://www.niftyadmin.cn/n/393480.html

相关文章

【Java】单例设计模式-饿汉模式和懒汉模式

单例模式概念如何设计 饿汉模式懒汉模式分析造成线程不安全的原因解决方法 总结 单例模式 概念 单例是一种设计模式。单例指的是在全局范围内只有一个实例对象。比如在学习JDBC编码时使用的DataSource&#xff0c;定义了数据库的用户名&#xff0c;密码和连接串&#xff0c;定…

redis缓存穿透、缓存雪崩 、缓存击穿

一、缓存穿透、缓存雪崩 、缓存击穿 摘自尚硅谷文档 1、缓存穿透 缓存穿透是指查询一个一定不存在的数据&#xff0c;由于缓存是不命中&#xff0c;将去查询数据库&#xff0c;但是数 据库也无此记录&#xff0c;我们没有将这次查询的 null 写入缓存&#xff0c;这将导致这个…

eBPF 入门实践教程十二:使用 eBPF 程序 profile 进行性能分析

本教程将指导您使用 libbpf 和 eBPF 程序进行性能分析。我们将利用内核中的 perf 机制&#xff0c;学习如何捕获函数的执行时间以及如何查看性能数据。 libbpf 是一个用于与 eBPF 交互的 C 库。它提供了创建、加载和使用 eBPF 程序所需的基本功能。本教程中&#xff0c;我们将…

工业相机丢包排查步骤

机器视觉康耐视智能相机Insight-缺失外观检测 第一步:检查PC环境设置 l巨型帧/巨帧数据包是否已经设置成9KB,巨型帧在“本地连接->属性->配置->高级”的界面中 效果验证:如之前未配置9KB,请配置9KB后验证效果 l请确认现场电脑上是否有360安全卫士、360杀毒软件等…

【C/C++】基础知识之动态申请内存空间new-delete

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

【001 Linux内核】内核镜像格式有几种?分别有什么区别?

一、前言 vmlinux 是 ELF 格式的文件&#xff0c;但是在实际中我们不会使用 vmlinux&#xff0c;而是使用 zImage 或 uImage 这样的 Linux 内核镜像文件。但是新的 uboot 已经支持了 zImage 启动&#xff01;所以已经很少用到 uImage 了&#xff0c;除非你用的很古老的 uboot。…

Scala和Python有什么区别

Scala和Python都是强大的编程语言&#xff0c;广泛用于各种应用程序。它们有一些相似之处&#xff0c;例如是高级编程语言&#xff0c;但它们也有一些重要的区别。 无论您是初学者还是经验丰富的开发人员&#xff0c;本文都将让您全面了解 Scala 和 Python 之间的主要区别&…

738.单调递增的数字;968.监控二叉树

贪心 738.单调递增的数字思路:代码 968.监控二叉树思路:如何放置&#xff0c;才能让摄像头最小的呢&#xff1f; 738.单调递增的数字 思路: 举例&#xff0c;数字&#xff1a;332&#xff0c;从前向后遍历的话&#xff0c;那么就把变成了329&#xff0c;此时2又小于了第一位的…