# 通用样式

所有 Weex 自带组件都支持以下通用样式规则。

# 盒模型

Weex 盒模型基于 CSS 盒模型 ，每个 Weex 元素都可视作一个盒子。我们一般在讨论设计或布局时，会提到「盒模型」这个概念。

盒模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界 margin edge, 边框边界 border edge, 内边距边界 padding edge 与内容边界 content edge。这四层边界，形成一层层的盒子包裹起来，这就是盒模型大体上的含义。

下面的例子显示了盒模型的基本用法

<template>
    <image src="..." style="width: 400; height: 200; margin-left: 20;"></image>
  </div>
</template>

# 宽度

width {length} ：默认值 0

# 高度

height {length} ：默认值 0

# 内边距

padding {length} ：内边距，内容和边框之间的距离，默认值 0。与标准 CSS 类似， padding 支持简写，也可分解为以下四个：

• padding {length} : 上、右、下、左四边内边距，默认值 0
• padding-left {length} ：左内边距，默认值 0
• padding-right {length} ：右内边距，默认值 0
• padding-top {length} ：上内边距，默认值 0
• padding-bottom {length} ：下内边距，默认值 0

# 边框

# border-style

border-style 设定边框样式，如果四个方向的边框样式不同，可分别设置：

• border-style {string}
• 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

支持的值如下：

• solid ：实线边框，默认值 solid
• dashed ：方形虚线边框
• dotted ：圆点虚线边框

# border-width

border-width ：设定边框宽度，非负值, 默认值 0，如果四个方向的边框宽度不同，可分别设置：

• 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

border-color ：设定边框颜色，默认值 #000000 ，如果四个方向的边框颜色不同，可分别设置：

• 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

border-radius ：设置边框的圆角，默认值 0，如果四个方向的圆角弧度不同，可分别设置：

• 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

# 外边距

margin {length} ：外边距，元素和元素之间的空白距离，默认值 0。与标准 CSS 类似， margin 支持简写，也可分解为四边：

• margin {length} : 上、右、下、左四边外边距，默认值 0
• margin-left {length} ：左外边距，默认值 0
• margin-right {length} ：右外边距，默认值 0
• margin-top {length} ：上外边距，默认值 0
• margin-bottom {length} ：下外边距，默认值 0

# Flexbox

Weex 布局模型基于 CSS Flexbox ，以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。Flexbox 包含 flex 容器和 flex 成员项。如果一个 Weex 元素可以容纳其他元素，那么它就成为 flex 容器。

# Flex 容器

在 Weex 中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex; 属性。

# direction

direction 决定了文字方向和 Flex容器 的基线方向。默认值为 ltr 。

• ltr : 文字和其他元素从左到右排布
• rtl : 文字和其他元素从右到左排布。

# flex-direction

flex-direction 定义了 flex 容器中 flex 成员项的排列方向，默认值为 column

• column ：从上到下排列。
• column-reverse : 从下到上排布
• row ：如果存在 direction:ltr ，则从左到右排布；如果存在 direction:rtl ，则从右到左排布。
• row-reverse : 排布方向与 flex-direction:row 相反

# flex-wrap

flex-wrap 属性决定了 Flex成员项 在一行还是多行分布，默认值为 nowrap

• nowrap : Flex成员项 在一行排布，排布的开始位置由 direction 指定。
• wrap ： Flex成员项 在多行排布，排布的开始位置由 direction 指定
• wrap-reverse : 行为类似于 wrap ，排布方向与其相反。

# 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 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 flex: 1 ，它们将平均分配剩余空间。如果一个成员项设置的值为 flex: 2 ，其它的成员项设置的值为 flex: 1 ，那么这个成员项所占用的剩余空间是其它成员项的 2 倍。Flex 成员项暂不支持 flex-shrink 和 flex-basis 属性。

• flex {number} ：值为 number 类型。 该属性不支持 flex: <flex-grow> | <flex-shrink> | <'flex-basis> 的简写。

示例，使用 flexbox 实现水平居中与垂直居中：

# Examples

• 水平和竖直居中
• Grid布局
• 等高模块

# 定位

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。

# Transition 0.16+

现在您可以在 CSS 中使用 transition 属性来提升您应用的交互性与视觉感受， transition 中包括布局动画，即 LayoutAnimation，现在布局产生变化的同时也能使用 transition 带来的流畅动画。 transition 允许 CSS 的属性值在一定的时间区间内平滑地过渡。

# 参数

