天天看点

SAP Spartacus B2B页面的List Component

需求如下:

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

SAP Spartacus B2B页面的List Component

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

SAP Spartacus B2B页面的List Component

如下图Budgets列表页面所示:

SAP Spartacus B2B页面的List Component

其Spartacus里的Component实现:ListComponent:

SAP Spartacus B2B页面的List Component
SAP Spartacus B2B页面的List Component

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

SAP Spartacus B2B页面的List Component

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

SAP Spartacus B2B页面的List Component

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

SAP Spartacus B2B页面的List Component

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

SAP Spartacus B2B页面的List Component

继续阅读