初始情況：

active-view: 1
整個(gè)split view的style：–cx-active-view:1

包含一個(gè)子cx-view:

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

選中一個(gè)行項(xiàng)目之后：

cx-split-view的屬性：

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

第一個(gè)cx-view: disappeared: false

第二個(gè)cx-view:
position:1
disappeared: false

點(diǎn)擊這個(gè)users超鏈接之后：

整個(gè)cx-split-view:

active-view: 3
–cx-active-view: 3
第一個(gè)cx-view處于不可見狀態(tài)：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: 這個(gè)變量主要用來計(jì)算寬度：

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

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

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。