如何實現SAP UI5 Web Component React控制元件的載入效果

i042416發表於2020-02-21

假設我使用SAP UI5 Web Component的React控制元件, 比如柱狀圖和折線圖:

如何實現SAP UI5 Web Component React控制元件的載入效果 如何實現SAP UI5 Web Component React控制元件的載入效果

匯入useState函式,預設載入狀態為false:

如何實現SAP UI5 Web Component React控制元件的載入效果


每次點選螢幕後,首先將Loading狀態使用切換函式setLoading設定成true,這樣可以看到控制元件正在載入的動畫效果。2秒鐘後,setLoading設定為false,關閉動畫效果。

如何實現SAP UI5 Web Component React控制元件的載入效果


下圖這道漸進式顯示的橫線就是控制元件載入時的動畫效果。


如何實現SAP UI5 Web Component React控制元件的載入效果

最後把loading變數賦給兩個Chart的loading屬性:

如何實現SAP UI5 Web Component React控制元件的載入效果


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2676510/,如需轉載,請註明出處,否則將追究法律責任。

相關文章