SAP Spartacus B2B页面的List Component

需求如下：

不管选择左边的view里列表行项目的哪一条，右边页面第一个可以被focus的元素，即Edit按钮，需要自动被focus：

如果像上图这样，将cxFocus直接施加到a标签页上，一个side effect就是，a标签的tabindex将会被设置成默认的-1，这样没办法接收接下来的tab事件了：

如下图Budgets列表页面所示：

其Spartacus里的Component实现：ListComponent：

显示不同数据的cx-org-list通过class值的不同来区分：

cx-org-list即ListComponent，内部包含了cx-split-view, 两个子view，左边的cx-view, class为list，右边的子view，class为card.

右边最外层为cx-org-budget-details:

每个detail页面岂不是都要做同样的修改：

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

SAP Spartacus B2B页面的List Component相关推荐

SAP Spartacus B2B 页面的 Popup Component
we'll make the name a link to save space, no "Details" word user clicks name and sees popo ...
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 ...

SAP Spartacus B2B页面的List Component

SAP Spartacus B2B页面的List Component相关推荐

最新文章

热门文章