Weex Style 支持表
优质
小牛编辑
130浏览
2023-12-01
css 支持列表
样式表和 CSS 规则是由 Weex js 框架和原生渲染引擎管理的。要实现完整的 CSS 对象模型(CSSOM:CSS Object Model)并支持所有的 CSS 规则是非常困难的,而且没有这个必要。
出于性能考虑,Weex 目前只支持单个类选择器,并且只支持 CSS 规则的子集。
Weex 对于长度值目前只支持像素值,不支持相对单位(em、rem)。Rax 中的 rpx 单位将会转换为 px
样式支持程度参考
下表中 weex sdk version 是支持的最低版本,这份整理是来自 weex 0.16.0 的 style 支持情况
border | default | values | weex sdk version | platform |
---|---|---|---|---|
border-style | solid | solid, dashed, dotted | 0.5.0 | |
border-left-style | solid | solid, dashed, dotted | 0.5.0 | |
border-top-style | solid | solid, dashed, dotted | 0.5.0 | |
border-right-style | solid | solid, dashed, dotted | 0.5.0 | |
border-bottom-style | solid | solid, dashed, dotted | 0.5.0 | |
border-width | 0px | 0.5.0 | ||
border-left-width | 0px | 0.5.0 | ||
border-top-width | 0px | 0.5.0 | ||
border-right-width | 0px | 0.5.0 | ||
border-bottom-width | 0px | 0.5.0 | ||
border-color | #000000 | 0.5.0 | ||
border-left-color | #000000 | 0.5.0 | ||
border-top-color | #000000 | 0.5.0 | ||
border-right-color | #000000 | 0.5.0 | ||
border-bottom-color | #000000 | 0.5.0 | ||
border-radius | 0px | 0.5.0 | ||
border-left-radius | 0px | 0.5.0 | ||
border-top-radius | 0px | 0.5.0 | ||
border-right-radius | 0px | 0.5.0 | ||
border-bottom-radius | 0px | 0.5.0 |
box-shadow | default | values | weex sdk version | platform |
---|---|---|---|---|
box-shadow | 0.11.0 | ios |
flex | default | values | weex sdk version | platform |
---|---|---|---|---|
flex-direction | column | column, row | 0.5.0 | |
justify-content | flex-start | flex-start, flex-end, center, space-between | 0.5.0 | |
align-items | stretch | stretch, flex-start, flex-end, center | 0.5.0 | |
padding-bottom | 0px | 0.5.0 |
gradient | default | values | weex sdk version | platform |
---|---|---|---|---|
linear-gradient | 0.10.0 |
height | default | values | weex sdk version | platform |
---|---|---|---|---|
height | 0px | 0.5.0 |
margin | default | values | weex sdk version | platform |
---|---|---|---|---|
margin-left | 0px | 0.5.0 | ||
margin-right | 0px | 0.5.0 | ||
margin-top | 0px | 0.5.0 | ||
margin-bottom | 0px | 0.5.0 |
other-common-style | default | values | weex sdk version | platform |
---|---|---|---|---|
opacity | 1 | 0.5.0 | ||
background-color | transparent | 0.5.0 |
padding | default | values | weex sdk version | platform |
---|---|---|---|---|
padding-left | 0px | 0.5.0 | ||
padding-right | 0px | 0.5.0 | ||
padding-top | 0px | 0.5.0 | ||
padding-bottom | 0px | 0.5.0 |
position | default | values | weex sdk version | platform |
---|---|---|---|---|
position | relative | relative, absolute, fixed, sticky | 0.5.0 | |
left | 0px | 0.5.0 | ||
right | 0px | 0.5.0 | ||
top | 0px | 0.5.0 | ||
bottom | 0px | 0.5.0 |
pseudo-class | default | values | weex sdk version | platform |
---|---|---|---|---|
active | 0px | 0.9.5 | ||
focus | 0px | 0.9.5 | ||
disabled | 0px | 0.9.5 | ||
enabled | 0px | 0.9.5 |
text | default | values | weex sdk version | platform |
---|---|---|---|---|
color | 0.5.0 | |||
lines | 0 | 0.5.0 | ||
font-size | 0.5.0 | |||
font-style | normal | normal, italic | 0.5.0 | |
font-weight | normal | normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 | 0.9.0 | |
text-decoration | none | none, underline, line-through | 0.5.0 | |
text-align | left | left, center, right | 0.5.0 | |
font-family | 0.5.0 | |||
text-overflow | clip, ellipsis | 0.5.0 |
transform | default | values | weex sdk version | platform |
---|---|---|---|---|
translateX | 0.5.0 | |||
translateY | 0.5.0 | |||
scale | 0.5.0 | |||
scaleX | 0.5.0 | |||
scaleY | 0.5.0 | |||
rotate | 0.5.0 | |||
rotateX | 0.14.0 | |||
rotateY | 0.14.0 | |||
perspective | 0.16.0 | android | ||
transform-origin | 0.5.0 |
transition | default | values | weex sdk version | platform |
---|---|---|---|---|
transition-property | width, height, top, bottom, left, right, backgroundColor, opacity, transform | 0.16.0 | ||
transition-duration | 0 | 0.16.0 | ||
transition-delay | 0 | 0.16.0 | ||
transition-timing-function | ease | ease, ease-in, ease-out, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) | 0.16.0 |
width | default | values | weex sdk version | platform |
---|---|---|---|---|
width | 0px | 0.5.0 |