布局相關
所有 Weex 組件都支持以下通用樣式規則。
盒模型
Weex 盒模型基于 [CSS 盒模型]，每個 Weex 元素都可視作一個盒子。我們一般在討論設計或布局時，會提到「盒模型」這個概念。
盒模型描述了一個元素所占用的空間。每一個盒子有四條邊界：外邊距邊界 margin edge, 邊框邊界 border edge, 內邊距邊界 padding edge 與內容邊界 content edge。這四層邊界，形成一層層的盒子包裹起來，這就是盒模型大體上的含義。
注意：
Weex 對于長度值目前只支持像素值，不支持相對單位（em、rem）。
width {length}：，默認值 0height {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目前不支持類似這樣border: 1 solid #ff0000;的組合寫法。可有如下寫法：
-
border-style：設定邊框樣式，值類型為 string，可選值為
solid|dashed|dotted，默認值solid可有如下寫法：
-
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 {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
可有如下寫法：
-
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 盒模型的 box-sizing 默認為 border-box，即盒子的寬高包含內容、內邊距和邊框的寬度，不包含外邊距的寬度。
目前在 <image> 組件上尚無法只定義一個或幾個角的 border-radius。比如你無法在這兩個組件上使用 border-top-left-radius。該約束只對 iOS 生效，Android 并不受此限制。
盡管 overflow:hidden 在 Android 上是默認行為，但只有下列條件都滿足時，一個父 view 才會去 clip 它的子 view。這個限制只對 Android 生效，iOS 不受影響。
- 父view是
div,a,cell,refresh或loading。 - 系統版本是 Android 4.3 或更高。
- 系統版本不是 Andorid 7.0。
- 父 view 沒有
background-image屬性或系統版本是 Android 5.0 或更高。
示例：
<template>
<div>
<image style="width: 400px; height: 200px; margin-left: 20px;" src="https://g.alicdn.com/mtb/lab-zikuan/0.0.18/weex/weex_logo_blue@3x.png"></image>
</div>
</template>
Flexbox
Weex 布局模型基于 CSS Flexbox，以便所有頁面元素的排版能夠一致可預測，同時頁面布局能適應各種設備或者屏幕尺寸。
Flexbox 包含 flex 容器和 flex 成員項。如果一個 Weex 元素可以容納其他元素，那么它就成為 flex 容器。需要注意的是，flexbox 的老版規范相較新版有些出入，比如是否能支持 wrapping。這些都描述在 W3C 的工作草案中了，你需要注意下新老版本之間的不同。另外，老版本只在安卓 4.4 版以下得到支持。
Flex 容器
在 Weex 中，Flexbox 是默認且唯一的布局模型，所以你不需要手動為元素添加 display: flex; 屬性。
-
flex-direction：定義了 flex 容器中 flex 成員項的排列方向。可選值為
row|column，默認值為column-
column：從上到下排列。 -
row：從左到右排列。
-
-
justify-content：定義了 flex 容器中 flex 成員項在主軸方向上如何排列以處理空白部分。可選值為
flex-start|flex-end|center|space-between，默認值為flex-start。-
flex-start：是默認值，所有的 flex 成員項都排列在容器的前部； -
flex-end：則意味著成員項排列在容器的后部； -
center：即中間對齊，成員項排列在容器中間、兩邊留白； -
space-between：表示兩端對齊，空白均勻地填充到 flex 成員項之間。
-
-
align-items：定義了 flex 容器中 flex 成員項在縱軸方向上如何排列以處理空白部分。可選值為
stretch|flex-start|center|flex-end，默認值為stretch。-
stretch是默認值，即拉伸高度至 flex 容器的大小； -
flex-start則是上對齊，所有的成員項排列在容器頂部； -
flex-end是下對齊，所有的成員項排列在容器底部； -
center是中間對齊，所有成員項都垂直地居中顯示。
-
Flex 成員項
flex 屬性定義了 flex 成員項可以占用容器中剩余空間的大小。如果所有的成員項設置相同的值 flex: 1，它們將平均分配剩余空間. 如果一個成員項設置的值為 flex: 2，其它的成員項設置的值為 flex: 1，那么這個成員項所占用的剩余空間是其它成員項的2倍。
-
flex {number}：值為 number 類型。
一個在相對于屏幕水平居中，全屏居中的 <div>。
<template>
<div class="wrapper">
<div class="box">
</div>
</div>
</template>
<style scoped>
.wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #cccccc;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
background-color: #fc0000;
}
</style>
定位
Weex 支持 position 定位，用法與 CSS position 類似。為元素設置 position 后，可通過 top、right、bottom、left 四個屬性設置元素坐標。
-
position {string}：設置定位類型。可選值為
relative|absolute|fixed|sticky，默認值為relative。-
relative是默認值，指的是相對定位； -
absolute是絕對定位，以元素的容器作為參考系； -
fixed保證元素在頁面窗口中的對應位置顯示； -
sticky指的是僅當元素滾動到頁面之外時，元素會固定在頁面窗口的頂部。
-
top {number}：距離上方的偏移量，默認為 0。bottom {number}：距離下方的偏移量，默認為 0。left {number}：距離左方的偏移量，默認為 0。right {number}：距離右方的偏移量，默認為 0。
注意：
- Weex 目前不支持
z-index設置元素層級關系，但靠后的元素層級更高，因此，對于層級高的元素，可將其排列在后面。 - 如果定位元素超過容器邊界，在 Android 下，超出部分將不可見，原因在于 Android 端元素
overflow默認值為hidden，但目前 Android 暫不支持設置overflow: visible。
示例
<template scoped>
<div class="wrapper">
<div class="box box1">
</div>
<div class="box box2">
</div>
<div class="box box3">
</div>
</div>
</template>
<style>
.wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #cccccc;
}
.box {
width: 400px;
height: 400px;
position: absolute;
}
.box1 {
top: 0;
left: 0;
background-color: #ff0000;
}
.box2 {
top: 150px;
left: 150px;
background-color: #0055dd;
}
.box3 {
top: 300px;
left: 300px;
background-color: #00ff49;
}
</style>
transform
transform 屬性向元素應用 2D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
目前支持的 transform 聲明格式:
- translate( <number/percentage> [, <number/percentage>]?)
- translateX( <number/percentage> )
- translateY( <number/percentage> )
- scale( <number>)
- scaleX( <number> )
- scaleY( <number> )
- rotate( <angle/degree> )
- rotateX( <angle/degree> ) <span class="api-version">v0.14+</span>
- rotateY( <angle/degree> ) <span class="api-version">v0.14+</span>
- perspective( <number> ) Android 4.1及以上版本支持 <span class="api-version">v0.16+</span>
- transform-origin: number/percentage/keyword(top/left/right/bottom)
示例
<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 <span class="api-version">v0.16.0+</span>
現在您可以在CSS中使用transition屬性來提升您應用的交互性與視覺感受，transition中包括布局動畫，即LayoutAnimation，現在布局產生變化的同時也能使用transition帶來的流暢動畫。transition允許CSS的屬性值在一定的時間區間內平滑地過渡。
參數
-
transition-property:允許過渡動畫的屬性名，設置不同樣式transition效果的鍵值對，默認值為空，表示不執行任何transition，下表列出了所有合法的參數屬性：
| 參數名 | 描述 |
|---|---|
| width | transition過渡執行的時候是否組件的寬度參與動畫 |
| height | transition過渡執行的時候是否組件的高度參與動畫 |
| top | transition過渡執行的時候是否組件的頂部距離參與動畫 |
| bottom | transition過渡執行的時候是否組件的底部距離參與動畫 |
| left | transition過渡執行的時候是否組件的左側距離參與動畫 |
| right | transition過渡執行的時候是否組件的右側距離參與動畫 |
| backgroundColor | transition過渡執行的時候是否組件的背景顏色參與動畫 |
| opacity | transition過渡執行的時候是否組件的不透明度參與動畫 |
| transform | transition過渡執行的時候是否組件的變換類型參與動畫 |
transition-duration:指定transition過渡的持續時間 (單位是毫秒)，默認值是0，表示沒有動畫效果。transition-delay:指定請求transition過渡操作到執行transition過渡之間的時間間隔 (單位是毫秒或者秒)，默認值是0，表示沒有延遲，在請求后立即執行transition過渡。transition-timing-function:描述transition過渡執行的速度曲線，用于使transition過渡更為平滑。默認值是ease。下表列出了所有合法的屬性：
| 屬性名 | 描述 |
|---|---|
| ease | transition過渡逐漸變慢的過渡效果 |
| ease-in | transition過渡慢速開始，然后變快的過渡效果 |
| ease-out | transition過渡快速開始，然后變慢的過渡效果 |
| ease-in-out | transition過渡慢速開始，然后變快，然后慢速結束的過渡效果 |
| linear | transition過渡以勻速變化 |
| cubic-bezier(x1, y1, x2, y2) | 使用三階貝塞爾函數中自定義transition變化過程，函數的參數值必須處于 0 到 1 之間。更多關于三次貝塞爾的信息請參閱 cubic-bezier 和 Bézier curve. |
示例
<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>
偽類 <span class="api-version">v0.9.5+</span>
Weex 支持四種偽類：active, focus, disabled, enabled
所有組件都支持 active, 但只有 input 組件和 textarea 組件支持 focus, enabled, disabled。
規則
-
同時生效的時候，優先級高覆蓋優先級低
- 例如：
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>
線性漸變 <span class="api-version">v0.10+</span>
Weex 支持線性漸變背景，具體介紹可參考 W3C description of the gradient。
所有組件均支持線性漸變。
使用
你可以通過 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
從右下角到左上角
Note
-
background-image優先級高于background-color，這意味著同時設置background-image和background-color，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) <span class="api-version">v0.11+</span>
Weex 支持陰影屬性：active, focus, disabled, enabled inset(可選),offset-x,offset-y, blur-radius,color
注意
- box-shadow僅僅支持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 {number}：取值范圍為 [0, 1] 區間。默認值是 1，即完全不透明；0 是完全透明；0.5 是 50% 的透明度。 -
background-color {color}：設定元素的背景色，可選值為色值，支持RGB（rgb(255, 0, 0)）；RGBA（rgba(255, 0, 0, 0.5)）；十六進制（#ff0000）；精簡寫法的十六進制（#f00）；色值關鍵字（red），默認值是transparent。
注意： 色值的關鍵字列表。
上手樣式
如果對于樣式寫法需要更多上手參考，可參考每個組件的文檔中，都有常見的例子可供參考。
你可以按照以下步驟來規劃 Weex 頁面的樣式。
- 全局樣式規劃：將整個頁面分割成合適的模塊。
- flex 布局：排列和對齊頁面模塊。
- 定位盒子：定位并設置偏移量。
- 細節樣式處理：增加特定的具體樣式。
