Weex第一天:公共样式

所有的weex标签都有一些共同的风格规则

盒模型

Weex框架模型基于CSS框模型，所有weex元素可以被视为框。谈论设计和布局时，使用术语“盒子模型”。盒子模型本质上是一个包装每个HTML元素的盒子。它由边距，边框，填充和实际内容组成。

您可以在weex box模型中使用下面的定义。

width：length类型，默认值0
height：length类型，默认值0
padding：length类型，默认值0，（元素内容和元素边框之间的内容空间）
- padding-left：length类型，默认值0
- padding-right：length类型，默认值0
- padding-top：length类型，默认值0
- padding-bottom：length类型，默认值0
margin：length类型，默认值0，（元素周围的空间，边界外）
- margin-left：length类型，默认值0
- margin-right：length类型，默认值0
- margin-top：length类型，默认值0
- margin-bottom：length类型，默认值0
border
- border-style：值solid| dashed| dotted，默认值solid
  - border-left-style：值solid| dashed| dotted，默认值solid
  - border-top-style：值solid| dashed| dotted，默认值solid
  - border-right-style：值solid| dashed| dotted，默认值solid
  - border-bottom-style：值solid| dashed| dotted，默认值solid
- 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：color类型，默认值#000000
  - border-left-color：color类型，默认值#000000
  - border-top-color：color类型，默认值#000000
  - border-right-color：color类型，默认值#000000
  - border-bottom-color：color类型，默认值#000000
border-radius：length类型，默认值0，（元素的圆角边界，默认值为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

笔记

Weex框模型border-box用作默认值box-sizing，意味着宽度和高度属性包括内容，填充和边框，但不包括边距。

iOS中的border-top-left-radius组件目前不支持特定角落的border-radius规则<image>。这只发生在iOS上，它在Android上正常工作。

尽管overflow:hidden在android上是默认的，但除非满足以下所有条件，否则视图将不会剪辑其子项border-radius。这只发生在Android上，它在iOS上正常工作。

视图类型是div，a，cell，refresh或loading。
操作系统版本是Android 4.3或更高。
操作系统版本不是 Andorid 7.0
视图不具有background-image的性质或OS版本为Android 5.0或更高。

例

< template > < div > < image src = “...” style = “width：400; height：200; margin-left：20;” > </ image > </ div > </ template >
复制代码

Flexbox

Weex框式风格模型基于CSS flexbox，确保元素的行为可预测，页面布局可以适应不同的屏幕尺寸和不同的显示设备。

Flexbox由柔性容器和柔性物品组成。如果weex元素可以包含其他元素，则它是一个弹性容器。

请注意，旧版本的Flexbox规范与新版本有所不同，例如是否支持包装。这在w3c的工作草案中有描述，你应该注意到它们之间的差异。另外请注意，旧版本只支持4.4以下的Android版本。

Flex容器

Flexbox是Weex中的默认和唯一样式模型，因此您不必添加display: flex;到容器中。

flex-direction：值row| column，默认值column

柔性方向属性指定柔性容器内柔性物品的方向。默认值是column（从上到下）。

justify-content：值flex-start| flex-end| center| space-between，默认值flex-start

当项目没有使用主轴上的所有可用空间时，justify-content属性会将柔性容器的项目水平对齐。默认值是flex-start指flex项目位于容器的开始位置。flex-end意味着物品位于容器的末端。center意味着物品位于容器的中心。space-between意味着项目被定位在线条之间的空间。

align-items：值stretch| flex-start| center| flex-end，默认值stretch

当项目不使用横轴上的所有可用空间时，align-items属性会将柔性容器的项目垂直对齐。默认值是stretch指项目被拉伸以适应容器。flex-start意味着物品位于容器的顶部; flex-end意味着物品位于容器的底部; center意味着物品位于容器的中心（垂直）。

Flex项目

flex：number类型，默认值0

