如何實現SAP UI5 Web Component React控件的加載效果

假設我使用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控件的加載效果


分享到:


相關文章: