SAP Spartacus cx-split-view几个css属性值的逻辑依赖关系

初始情况：

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属性值的逻辑依赖关系相关推荐

SAP Spartacus里unit list tree节点expanded属性的赋值逻辑
如下图所示:标识为1和2的unit, 其后台数据的expanded属性值,分别为true和false: 而SAP Commerce Cloud OCC API返回的数据里,根本没有这个字段: 这个属性 ...
getComputedStyle currentStyle 获取当前元素所有最终使用的CSS属性值
object.getComputedStyle 获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象,只读,不能设置. 此方法不兼容IE8及以下,需用currentStyle方法. ...
css 选择href属性值,巧用CSS属性值正则匹配选择器(小技巧)
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
理解 CSS 属性值语法
本文转载自:众成翻译链接:http: //www.zcfy.cc/article/390 万维网联盟(W3C) 使用了一套特别的语法来定义 CSS 的属性值,能让所有的 CSS 属性都用.如果你曾看 ...
css提取页面元素唯一性_下面这个函数，能够获取一个元素的任意 CSS 属性值。...
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...
php 获取css值,如何通过JS获取CSS属性值
JS获取CSS属性 #f{background-color:#FF0000;} var o = document.getElementById('f'); document.write(o.style ...
js获取css属性值的方法
js操作获取dom元素的样式属性值 obj.style: 它只能够获取通过style设置的元素CSS属性值: 在html标签内通过style设置行内属性通过.dom.style.width=&quo ...
【CSS 属性值分类: 指定值,计算值,使用值,实际值的区别】
CSS 属性值的分类 CSS 属性值的分类 ⑴ 指定值 ⑵ 计算值 ⑶ 使用值 ⑷ 实际值 ♣ 结束语和友情链接 CSS 属性值的分类开发者设定的指定值 ≠ 实际值的情况浏览器和属性值的 ...
CSS属性值之百分数
百分数由一个数字和一个百分号组成,数字和百分号之间,不允许出现空格.百分数可以是整数或小数,可以是正数或负数.如果数字为0,则可以省略百分号. 百分比的值几乎总是相对于另一个值(如长度单位)计算得到的 ...

SAP Spartacus cx-split-view几个css属性值的逻辑依赖关系

SAP Spartacus cx-split-view几个css属性值的逻辑依赖关系相关推荐

最新文章

热门文章