所有的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.元素特定风格:如果需要,为特定元素设置样式