• transition-property ：设置过渡动画的属性名，设置不同样式 transition 效果的键值对，默认值为空，表示不执行任何过渡效果，下表列出了所有合法的参数属性：

• transition-duration ：指定过渡的持续时间 (单位是毫秒)，默认值是 0 ，表示没有动画效果。

• transition-delay ：指定请求过渡操作到执行过渡之间的时间间隔 (单位是毫秒或者秒)，默认值是 0 ，表示没有延迟，在请求后立即执行过渡。

• transition-timing-function ：描述过渡执行的速度曲线，用于使过渡更为平滑。默认值是 ease 。下表列出了所有合法的属性：

# 示例

<style scoped>
  .panel {
    margin: 10px;
    top:10px;
    align-items: center;
    justify-content: center;
    border: solid;
    border-radius: 10px;
    transition-property: width, height, background-color;
    transition-duration: 0.3s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
</style>

# Transform

目前支持的 transform 声明格式:

• translateX({<length/percentage>}) ：X 轴方向平移，支持长度单位或百分比。
• translateY({<length/percentage>}) ：Y 轴方向平移，支持长度单位或百分比。
• translate({<length/percentage>} {<length/percentage>}) ：X 轴和 Y 轴方向同时平移， translateX + translateY 简写。
• scaleX(<number>) ：X 轴方向缩放，值为数值，表示缩放比例， 不支持百分比 。
• scaleY(<number>) ：Y 轴方向缩放，值为数值，表示缩放比例， 不支持百分比 。
• scale(<number>) ：X 轴和 Y 轴方向同时缩放， scaleX + scaleY 简写。
• rotate(<angle/degree>) ：将元素围绕一个定点（由 transform-origin 属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。
• rotateX(<angle/degree>) 0.14+ ：X 轴方向的旋转。
• rotateY(<angle/degree>) 0.14+ ：Y 轴方向的旋转。
• rotateZ(<angle/degree>) 0.26+ ：Z 轴方向的旋转。
• perspective(<length>) 0.16+ ：指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。 Android 4.1及以上版本支持 。详情可参考 MDN 介绍 。
• transform-origin {length/percentage/关键字(top/left/right/bottom)}: ：设置一个元素变形的原点， 仅支持 2D 坐标 。

# 示例

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

# 伪类 0.9.5

Weex 支持四种伪类： active , focus , disabled , enabled

所有组件都支持 active , 但只有 input 组件和 textarea 组件支持 focus , enabled , disabled 。

# 规则

• 同时生效的时候，优先级高覆盖优先级低

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

• 互联规则如下所示

  

示例

# 线性渐变 0.10+

Weex 支持线性渐变背景，具体介绍可参考 CSS 渐变介绍 。

所有组件均支持线性渐变。

# 使用

你可以通过 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 ：从右下角到左上角

示例

# 无障碍

• role 指定组件角色,告诉用户当前元素是何种类型组件 参考 web定义
  • button
  • input input 组件的 的默认值是 input
  • img image 组件的的默认值是 img
  • link
  • search
  • tab
  • text text 组件的 role 的默认值是 text
• aria-hidden 对有用户影藏掉一些没必要的元素
• aria-label 配置当前元素被聚焦后的文案提示

# Demo:

<text class='txt' role='text' aria-label='I am a text'>text</text>
<a class='a' role='link' href='http://xxx.xxx.xxx' aria-label='I am a link'></a>
<image class='img' aria-hidden='true' role='img' src="http://xxx.png" aria-label='I am a image，but you can not see me'></image>

# 阴影(box-shadow) 0.11+

Weex 支持 box-shadow 属性用于设置元素阴影。

# 注意

# 参数

• inset （可选）

  默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。

• <offset-x>

  px 单位长度值，用来设置阴影偏移量。 <offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。 <offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是 0，那么阴影位于元素后面。这时如果设置了 <blur-radius> 或 <spread-radius> 则有模糊效果。

• <offset-y>

  px 单位长度值，用来设置阴影偏移量。 <offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。 <offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是 0，那么阴影位于元素后面。这时如果设置了 <blur-radius> 或 <spread-radius> 则有模糊效果。

• <blur-radius>

  设置模糊半径， px 单位长度值，值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。

• <color>

  设置阴影颜色，可参考 CSS 颜色单位 。

示例

# 其他基本样式

• 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 页面的样式。

1. 全局样式规划：将整个页面分割成合适的模块。
2. flex 布局：排列和对齐页面模块。
3. 定位盒子：定位并设置偏移量。
4. 细节样式处理：增加特定的具体样式。