SAP Spartacus B2B 页面的 Popup Component

Spartacus标准开发 同时被 2 个专栏收录
700 篇文章 4 订阅
518 篇文章 5 订阅
  1. we’ll make the name a link to save space, no “Details” word
  2. user clicks name and sees popover with details
  3. details popover contains link to actual thing

点击明细页面,出现popup Component:

Unit是一个超链接,指向真实的entity:

设计原理:

  • PopoverComponent - shared in storefrontlib

  • DetailsCellComponent include PopoverComponent - shared in organization lib

  • UserGroupDetailsCellComponent extend DetailsCellComponent

cx-org-user-details-cell:

这个popup Component的设计:

cxPopover自定义Directive:cxPopover, 绑定到页面的id为details的ng-template模板:

单击之后:

Popover.directive.ts里的toggle负责关闭/打开popover:

renderPopover:

最后的结果:

更多Jerry的原创文章,尽在:“汪子熙”:

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值