布局相關(guān)

所有 Weex 組件都支持以下通用樣式規(guī)則。

盒模型

css-boxmodel.png

Weex 盒模型基于 [CSS 盒模型]，每個 Weex 元素都可視作一個盒子。我們一般在討論設(shè)計或布局時，會提到「盒模型」這個概念。

盒模型描述了一個元素所占用的空間。每一個盒子有四條邊界：外邊距邊界 margin edge, 邊框邊界 border edge, 內(nèi)邊距邊界 padding edge 與內(nèi)容邊界 content edge。這四層邊界，形成一層層的盒子包裹起來，這就是盒模型大體上的含義。

注意：
Weex 對于長度值目前只支持像素值，不支持相對單位（em、rem）。

• width {length}：，默認(rèn)值 0

• height {length}：，默認(rèn)值 0

• padding {length}：內(nèi)邊距，內(nèi)容和邊框之間的距離。默認(rèn)值 0

  可有如下寫法：

  • padding-left {length}：，默認(rèn)值 0
  • padding-right {length}：，默認(rèn)值 0
  • padding-top {length}：，默認(rèn)值 0
  • padding-bottom {length}：，默認(rèn)值 0

• margin：

  外邊距，元素和元素之間的空白距離。值類型為 length，默認(rèn)值 0

  可有如下寫法：

  • margin-left {length}：，默認(rèn)值 0
  • margin-right {length}：，默認(rèn)值 0
  • margin-top {length}：，默認(rèn)值 0
  • margin-bottom {length}：，默認(rèn)值 0

• border：

  設(shè)定邊框，border 目前不支持類似這樣 border: 1 solid #ff0000; 的組合寫法。

  可有如下寫法：

  • border-style：

    設(shè)定邊框樣式，值類型為 string，可選值為 solid | dashed | dotted，默認(rèn)值 solid

    可有如下寫法：

    • border-left-style {string}：可選值為 solid | dashed | dotted，默認(rèn)值 solid
    • border-top-style {string}：可選值為 solid | dashed | dotted，默認(rèn)值 solid
    • border-right-style {string}：可選值為 solid | dashed | dotted，默認(rèn)值 solid
    • border-bottom-style {string}：可選值為 solid | dashed | dotted，默認(rèn)值 solid

  • border-width {length}：

    設(shè)定邊框?qū)挾?，非?fù)值, 默認(rèn)值 0

    可有如下寫法：

    • border-left-width {length}：，非負(fù)值, 默認(rèn)值 0
    • border-top-width {length}：，非負(fù)值, 默認(rèn)值 0
    • border-right-width {length}：，非負(fù)值, 默認(rèn)值 0
    • border-bottom-width {length}：，非負(fù)值, 默認(rèn)值 0

  • border-color {color}：

    設(shè)定邊框顏色，默認(rèn)值 #000000

    可有如下寫法：

    • border-left-color {color}：，默認(rèn)值 #000000
    • border-top-color {color}：，默認(rèn)值 #000000
    • border-right-color {color}：，默認(rèn)值 #000000
    • border-bottom-color {color}：，默認(rèn)值 #000000

  • border-radius {length}：

    設(shè)定圓角，默認(rèn)值 0

    可有如下寫法：

    • border-bottom-left-radius {length}：，非負(fù)值, 默認(rèn)值 0
    • border-bottom-right-radius {length}：，非負(fù)值, 默認(rèn)值 0
    • border-top-left-radius {length}：，非負(fù)值, 默認(rèn)值 0
    • border-top-right-radius {length}：，非負(fù)值, 默認(rèn)值 0

注意：

Weex 盒模型的 box-sizing 默認(rèn)為 border-box，即盒子的寬高包含內(nèi)容、內(nèi)邊距和邊框的寬度，不包含外邊距的寬度。

目前在 <image> 組件上尚無法只定義一個或幾個角的 border-radius。比如你無法在這兩個組件上使用 border-top-left-radius。該約束只對 iOS 生效，Android 并不受此限制。

盡管 overflow:hidden 在 Android 上是默認(rèn)行為，但只有下列條件都滿足時，一個父 view 才會去 clip 它的子 view。這個限制只對 Android 生效，iOS 不受影響。

• 父view是div, a, cell, refresh 或 loading。
• 系統(tǒng)版本是 Android 4.3 或更高。
• 系統(tǒng)版本不是 Andorid 7.0。
• 父 view 沒有 background-image 屬性或系統(tǒng)版本是 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，以便所有頁面元素的排版能夠一致可預(yù)測，同時頁面布局能適應(yīng)各種設(shè)備或者屏幕尺寸。

Flexbox 包含 flex 容器和 flex 成員項。如果一個 Weex 元素可以容納其他元素，那么它就成為 flex 容器。需要注意的是，flexbox 的老版規(guī)范相較新版有些出入，比如是否能支持 wrapping。這些都描述在 W3C 的工作草案中了，你需要注意下新老版本之間的不同。另外，老版本只在安卓 4.4 版以下得到支持。

Flex 容器

在 Weex 中，F(xiàn)lexbox 是默認(rèn)且唯一的布局模型，所以你不需要手動為元素添加 display: flex; 屬性。

• flex-direction：

  定義了 flex 容器中 flex 成員項的排列方向?？蛇x值為 row | column，默認(rèn)值為 column

  • column：從上到下排列。
  • row：從左到右排列。

