所有 weex 标签都有以下基本样式规则。
weex 盒模型基于 CSS 盒模型,每个 weex 元素都可视作一个盒子。我们一般在讨论设计或布局时,会提到「盒模型」这个概念。
元素实际的内容(content)、内边距(paddings)、边框(borders)、外边距(margins),形成一层层的盒子包裹起来,这就是盒模型大体上的含义。
注意:目前在 <image>
和 <text>
组件上尚无法只定义一个或几个角的 border-radius。比如你无法在这两个组件上使用 border-top-left-radius
。
weex 盒模型的 box-sizing
默认为 border-box
,即盒子的宽高包含内容、内边距和边框的宽度,不包含外边距的宽度。
示例:
<template>
<div>
<image src="..." style="width: 400; height: 200; margin-left: 20;"></image>
</div>
</template>
weex 布局模型基于 CSS 的 Flexbox。以便所有页面元素的排版能够一致可预测,同时页面布局能适应各种设备或者屏幕尺寸。
Flexbox 包含 flex 容器和 flex 成员项。如果一个 weex 元素可以容纳其他元素,那么它就成为 flex 容器。需要注意的是,flexbox 的老版规范相较新版有些出入,比如是否能支持 wrapping。这些都描述在 W3C 的工作草案中了,你需要注意下新老版本之间的不同。另外,老版本只在安卓 4.4 版以下得到支持。
在 weex 中,Flexbox 是默认且唯一的样式模型,所以你不需要手动为元素添加 display: flex;
属性。
flex-direction
: row
| column
column
,即从左到右、从上到下。
justify-content
: flex-start
| flex-end
| center
| space-between
flex-start
是默认值,即左对齐,所有的 flex 成员项都排列在容器的前部;flex-end
则意味着右对齐,成员项排列在容器的后部;center
即中间对齐,成员项排列在容器中间、两边留白;space-between
表示两端对齐,空白均匀地填充到 flex 成员项之间。align-items
: stretch
| flex-start
| center
| flex-end
stretch
是默认值,即拉伸高度至 flex 容器的大小;flex-start
则是上对齐,所有的成员项排列在容器顶部;flex-end
是下对齐,所有的成员项排列在容器底部;center
是中间对齐,所有成员项都垂直地居中显示。flex: 1
,那么它们就有相等的宽度(水平排列)或者相等的高度(垂直排列)。如果一共有两个成员项,其中一个 flex: 1
,另一个 flex: 2
,那么第一个将占据 1/3 的空间,另一个占据 2/3。如果所有 flex 成员项都不设置 flex
属性,它们将根据容器的 justify-content
属性来决定如何排列。
一组平分了容器的图片。
<template>
<div style="width: 300; height: 100;">
<image src="..." style="flex: 1;"></image>
<image src="..." style="flex: 1;"></image>
<image src="..." style="flex: 1;"></image>
</div>
</template>
一张固定宽度的图片加上一段流动布局的文本。
<template>
<div style="width: 300; height: 100;">
<image src="..." style="width: 100; height: 100;"></image>
<text style="flex: 1;">...</text>
</div>
</template>
复杂的混合布局。
<template>
<div style="width: 100;">
<image src="..." style="width: 100; height: 100;"></image>
<div style="flex-direction: row;">
<text style="flex: 2; font-size: 32;">title</text>
<text style="flex: 1; font-size: 16;">$100</text>
</div>
</div>
</template>
一段文本左对齐,其他内容右对齐。
<template>
<div style="flex-direction: row; justify-content: space-between;">
<text>WEEX</text>
<text>2016-05-08</text>
</div>
</template>
我们可以使用以下属性来定位一个 weex 元素。
position
: relative
| absolute
| fixed
| sticky
relative
是默认值,指的是相对定位;absolute
是绝对定位,以元素的容器作为参考系;fixed
保证元素在页面窗口中的对应位置显示;sticky
指的是仅当元素滚动到页面之外时,元素会固定在页面窗口的顶部。
top
: <number>bottom
: <number>left
: <number>right
: <number><template>
<div style="flex-direction: column;">
<div style="height: 3000;">
<image src="..." style="top: 50; left: 50; ..."></image>
</div>
<div style="height: 3000;">
<image src="..." style="position: sticky; ..."></image>
</div>
<div style="height: 3000;">
<image src="..." style="position: absolute; top: 50; left: 50; ..."></image>
</div>
</div>
</template>
opacity
: <number>background-color
: <colors>transparent
。
px
作为单位,px
也可以省略。
rgb(255, 0, 0)
);RGBA(rgba(255, 0, 0, 0.5)
);十六进制(#ff0000
);精简写法的十六进制(#f00
);色值关键字(red
)。
注意: 色值的关键字列表。
你可以按照以下步骤来规划 weex 页面的样式。