退出系统
2.0 版本 weex 版本

graceUI - weex 教程 - 通用样式

weex 通用样式

所有 Weex 自带组件都支持以下通用样式规则。

Weex所支持的通用样式已在本文档中全部列出,一些组件可能有自定义样式,请参考组件文档。除此之外的属性,均不被支持。

Weex 对于长度值目前只支持像素值,不支持相对单位(em、rem)。
盒模型

Weex 盒模型基于 CSS 盒模型,每个 Weex 元素都可视作一个盒子。
我们一般在讨论设计或布局时,会提到「盒模型」这个概念。  
graceUi.png
这四层边界,形成一层层的盒子包裹起来,这就是盒模型大体上的含义。
注意:

Weex 盒模型的 box-sizing 默认为 border-box,即盒子的宽高包含内容、内边距和边框的宽度,不包含外边距的宽度。
在 Android 平台,Weex 只支持 overflow:hidden。
在 iOS 上,Weex 支持 overflow:hidden 和 overflow:visible,默认是 overflow:visible。

# 宽度

width {length}:默认值 0

# 高度

height {length}:默认值 0

# 内边距

padding {length}:内边距,内容和边框之间的距离,默认值 0。与标准 CSS 类似,padding 支持简写,也可分解为以下四个:
padding {length}: 上、下、左、右四边内边距,默认值 0
padding-left {length}:左内边距,默认值 0
padding-right {length}:右内边距,默认值 0
padding-top {length}:上内边距,默认值 0
padding-bottom {length}:下内边距,默认值 0

# 边框

Android 兼容性

你有可能会遇如下Crash Unable to create layer for xxx 如果你的含有 border 的 component 的长度超过了最大值,因为这会使 OpenGL 内存区域发生 OutOfMemory。

你的 component 的允许的最大值与机器有关,但一般来说,如果你的 component 的大小超过屏幕大小,就有可能触发Crash。

# border-style

border-width设定边框样式,如果四个方向的边框样式不同,可分别设置:
border-style {string}
border-left-style {string}:可选值为 solid | dashed | dotted,默认值 solid
border-top-style {string}:可选值为 solid | dashed | dotted,默认值 solid
border-right-style {string}:可选值为 solid | dashed | dotted,默认值 solid
border-bottom-style {string}:可选值为 solid | dashed | dotted,默认值 solid

# border-width

border-width:设定边框宽度,非负值, 默认值 0,如果四个方向的边框宽度不同,可分别设置:
border-width {length}:非负值, 默认值 0
border-left-width {length}:非负值, 默认值 0
border-top-width {length}:非负值, 默认值 0
border-right-width {length}:非负值, 默认值 0
border-bottom-width {length}:非负值, 默认值 0

# border-color

border-color:设定边框颜色,默认值 #000000,如果四个方向的边框颜色不同,可分别设置:
border-color {color}:默认值 #000000
border-left-color {color}:默认值 #000000
border-top-color {color}:默认值 #000000
border-right-color {color}:默认值 #000000
border-bottom-color {color}:默认值 #000000

# border-radius

border-radius:设置边框的圆角,默认值 0,如果四个方向的圆角弧度不同,可分别设置:
border-radius {length}: 非负值, 默认值 0
border-bottom-left-radius {length}:非负值, 默认值 0
border-bottom-right-radius {length}:非负值, 默认值 0
border-top-left-radius {length}:非负值, 默认值 0
border-top-right-radius {length}:非负值, 默认值 0

注意

border-radius和border-width定义了圆心角为90度的椭圆弧的长轴和半长轴的大小。如果邻接两边border-radius(或border-width不一致,weex绘制的边框曲线可能不够平滑。
Android 兼容性
尽管 overflow: hidden 在 Android 上是默认行为,但只有下列条件都满足时,一个父 view 才会去剪切它的子 view。

# 外边距

margin {length}:外边距,元素和元素之间的空白距离,默认值 0。与标准 CSS 类似,margin 支持简写,也可分解为四边:
margin {length}: 上、下、左、右四边外边距,默认值 0
margin-left {length}:左外边距,默认值 0
margin-right {length}:右外边距,默认值 0
margin-top {length}:上外边距,默认值 0
margin-bottom {length}:下外边距,默认值 0

线性渐变 0.10+

Weex 支持线性渐变背景,具体介绍可参考 CSS 渐变介绍。

所有组件均支持线性渐变。# 使用

你可以通过 background-image 属性创建线性渐变。

background-image: linear-gradient(to top, #a80077, #66ff00);

目前暂不支持 radial-gradient(径向渐变)。

Weex 目前只支持两种颜色的渐变,渐变方向如下:

to right:从左向右渐变
to left:从右向左渐变
to bottom:从上到下渐变
to top:从下到上渐变
to bottom right:从左上角到右下角
to top left:从右下角到左上角

注意

background-image 优先级高于 background-color,这意味着同时设置 background-image 和 background-color,background-color 被覆盖。
background 不支持简写。

阴影(box-shadow) 0.11+

Weex 支持 box-shadow 属性用于设置元素阴影。

# 注意

目前仅 iOS 支持 box-shadow 属性,Android 暂不支持,可以使用图片代替。


# 文本样式

文本类组件共享一些通用样式, 这类组件目前包括 <text>、<input>和<richtext>

# 属性

# color
color {color}:文字颜色,支持如下字段: * RGB( rgb(255, 0, 0) ) * RGBA( rgba(255, 0, 0, 0.5) ) * 十六进制( #ff0000 );精简写法的十六进制( #f00 ) * 色值关键字(red)

# font-size
font-size {number}:文字大小。

# font-style
font-style {string}:字体类别。可选值 normal | italic,默认为 normal。

# font-weight
font-weight {string}:字体粗细程度
可选值: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900
normal 等同于 400, bold 等同于 700;

# text-decoration
text-decoration {string}:字体装饰,可选值 none | underline | line-through,默认值为 none。
只支持 <text> 和 <ricthext>

# text-algin
text-align {string}:对齐方式。可选值 left | center | right,默认值为 left。

# font-family
font-family {string}:设置字体。

# text-overflow
text-overflow {string}:设置内容超长时的省略样式。可选值 clip | ellipsis

# lines
lines {number}: 正整数,指定最大文本行数,默认值为0,表示不限制最大行数。如果文本不够长,实际展示行数会小于指定行数。

# line-height
line-height {length}:正整数,每行文字高度。、line-height是 top 至 bottom 的距离。

# word-wrap
word-wrap:<string> break-word | normal | anywhere. 对 Weex 来说 anywhere 表示在以字符为最小元素做截断换行,其它值或不指定该属性,都以英文单词为单位进行换行。