• justify-content：

  定義了 flex 容器中 flex 成員項在主軸方向上如何排列以處理空白部分?？蛇x值為 flex-start | flex-end | center | space-between，默認(rèn)值為 flex-start。

  • flex-start：是默認(rèn)值，所有的 flex 成員項都排列在容器的前部；
  • flex-end：則意味著成員項排列在容器的后部；
  • center：即中間對齊，成員項排列在容器中間、兩邊留白；
  • space-between：表示兩端對齊，空白均勻地填充到 flex 成員項之間。

圖片.png

• align-items：

  定義了 flex 容器中 flex 成員項在縱軸方向上如何排列以處理空白部分。可選值為 stretch | flex-start | center | flex-end，默認(rèn)值為 stretch。

  • stretch 是默認(rèn)值，即拉伸高度至 flex 容器的大??；
  • flex-start 則是上對齊，所有的成員項排列在容器頂部；
  • flex-end 是下對齊，所有的成員項排列在容器底部；
  • center 是中間對齊，所有成員項都垂直地居中顯示。

css-flexbox-align.jpg

Flex 成員項

flex 屬性定義了 flex 成員項可以占用容器中剩余空間的大小。如果所有的成員項設(shè)置相同的值 flex: 1，它們將平均分配剩余空間. 如果一個成員項設(shè)置的值為 flex: 2，其它的成員項設(shè)置的值為 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 類似。為元素設(shè)置 position 后，可通過 top、right、bottom、left 四個屬性設(shè)置元素坐標(biāo)。

• position {string}：

  設(shè)置定位類型?？蛇x值為 relative | absolute | fixed | sticky，默認(rèn)值為 relative。

  • relative 是默認(rèn)值，指的是相對定位；
  • absolute 是絕對定位，以元素的容器作為參考系；
  • fixed 保證元素在頁面窗口中的對應(yīng)位置顯示；
  • sticky 指的是僅當(dāng)元素滾動到頁面之外時，元素會固定在頁面窗口的頂部。

• top {number}：距離上方的偏移量，默認(rèn)為 0。

• bottom {number}：距離下方的偏移量，默認(rèn)為 0。

• left {number}：距離左方的偏移量，默認(rèn)為 0。

• right {number}：距離右方的偏移量，默認(rèn)為 0。

注意：

1. Weex 目前不支持 z-index 設(shè)置元素層級關(guān)系，但靠后的元素層級更高，因此，對于層級高的元素，可將其排列在后面。
2. 如果定位元素超過容器邊界，在 Android 下，超出部分將不可見，原因在于 Android 端元素 overflow 默認(rèn)值為 hidden，但目前 Android 暫不支持設(shè)置 overflow: visible。

示例

style_2.jpg

<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 屬性向元素應(yīng)用 2D 轉(zhuǎn)換。該屬性允許我們對元素進(jìn)行旋轉(zhuǎn)、縮放、移動或傾斜。

目前支持的 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>

現(xiàn)在您可以在CSS中使用transition屬性來提升您應(yīng)用的交互性與視覺感受，transition中包括布局動畫，即LayoutAnimation，現(xiàn)在布局產(chǎn)生變化的同時也能使用transition帶來的流暢動畫。transition允許CSS的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。

參數(shù)

• transition-property:允許過渡動畫的屬性名，設(shè)置不同樣式transition效果的鍵值對，默認(rèn)值為空，表示不執(zhí)行任何transition，下表列出了所有合法的參數(shù)屬性：

• transition-duration:指定transition過渡的持續(xù)時間 (單位是毫秒)，默認(rèn)值是 0，表示沒有動畫效果。

• transition-delay:指定請求transition過渡操作到執(zhí)行transition過渡之間的時間間隔 (單位是毫秒或者秒)，默認(rèn)值是 0，表示沒有延遲，在請求后立即執(zhí)行transition過渡。

• transition-timing-function:描述transition過渡執(zhí)行的速度曲線，用于使transition過渡更為平滑。默認(rèn)值是 ease。下表列出了所有合法的屬性：

示例

<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。

規(guī)則

• 同時生效的時候，優(yōu)先級高覆蓋優(yōu)先級低

  • 例如：input:active:enabled 和 input:active 同時生效，前者覆蓋后者

• 互聯(lián)規(guī)則如下所示

圖片.png

示例

<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 屬性創(chuàng)建線性漸變。

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 優(yōu)先級高于 background-color，這意味著同時設(shè)置 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] 區(qū)間。默認(rèn)值是 1，即完全不透明；0 是完全透明；0.5 是 50% 的透明度。
• background-color {color}：設(shè)定元素的背景色，可選值為色值，支持RGB（ rgb(255, 0, 0) ）；RGBA（ rgba(255, 0, 0, 0.5) ）；十六進(jìn)制（ #ff0000 ）；精簡寫法的十六進(jìn)制（ #f00 ）；色值關(guān)鍵字（red），默認(rèn)值是 transparent 。

注意： 色值的關(guān)鍵字列表。

上手樣式

如果對于樣式寫法需要更多上手參考，可參考每個組件的文檔中，都有常見的例子可供參考。

你可以按照以下步驟來規(guī)劃 Weex 頁面的樣式。

1. 全局樣式規(guī)劃：將整個頁面分割成合適的模塊。
2. flex 布局：排列和對齊頁面模塊。
3. 定位盒子：定位并設(shè)置偏移量。
4. 細(xì)節(jié)樣式處理：增加特定的具體樣式。