flex属性指定flex项目的长度，相对于同一个容器内其余的flex项目。如果所有的弹性物品都设置了flex: 1，它们在弹性容器的方向上将具有相同的宽度或高度flex-direction。如果有两个弹性项目，一个设置flex: 1，另一个设置flex: 2，第一个将占用1/3的容器空间，第二个将占用2/3的容器空间。如果所有的弹性项目都没有设置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

relative意味着物品相对于其正常位置被定位。absolute意味着物品相对于其容器被定位。fixed在页面滚动时保持元素位置固定。sticky保持位于视口内部的元素在顶部“卡住”或在其原始位置“相对”，这取决于是否要滚动视图。

top：number类型，默认值0，向上偏移值
bottom：number类型，默认值0，向下偏移值
left：number类型，默认值0，向左偏移值
right：number类型，默认值0，向右偏移值

例子

<template><div style="flex-direction: column;"><div style="height: 3000;"><image src="..." style="top: 50px; left: 50px;"></image></div><div style="height: 3000;"><image src="..." style="position: sticky;"></image></div><div style="height: 3000;"><image src="..." style="position: absolute; top: 50px; left: 50px;"></image></div></div>
</template>
复制代码

transform

使用CSS transform属性可以修改CSS可视格式模型的坐标空间。使用它，元素可以被翻译，旋转和缩放。

支持以下样式

translate
translateX
translateY
scale
scaleX
scaleY
rotate
rotateX
rotateY
perspective
transform-origin

例子

<template><div class="wrapper"><div class="transform"><text class="title">Transformed element</text></div></div>
</template><style>.transform {align-items: center;transform: translate(150px,200px) rotate(20deg);transform-origin: 0 -250px;border-color:red;border-width:2px;}.title {font-size: 48px;}
</style>
复制代码

transition

现在，您可以使用CSS中的transition属性来增强应用程序的交互性和视觉体验。过渡包括布局动画，即LayoutAnimation，它现在改变布局并使用过渡的流畅动画。Transition允许CSS属性值在一定的时间间隔内平滑过渡。

属性

transition-property：允许过渡动画的名称设置不同样式转换效果的值，默认值为空，即不执行任何转换，下表列出了该属性的所有合法参数：
- width 在组件的宽度涉及动画时执行转换
- height 在组件的高度参与动画时执行转换
- top 当组件的顶部涉及动画时，将执行转换
- bottom 当组件的底部涉及动画时执行转换
- left 当组件的左侧涉及动画时执行转换
- right 在组件的右侧涉及动画时执行转换
- backgroundColor 在组件的backgroundColor参与动画时执行转换
- opacity 在组件的不透明度涉及动画时执行转换
- transform 转换是在组件转换涉及动画时执行
transition-duration：指定转换转换的持续时间（以毫秒为单位）。默认值是0，表示没有动画。
transition-delay：指定请求转换转换和转换转换之间的时间间隔（以毫秒或秒为单位）。默认值为0，表示没有延迟，并且在请求之后立即执行转换转换。
transition-timing-function：描述转换转换的速度曲线，用于使转换转换更平滑。默认是简单的。下表列出了所有有效的属性：
- ease 转型逐渐放缓了转型效应
- ease-in 转换开始缓慢，然后转换效果变得更快
- ease-out 过渡很快开始，然后放慢过渡效果
- ease-in-out 过渡开始缓慢，然后快速，然后慢慢结束过渡效果
- linear 转换以恒定的速度变化
- cubic-bezier(x1, y1, x2, y2) 使用三阶Bessel函数中的自定义转换，函数的参数值必须介于0和1之间。有关三次Bessel的更多信息，请参阅三次贝塞尔曲线和Bézier曲线。

例

<style scoped>.panel {margin: 10px;top:10px;align-items: center;justify-content: center;border: solid;border-radius: 10px;transition-property: width,height,backgroundColor;transition-duration: 0.3s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);}
</style>
复制代码

伪类

Weex支持4组伪类：active，focus，disabled，enabled

所有组件都支持active，但只有输入组件和TextArea组件支持focus，enabled，diabled。

