初始情況：

active-view: 1
整個split view的style：–cx-active-view:1

包含一個子cx-view:

• position:0
• disappeared: false
• –cx-view-position:0

選中一個行項目之后：

cx-split-view的屬性：

• active-view:2
• –cx-active-view: 2

第一個cx-view: disappeared: false

第二個cx-view:
position:1
disappeared: false

點擊這個users超鏈接之后：

整個cx-split-view:

active-view: 3
–cx-active-view: 3
第一個cx-view處于不可見狀態：disappeared: true

&:not([active-view='1']) {cx-view[position='0'] {border:1px solid red;padding-inline-end: var(--cx-split-gutter);border-inline-end: solid 0 var(--cx-color-light);border-inline-end-width: calc(min(var(--cx-active-view) - 1, 1) * 1px);}}

–cx-active-view: 這個變量主要用來計算寬度：

–cx-active-view決定–cx-view-flex的值：

–cx-view-flext決定position為0的view，被隱藏時的margin-inline-start位置：

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

總結

以上是生活随笔為你收集整理的SAP Spartacus cx-split-view几个css属性值的逻辑依赖关系的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。