Weex 樣式

1.盒型

• width
• height
• padding
  • padding-left
  • padding-right
  • padding-top
  • padding-bottom
• margin
  • margin-left
  • margin-right
  • margin-top
  • margin-bottom
• border
  • border-style
  • border-width
    • border-left-width
    • border-top-width
    • border-right-width
    • border-bottom-width
  • border-color
    • border-left-color
    • border-top-color
    • border-right-color
    • border-bottom-color
  • border-radius
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-top-left-radius
    • border-top-right-radius

  <template>
  <div style="width: 300; height: 100;">
    <image src="http://img1.imgtn.bdimg.com/it/u=3942470672,3111472143&fm=21&gp=0.jpg" style="flex: 1;"></image>
  </div>
</template>

2.彈性盒型

基於CSS flexbox Weex框風格模型,確保元素的行爲能夠預見和頁面佈局能夠適應不一樣屏幕大小和不一樣的顯示設備。Flexbox包含flex容器和flex節點。若是weex元素能夠包含其餘元素,這是一個flex容器。

舊版本和新的flexbox規範有差別,好比是否支持包裝，舊版本是低於4.4版本的android版本。

2.1彈性容器

• flex-direction: row | column

容器內佈局垂直方向，默認值是自上而下 (top-to-bottom).

• justify-content: flex-start | flex-end | center | space-between

容器內佈局橫向方向對其方向

• align-items: stretch | flex-start | center | flex-end

  <template>
  <div style="width: 300; height: 100;">
    <image src="http://img1.imgtn.bdimg.com/it/u=3942470672,3111472143&fm=21&gp=0.jpg" style="flex: 1;"></image>
    <image src="http://pic2.ooopic.com/12/90/09/28bOOOPICd4_1024.jpg" style="flex: 1;"></image>
    <image src="http://pic.58pic.com/58pic/13/06/19/81q58PICFkr_1024.jpg" style="flex: 1;"></image>
  </div>
</template>

  <template>
  <div style="width: 100;">
    <image src="http://pic.58pic.com/58pic/13/06/19/81q58PICFkr_1024.jpg" 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>

3.位置

• position: relative | absolute | fixed | sticky, default value is relative.

固定屬性(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="http://pic.58pic.com/58pic/13/06/19/81q58PICFkr_1024.jpg" style="top: 50; left: 50;width: 100; height: 100;"></image>
    </div>
    <div style="height: 3000;">
      <image src="http://pic.58pic.com/58pic/13/06/19/81q58PICFkr_1024.jpg" style="position: sticky;width: 100; height: 100;"></image>
    </div>
    <div style="height: 3000;">
      <image src="http://pic.58pic.com/58pic/13/06/19/81q58PICFkr_1024.jpg" style="position: absolute; top: 800; left: 50;width: 100; height: 100;"></image>
    </div>
    <div style="height: 3000;">
      <image src="http://pic.58pic.com/58pic/13/06/19/81q58PICFkr_1024.jpg" style="position: fixed; top: 50; left: 500;width: 100; height: 100;"></image>
    </div>
  </div>
</template>

 

4.文本樣式

• color: <colors> 前景色.
• font-size: <length> 字體大小.
• font-style: <enum> normal | italic. 字體類型（正常、斜體）. 默認值是正常字體.
• font-weight: <enum> normal | bold. 字體類型（正常、加粗）.默認值是正常字體
• text-decoration: <enum> none | underline | line-through. 字體是否帶下劃線. 默認不帶.
• text-align: <enum> left | center | right. 對齊在父容器的位置. 默認左對齊.
• font-family:<string> 字體類型（宋體、微軟雅黑。。。），若是沒有找到設定的字體，會回退到默認字體，不一樣的系統可能會不同
• text-overflow:<string> clip | ellipsis. 當內容溢出的時候是否以省略符號結束.

.my-class { color: red; }
.my-class { color: #f00; }
.my-class { color: #ff0000; }
.my-class { color: rgb(255, 0, 0); }
.my-class { color: rgba(255, 0, 0, 0.5); }