规则

当规则同时生效时，高优先级覆盖低优先级
- 如：“input：active：enabled”将覆盖“input：active”
互连规则如下

例

<template><div class="wrapper"><image :src="logoUrl" class="logo"></image></div>
</template><style scoped>.wrapper {align-items: center;margin-top: 120px;}.title {font-size: 48px;}.logo {width: 360px;height: 82px;background-color: red;}.logo:active {width: 180px;height: 82px;background-color: green;}
</style><script>export default {props: {logoUrl: {default: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png'},target: {default: 'World'}},methods: {update (e) {this.target = 'Weex';}}};
</script>
复制代码

linear-gradient

Weex支持线性渐变背景，您可以看到渐变的W3C描述。

支持的组件

Weex中的所有组件都支持渐变

用法

您可以按background-image属性使用线性渐变

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

radial-gradient 目前不支持，不要使用它。

Weex目前支持两种颜色渐变。梯度的方向如下所示：

从右到左
向左从右向左
底部从上到下
顶部从底部到顶部
到右下角从左上角到右下角
左上角从右下角到左上角

注意

background-image并background-color在同一时间设置，background-image先于background-color。
不要使用速记属性如background。

例

<template><scroller style="background-color: #3a3a3a"><div class="container1" style="background-image:linear-gradient(to right,#a80077,#66ff00);"><text class="direction">to right</text></div><div class="container1" style="background-image:linear-gradient(to left,#a80077,#66ff00);"><text class="direction">to left</text></div><div class="container1" style="background-image:linear-gradient(to bottom,#a80077,#66ff00);"><text class="direction">to bottom</text></div><div class="container1" style="background-image:linear-gradient(to top,#a80077,#66ff00);"><text class="direction">to top</text></div><div style="flex-direction: row;align-items: center;justify-content: center"><div class="container2" style="background-image:linear-gradient(to bottom right,#a80077,#66ff00);"><text class="direction">to bottom right</text></div><div class="container2" style="background-image:linear-gradient(to top left,#a80077,#66ff00);"><text class="direction">to top left</text></div></div></scroller>
</template>
<style>.container1 {margin: 10px;width: 730px;height: 200px;align-items: center;justify-content: center;border: solid;border-radius: 10px;}.container2 {margin: 10px;width: 300px;height: 300px;align-items: center;justify-content: center;border: solid;border-radius: 10px;}.direction {font-size: 40px;color: white;}
</style>
复制代码

box-shadow

Weex支持的box-shadow在iOS设备上：inset，offset-x，offset-y，blur-radius，color

注

盒子阴影在iOS中生效

例

<template><div class="wrapper"><div style="width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px  10px rgb(255, 69, 0);"><text class="title" style="text-align: center">Hello {{target}}</text></div><div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow: 20px  10px 5px rgba(255, 69, 0, 0.8);"><text class="title" style="text-align: center">Hello {{target}}</text></div><div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px  10px 5px rgba(255, 69, 0, 0.8);"><text class="title" style="text-align: center">Hello {{target}}</text></div><div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px  10px 5px rgb(255, 69, 0);"><text class="title" style="text-align: center">Hello {{target}}</text></div><div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px  10px 5px black;"><text class="title" style="text-align: center">Hello {{target}}</text></div><div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px  10px 5px #008B00;"><text class="title" style="text-align: center">Hello {{target}}</text></div></div>
</template><style scoped>.wrapper {align-items: center; margin-top: 120px;}.title {font-size: 48px;}
</style><script>module.exports = {data: function () {return {logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',target: 'World'};}};
</script>
复制代码

其他常见的风格

opacity
background-color

样式值的类型

length 类型
number 类型
color类型
枚举类型

简单的一步

这些自上而下的步骤可以帮助您规划weex页面的整个风格

1.整体风格：将整个页面分为不同的部分

2.弯曲对齐：将页面的每个部分对齐框

3.位置框：放置框，设置偏移量

4.元素特定风格：如果需要，为特定元素设置样式