Weex 样式

时间：2020-12-09 22:12:20

1.盒型

Weex 样式

  • 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

容器内布局横向方向对其方向

Weex 样式

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

Weex 样式

  <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); }

相关文章