SAP UI5 Web Component的圖標實現

例子:我的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的圖標實現


分享到:


相關文章: