如何實現SAP UI5 Web Component React控制元件的載入效果
假設我使用SAP UI5 Web Component的React控制元件, 比如柱狀圖和折線圖:
匯入useState函式,預設載入狀態為false:
每次點選螢幕後,首先將Loading狀態使用切換函式setLoading設定成true,這樣可以看到控制元件正在載入的動畫效果。2秒鐘後,setLoading設定為false,關閉動畫效果。
下圖這道漸進式顯示的橫線就是控制元件載入時的動畫效果。
最後把loading變數賦給兩個Chart的loading屬性:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2676510/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- SAP UI5 Web Component的React表格控制元件用法UIWebReact控制元件
- 如何使用SAP UI5 Web Component for React的padding功能UIWebReactpadding
- SAP UI5 Web Component不同React頁面的跳轉實現UIWebReact
- SAP UI5 Web Component的圖示實現UIWeb
- SAP UI5 Web Component裡最簡單的React列表控制元件的用法UIWebReact控制元件
- SAP UI5 Web Component React應用如何在Component之間跳轉UIWebReact
- SAP UI5 Web Component for React的圖示和圖片處理UIWebReact
- SAP UI5 Web Component裡如何自定義CSS styleUIWebCSS
- 利用react-to-web-component封裝react控制元件ReactWeb封裝控制元件
- 如何實現 SAP UI5 的 Lazy Loading(延遲載入,懶載入)試讀版UI
- SAP UI5 應用的 Component.js 檔案是如何在執行時被載入的?UIJS
- React如何實現圖片懶載入React
- 如何在SAP Fiori應用裡使用React componentReact
- SAP UI5 應用如何載入自定義 ThemeUI
- 使用SAP UI5 Web Components開發React應用UIWebReact
- 關於 SAP UI5 控制元件內容的 Excel 匯出功能,如何載入所需的匯出工具庫UI控制元件Excel
- 深入學習SAP UI5框架程式碼系列之四:SAP UI5控制元件的後設資料實現UI框架控制元件
- 什麼是SAP UI5的Component-preload.jsUIJS
- SAP UI5 確保控制元件 id 全域性唯一的實現方法UI控制元件
- SAP UI5 sap-ui-core.js的載入邏輯UIJS
- 深入學習SAP UI5框架程式碼系列之六:SAP UI5控制元件資料繫結的實現原理UI框架控制元件
- 用 React 結合 SAP UI5 Web Components 來開發 SAP Fiori 應用ReactUIWeb
- SAP Spartacus 如何重定義登入 Login Component
- SAP UI5應用入口App.controller.js是如何被UI5框架載入的?UIAPPControllerJS框架
- Web 頁面如何實現動畫效果Web動畫
- Web 端 實現 app “輸入驗證碼 ”的效果WebAPP
- 基於 OData V4 的 SAP UI5 表格控制元件如何實現刪除功能試讀版UI控制元件
- 如何從 SAP Spartacus Product Detail 頁面,找到其 Angular 實現 Component 的位置AIAngular
- 如何修改 SAP UI5 框架的原始碼實現,以及使用本地部署的 SAP UI5 SDK 試讀版UI框架原始碼
- 如何製作包含了 component-preload.js 在內的 SAP UI5 釋出版本JSUI
- SAP UI5 sap.ui.layout.Grid 控制元件概述UI控制元件
- SAP UI5 SimpleForm 控制元件的 adjustLabelSpan 屬性UIORM控制元件
- SAP UI5 檢視裡的 OverflowToolbar 控制元件UI控制元件
- SAP UI5 DynamicPage 控制元件介紹UI控制元件
- SAP UI5 FlexibleColumnLayout 控制元件介紹UIFlex控制元件
- react非同步載入元件實現解析React非同步元件
- SAP UI5 Master-Detail 佈局模式的聯動效果實現明細介紹UIASTAI模式
- 實現web置頂效果Web