SAP Spartacus B2B 页面的 Popup Component
- 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
点击明细页面，出现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的原创文章，尽在：“汪子熙”:
SAP Spartacus B2B 页面的 Popup Component相关推荐
- SAP Spartacus B2B页面的List Component
需求如下: 不管选择左边的view里列表行项目的哪一条,右边页面第一个可以被focus的元素,即Edit按钮,需要自动被focus: 如果像上图这样,将cxFocus直接施加到a标签页上,一个side ...
- SAP Spartacus B2B页面的6个tile，url是维护在什么地方的？
我借用了SAP Fiori里"tile"的概念. 查看加载的HTTP请求response:MyCompany Slot里,正好包含6个Component: 有一个BannerCom ...
- SAP Spartacus B2B页面的BodyContent position
B2B home页面使用的template:CompanyPageTemplate 如果把default-organization-layout.config.ts里的defaultOrganizat ...
- SAP Spartacus home页面的layout，template，section和slots
本地编辑这个文件: projects\storefrontlib\src\cms-structure\page\page-layout\page-layout.component.html 加上如下代 ...
- SAP Spartacus Storefront页面的page layout config
在page-layout.service.ts里的getPageFoldSlot方法设置断点: 在this.config里即可获得所有的配置信息.其中和layout相关的breakpoints: la ...
- SAP Spartacus产品页面的normalizer
新建一个product-name-normalizer.ts文件,源代码如下: import { Injectable } from '@angular/core'; import { Convert ...
- SAP Spartacus home 页面的 cx-page-slot selector
页面slots数据slots$通过*ngFor展开,传入position: 通过set接收: position$是一个behaviorSubject,将position的值广播给其subscriber ...
- SAP Spartacus B2B 列表页面的 (i) icon popover Component 的声明位置
SAP Spartacus B2B 页面的列表页面,一共有 6 个类似 SAP Fiori Language 里的 tile(磁贴): 点击去之后,能看到列表页面有一个绿色 icon 图标,点击之后, ...
- SAP Spartacus B2B Popover Directive 和 Popover Component 的生命周期管理
解析 SAP Spartacus B2B list 实现,即list.component.html时,因为在Component 模板里遇到了[cxPopover]指令,因此触发依赖注入: 首先创建di ...
最新文章
- python答辩结束语_Beta答辩总结
- 小功能 - 收藏集 - 掘金
- dbforge schema compare for mysql_DbForge Schema Compare for MySQL入门教程：生成比较报告
- C++实现chaining链式算法(附完整源码)
- java怎么把数组的元素个数_想问一下怎样才可以把一个数 放在已知数组里面
- Vuejs 动态绑定属性
- faststart可以卸载吗_你的手机你做主！免 ROOT 卸载安卓手机预装APP
- 第二十讲、迭代器模式
- unity ui小技巧
- C++11多线程std::thread的简单使用
- java学生成绩管理设计报告_Java 学生成绩管理系统（含论文，开题报告）源码
- 区块链毕业设计中期检查表模板
- 火龙果的全球与中国市场2022-2028年：技术、参与者、趋势、市场规模及占有率研究报告
- 执行celery -A tasks worker --loglevel=info报错
- Android应用模拟返回键、home键
- java主程序怎样调用子程序_主程序调用子程序使用（ ）指令。
- 浙江省杭州职称评审申报时间
- Udacity优达学城优惠码 5641874B 立减320元
- [Linux]阿里云万网域名-腾讯云服务器nginx下配置免费的https
- Git基本命令【查看配置信息】【获取help帮助查看命令使用方法】