we’ll make the name a link to save space, no “Details” word

user clicks name and sees popover with details

details popover contains link to actual thing

點擊明細頁面，出現(xiàn)popup Component：

Unit是一個超鏈接，指向真實的entity：

設(shè)計原理：

• PopoverComponent - shared in storefrontlib

• DetailsCellComponent include PopoverComponent - shared in organization lib

• UserGroupDetailsCellComponent extend DetailsCellComponent

cx-org-user-details-cell:

這個popup Component的設(shè)計：

cxPopover自定義Directive：cxPopover, 綁定到頁面的id為details的ng-template模板：

單擊之后：

Popover.directive.ts里的toggle負責(zé)關(guān)閉/打開popover：

renderPopover:

最后的結(jié)果：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的SAP Spartacus B2B 页面的 Popup Component的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。