如何实现SAP UI5 Web Component React控件的加载效果

假设我使用SAP UI5 Web Component的React控件, 比如柱状图和折线图:


导入useState函数,默认加载状态为false:

每次点击屏幕后,首先将Loading状态使用切换函数setLoading设置成true,这样可以看到控件正在加载的动画效果。2秒钟后,setLoading设置为false,关闭动画效果。

下图这道渐进式显示的横线就是控件加载时的动画效果。

最后把loading变量赋给两个Chart的loading属性:

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

原文地址:https://www.cnblogs.com/sap-jerry/p/12303011.html

时间: 2024-10-08 00:42:18

如何实现SAP UI5 Web Component React控件的加载效果的相关文章

SAP UI5 web Component里的条件渲染机制

我的SAP UI5 web Component同时定义了两个图表标签,即BarChart和LineChart: 运行时效果如下: 现在我想针对这两个图表控件做一个条件显示,即点击屏幕一次,显示A图表,再点击,显示B图表. (1) 引入useState函数: 使用该useState生成一组控制器,返回的值通过toggerCharts和setToggerCharts保存. 前者是一个数组,值为默认显示的图表类型:lineChart,后者是一个函数. 在handleHeaderClick这个事件响应函

重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

原文:重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图 [源码下载] 作者:webabcd 介绍重新想象 Windows 8.1 Store Apps 之控件增强 WebView 加载本地 html,智能替换 html 中的 url 引用 WebView 通过 Share Contract 分享 WebVi

easyui控件的加载顺序

使用easyui做布局时,会模仿窗口程序界面,做出一些较复杂的布局.按由外层到内层的顺序: (最外层)panel->tabs->tabs1 ->tabs2->layout->北区 ->中区-> panel多个...(最里层) ->西区 开始没注意控件的加载顺序,只是将同一种控件统一加载了结果最里层的panel尺寸超出父容器. 一时想不明白,后来忽感觉到easyui会在加载控件时计算它的尺寸, 如果先加载了内层的panel再加载它的父容器控件,则一定尺寸不对.

UI控件懒加载问题01

UI 控件懒加载问题: 1, 什么时候使用懒加载加载UI控件? 2, 加载控件的什么属性? 3, 用什么类型的指针修饰控件? code : (ARC) 定义属性, @property(nonatomic,weak) UIButton *customBtn1;   重写getter方法 -(UIButton *)customBtn1{ if (_customBtn1 == nil) { _customBtn1 = [UIButton buttonWithType:UIButtonTypeCusto

C++_MFC 如何确定当页面是在 web 浏览器控件的加载

若要在 Visual C++ DocumentComplete 处理并确定完成该 Web 页的下载后,请按照下列步骤. 请注意,您所执行的步骤取决于您使用 web 浏览器控件的方式. 如果要在 CWnd/CView 对象创建 web 浏览器控件,则必须按照步骤 1 到 4. 如果您正在 CDialog/CFormView 对象中创建 web 浏览器控件,只需执行第 4 步. 如果您使用的 Visual C++ 6.0 所附带的 CHtmlView 类,重写 CHtmlView::Document

C# C1TrueDBGrid控件如何加载图片列

表格中加载图片是很常见的功能,尤其是网页中,图片的展示更是随处可见.这个功能在bs中很容易就实现了: 前台代码: <asp:GridView ID="GridView1" runat="server"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:Image ID="img1" ImageUrl='<%#Eval("img

C#在窗口中ComboBox控件中加载数据库数据

首先,窗体一加载,绑定省份和城市数据 //窗口加载事件 private void register_Load(object sender, EventArgs e) { bindPro();//绑定省份数据函数 } /// <summary> /// 绑定省份数据函数 /// </summary> public void bindPro() { //获取数据库数据 List<ProvinceData> list = new ProvinceDA().Select();

在WinForm应用程序中,使用选项卡控件来加载不同的Form界面!

1 TabPage tp=new TabPage(); 2 your选项卡控件.Controls.Add(tp); 3 4 From1 frm=new Form1(); 5 frm.TopLevel = false; 6 frm.Dock = DockStyle.Fill; 7 frm.FormBorderStyle =FormBorderStyle.None; 8 9 tp.Controls.Add(frm); 10 frm.Visible = true; 最近想了一些关于子窗体嵌套显示在父窗

DuiLib中的GifAnim控件无法加载或者播放Gif动画的解决办法

一.无法加载gif图片的问题,因为GifAnim控件加载图片使用的是Gdi+,然而在控件中并没有初始化Gdi+,所以只需要在自己的主窗口类中添加如下代码: 1 // 全局 2 Gdiplus::GdiplusStartupInput gdiplusStartupInput; 3 ULONG_PTR gdiplusToken; 4 // 初始化函数中 5 //初始化GDI+. 6 GdiplusStartup(&gdiplusToken, &gdiplusStartupInput, NULL