Weex第一天:公共样式

Karson_Kang
942 阅读12分钟

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

avatar
文章
阅读
粉丝