天天看點

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

繼續閱讀