SAP UI5 Web Component的圖示實現

i042416發表於2020-02-21

例子:我的SAP UI5 Web Component開發而成的React應用上,顯示了這個加號圖示:

SAP UI5 Web Component的圖示實現


在React Component裡引入加號圖示:

SAP UI5 Web Component的圖示實現



在此處給ShellBarItem的icon屬性賦以add按鈕:

SAP UI5 Web Component的圖示實現


執行時效果如下:

SAP UI5 Web Component的圖示實現


我們再回過頭看看在程式碼裡匯入的add.js的內容:

SAP UI5 Web Component的圖示實現


pathData裡包含的值,其實就是基於SVG繪製而成的加號圖示在瀏覽器裡對應的g標籤的d屬性,如下圖所示:

SAP UI5 Web Component的圖示實現


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

相關文章