You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ha...@apache.org on 2017/10/13 13:04:17 UTC
[22/51] [abbrv] incubator-weex-site git commit: rearrangement the
structure of the document
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v1.0/references/common-attrs.md
----------------------------------------------------------------------
diff --git a/_draft/v1.0/references/common-attrs.md b/_draft/v1.0/references/common-attrs.md
new file mode 100644
index 0000000..8ac1c0f
--- /dev/null
+++ b/_draft/v1.0/references/common-attrs.md
@@ -0,0 +1,166 @@
+---
+title: 通用特性
+type: references
+order: 1.5
+version: 0.10
+---
+
+# 通用特性
+
+特性（attribute）与 HTML 中元素特性类似，提供了与 Weex 元素有关的其他附加信息。所有的元素都可以拥有特性, 特性总是在 Weex 元素的起始标签中定义，并总是以键值对的形式出现，例如：`name="value"`。可以使用 [Mustache](https://mustache.github.io/) 对特性值进行数据绑定。
+
+**Notes!**
+
+Weex 遵循 [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) 命名规范, 所以请 **不要在特性中使用驼峰风格（CamelCase）** , 使用`-`连接符的**羊肉串风格（kebab-case）** 才是更好的命名方式。
+
+所有 Weex 元素都拥有以下特性：
+
+## id
+
+为 `<template>` 内定义的元素指定一个唯一的 id，通过 `this.$el(id)` 可以容易地获取一个 Weex 元素的引用。更多信息可参考 [Instance APIs](./api.html)
+
+```html
+<template>
+ <div id="wrapper">
+ <list class="list">
+ <cell class="row" repeat="item in rows" id="item-{{$index}}">
+ <text class="item-title">row {{item.id}}</text>
+ </cell>
+ </list>
+ </div>
+</template>
+<style></style>
+
+<script>
+module.exports = {
+ data: {
+ rows:[
+ {id: 1},
+ {id: 2},
+ {id: 3},
+ {id: 4},
+ {id: 5}
+ ]
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/b5032fa96e3e657711916148b1978ad3)
+
+## style
+
+为元素定义行内样式。
+
+```html
+<div style="width: 200px; height: 200px; color: #ff0000;"></div>
+<div style="padding: {{x}}; margin: 0"></div>
+```
+
+## class
+
+为元素定义一个或多个类名（引用样式表中的类）。
+
+```html
+<div class="button"></div>
+<div class="button {{btnStatus}}"></div>
+```
+
+## repeat
+
+我们可以通过 `repeat` 特性根据一个数组进行渲染，迭代地生成当前标签的内容。`repeat` 特性有着 `item in items` 形式的特殊语法，其中，`items` 是数组数据，`item` 是数组元素迭代的别名。
+
+```html
+<template>
+ <div>
+ <list class="list">
+ <cell class="row" repeat="item in rows" id="item-{{$index}}">
+ <text class="item-title">row {{item.id}}</text>
+ </cell>
+ </list>
+ </div>
+</template>
+
+<style></style>
+
+<script>
+module.exports = {
+ data: {
+ rows:[
+ {id: 1},
+ {id: 2},
+ {id: 3},
+ {id: 4},
+ {id: 5}
+ ]
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/b5032fa96e3e657711916148b1978ad3)
+
+## if
+
+提供一个布尔值来决定是否显示当前标签。当值为 `true` 时，元素显示，为 `false` 时元素隐藏。
+
+```html
+<div if="true"></div>
+<div if="{{opened}}"></div>
+<div if="{{direction === 'row'}}"></div>
+```
+
+## append
+
+append 特性用于控制渲染次序。它的可选值为 `tree` 或 `node`，默认为 `tree`，不支持数据绑定。不同的值会执行不同的渲染过程：
+
+- `append="tree"` 是一次性渲染整个节点树，渲染更高效，但是如果页面太大容易造成较长时间的白屏。
+- `append="node"` 所有节点逐个渲染，整体渲染速度略慢，但是用户体验好一些。
+
+通过 `node` 和 `tree` 可以精细化地控制页面展示的逻辑和颗粒度，一般比较好的实践为首屏以内按 `tree` 解析，首屏以外按 `node` 解析。
+
+```html
+<div append="tree"></div>
+<div append="node"></div>
+```
+
+## 事件处理 (on...)
+
+在 Weex 标签上注册事件处理器。以 `on` 加 事件名为 `key`，事件处理函数为 `value`。
+
+```html
+<template>
+ <div class="btn" onClick="alertMsg"><text>Click me</text></div>
+</template>
+
+<style>
+.btn {
+ justify-content: center;
+ align-items: center;
+ width: 200;
+ height: 100;
+ background-color: #ff0000;
+ border-radius: 5;
+ color: #ffffff;
+}
+</style>
+
+<script>
+var modal = require('@weex-module/modal')
+
+module.exports = {
+ data: {},
+ methods: {
+ alertMsg: function (e) {
+ modal.alert({
+ message: 'click',
+ okTitle: 'alert'
+ }, function() {
+ })
+ }
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/97de59d24d7667aa91187d59123d24a6)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v1.0/references/common-event.md
----------------------------------------------------------------------
diff --git a/_draft/v1.0/references/common-event.md b/_draft/v1.0/references/common-event.md
new file mode 100644
index 0000000..2554fe1
--- /dev/null
+++ b/_draft/v1.0/references/common-event.md
@@ -0,0 +1,492 @@
+---
+title: 通用事件
+type: references
+order: 1.10
+version: 0.10
+---
+
+# 通用事件
+
+Weex 提供了通过事件触发动作的能力，例如在用户点击组件时执行 JavaScript。下面列出了可被添加到 Weex 组件上以定义事件动作的属性：
+
+## `click`
+
+当组件上发生点击手势时被触发。
+
+**注意：**
+
+`<input>` 和 `<switch>` 组件目前不支持 `click` 事件，请使用 `change` 或 `input` 事件来代替。
+
+### 事件对象
+
+- `type`: `click`
+- `target`: 触发点击事件的目标组件
+- `timestamp`: 触发点击事件时的时间戳
+
+### 示例
+
+点击按钮，将弹出弹框，再点击弹框 `×`，关闭弹框。
+
+```html
+<template>
+ <div>
+ <div>
+ <text class="btn" onclick="openDialog">Show Dialog</text>
+ </div>
+
+ <div id="dialog" class="dialog" if="{{isShowDialog}}">
+ <div class="dialog-backdrop"></div>
+ <div class="dialog-content">
+ <div class="dialog-header">
+ <text class="dialog-title">{{dialogTitle}}</text>
+ <text class="close" onclick="closeDialog">×</text>
+ </div>
+ <div class="dialog-body">
+ <text>{{dialogBody}}</text>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style>
+.dialog-backdrop {
+ opacity: .5;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: #000000;
+}
+.dialog {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ justify-content: center;
+ align-items: center;
+}
+.dialog-content {
+ width: 450;
+ background-color: #ffffff;
+}
+.dialog-header {
+ padding: 20;
+ border-bottom-width: 1;
+ border-bottom-style: solid;
+ border-bottom-color: #efefef;
+}
+.dialog-body {
+ padding: 20;
+}
+.close {
+ font-size: 50;
+ position: absolute;
+ right: 10;
+ top: 10;
+}
+.btn {
+ text-align: center;
+ color: #ffffff;
+ padding: 12;
+ background-color: #3071a9;
+ border-color: #285e8e;
+ border-radius: 4;
+}
+</style>
+
+<script>
+ module.exports = {
+ data: {
+ isShowDialog: false,
+ dialogTitle: 'HELLO',
+ dialogBody: 'Weex is best!'
+ },
+ methods: {
+ openDialog: function (e) {
+ this.isShowDialog = true
+ },
+ closeDialog: function (e) {
+ this.isShowDialog = false
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/6c1dd48b419e614f92581930f42fd366)
+
+## `longpress`
+
+如果一个组件被绑定了 `longpress` 事件，那么当用户长按这个组件时，该事件将会被触发。
+
+**注意：**
+
+`<input>` 和 `<switch>` 组件目前不支持 `click` 事件，请使用 `change` 或 `input` 事件来代替。
+
+### 事件对象
+- `type` : `longpress`
+- `target` : 触发长按事件的目标组件
+- `timestamp` : 长按事件触发时的时间戳
+
+### 示例
+
+长按按钮，变换背景色。
+
+```html
+<template>
+ <div style="width: 400; height: 200; background-color: {{bg}};
+ justify-content: center; align-items: center;" onlongpress="{{update}}">
+ <text style="font-size: 60">Press me</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ bg: '#FF0000'
+ },
+ methods: {
+ update: function () {
+ this.bg = this.bg === '#FF0000' ? '#00FF00' : '#FF0000'
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/14a646ea3d7d5e1de5baaca9061a48b3)
+
+## Appear 事件
+
+如果一个位于某个可滚动区域内的组件被绑定了 `appear` 事件，那么当这个组件的状态变为在屏幕上可见时，该事件将被触发。
+
+### 事件对象
+
+- `type` : `appear`
+- `target` : 触发 Appear 事件的组件对象
+- `timestamp` : 事件被触发时的时间戳
+- `direction` : 触发事件时屏幕的滚动方向，`up` 或 `down`
+
+### 示例
+
+当滚到最下方时，最后一个 `item` 出现，将会弹出弹框。
+
+```html
+<template>
+ <scroller onviewappear="{{viewappear}}" onviewdisappear="{{viewdisappear}}">
+ <div class="item">
+ <text>scroll 1</text>
+ </div>
+ <div class="item">
+ <text>scroll 2</text>
+ </div>
+ <div class="item">
+ <text>scroll 3</text>
+ </div>
+ <div class="item">
+ <text>scroll 4</text>
+ </div>
+ <div class="item">
+ <text>scroll 5</text>
+ </div>
+ <div class="item">
+ <text>scroll 6</text>
+ </div>
+ <div class="item">
+ <text>scroll 7</text>
+ </div>
+ <div class="item">
+ <text>scroll 8</text>
+ </div>
+ <div class="item">
+ <text>scroll 9</text>
+ </div>
+ <div class="item">
+ <text>scroll 10</text>
+ </div>
+ <div class="item" onappear="alertMsg" >
+ <text>I will alert a message when I appeared.</text>
+ </div>
+ </scroller>
+</template>
+
+<style>
+ .list {
+ height: 850;
+ }
+
+ .count {
+ font-size: 48;
+ margin: 10;
+ }
+
+ .indicator {
+ height: 40;
+ width: 40;
+ color: #45b5f0;
+ }
+
+ .row {
+ width: 750;
+ }
+
+ .item {
+ justify-content: center;
+ border-bottom-width: 2;
+ border-bottom-color: #c0c0c0;
+ height: 200;
+ padding: 20;
+ }
+</style>
+
+<script>
+ var modal = require('@weex-module/modal')
+ module.exports = {
+ data: {},
+ methods: {
+ alertMsg: function (e) {
+ modal.alert({
+ message: 'I am appeared.',
+ okTitle: 'Appear'
+ }, function() {
+ })
+ },
+ viewappear: function () {
+ nativeLog('>>>>>', 'viewappear')
+ },
+ viewdisappear: function () {
+ nativeLog('>>>>>', 'viewdisappear')
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/4d5335f086dfc9964caed5b1fe4b1aa7)
+
+## Disappear 事件
+
+如果一个位于某个可滚动区域内的组件被绑定了 `disappear` 事件，那么当这个组件被滑出屏幕变为不可见状态时，该事件将被触发。
+
+### 事件对象
+
+- `type` : `disappear`
+- `target` : 触发 Disappear 事件的组件对象
+- `timestamp` : 事件被触发时的时间戳
+- `direction` : 触发事件时屏幕的滚动方向，`up` 或 `down`
+
+### 示例
+
+当向下滚动到第一个 `item` 消失后，将会弹出弹框。
+
+```html
+<template>
+ <scroller onviewappear="{{viewappear}}" onviewdisappear="{{viewdisappear}}">
+ <div class="item" ondisappear="alertMsg" >
+ <text>I will alert a message when I disappeared.</text>
+ </div>
+ <div class="item">
+ <text>scroll 1</text>
+ </div>
+ <div class="item">
+ <text>scroll 2</text>
+ </div>
+ <div class="item">
+ <text>scroll 3</text>
+ </div>
+ <div class="item">
+ <text>scroll 4</text>
+ </div>
+ <div class="item">
+ <text>scroll 5</text>
+ </div>
+ <div class="item">
+ <text>scroll 6</text>
+ </div>
+ <div class="item">
+ <text>scroll 7</text>
+ </div>
+ <div class="item">
+ <text>scroll 8</text>
+ </div>
+ <div class="item">
+ <text>scroll 9</text>
+ </div>
+ <div class="item">
+ <text>scroll 10</text>
+ </div>
+ </scroller>
+</template>
+
+<style>
+ .list {
+ height: 850;
+ }
+
+ .count {
+ font-size: 48;
+ margin: 10;
+ }
+
+ .indicator {
+ height: 40;
+ width: 40;
+ color: #45b5f0;
+ }
+
+ .row {
+ width: 750;
+ }
+
+ .item {
+ justify-content: center;
+ border-bottom-width: 2;
+ border-bottom-color: #c0c0c0;
+ height: 200;
+ padding: 20;
+ }
+</style>
+
+<script>
+ var modal = require('@weex-module/modal')
+ module.exports = {
+ data: {},
+ methods: {
+ alertMsg: function (e) {
+ modal.alert({
+ message: 'I am disappeared.',
+ okTitle: 'Disappear'
+ }, function() {
+ })
+ },
+ viewappear: function () {
+ nativeLog('>>>>>', 'viewappear')
+ },
+ viewdisappear: function () {
+ nativeLog('>>>>>', 'viewdisappear')
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/eefa176009207a429bbaf475f6ee92d1)
+
+## Page 事件
+
+*注意：仅支持 iOS 和 Android，H5 暂不支持。*
+
+Weex 通过 `viewappear` 和 `viewdisappear` 事件提供了简单的页面状态管理能力。
+
+`viewappear` 事件会在页面就要显示或配置的任何页面动画被执行前触发，例如，当调用 `navigator` 模块的 `push` 方法时，该事件将会在打开新页面时被触发。`viewdisappear` 事件会在页面就要关闭时被触发。
+
+与组件的 `appear` 和 `disappear` 事件不同的是，`viewappear` 和 `viewdisappear` 事件关注的是整个页面的状态，所以**它们必须绑定到页面的根元素上**。
+
+特殊情况下，这两个事件也能被绑定到非根元素的body组件上，例如`wxc-navpage`组件。
+
+### 事件对象
+
+- `type` : `viewappear` 或 `viewdisappear`
+- `target` : 触发事件的组件对象
+- `timestamp` : 事件被触发时的时间戳
+
+### 示例
+
+进出页面时，都会弹框提示。
+
+```html
+<template>
+ <scroller onviewappear="{{alertViewappearMsg}}" onviewdisappear="{{alertViewdisappearMsg}}">
+ <div class="item">
+ <text>scroll 1</text>
+ </div>
+ <div class="item">
+ <text>scroll 2</text>
+ </div>
+ <div class="item">
+ <text>scroll 3</text>
+ </div>
+ <div class="item">
+ <text>scroll 4</text>
+ </div>
+ <div class="item">
+ <text>scroll 5</text>
+ </div>
+ <div class="item">
+ <text>scroll 6</text>
+ </div>
+ <div class="item">
+ <text>scroll 7</text>
+ </div>
+ <div class="item">
+ <text>scroll 8</text>
+ </div>
+ <div class="item">
+ <text>scroll 9</text>
+ </div>
+ <div class="item">
+ <text>scroll 10</text>
+ </div>
+ <div class="item" onappear="alertMsg" >
+ <text>scroll 11</text>
+ </div>
+ </scroller>
+</template>
+
+<style>
+ .list {
+ height: 850;
+ }
+
+ .count {
+ font-size: 48;
+ margin: 10;
+ }
+
+ .indicator {
+ height: 40;
+ width: 40;
+ color: #45b5f0;
+ }
+
+ .row {
+ width: 750;
+ }
+
+ .item {
+ justify-content: center;
+ border-bottom-width: 2;
+ border-bottom-color: #c0c0c0;
+ height: 200;
+ padding: 20;
+ }
+</style>
+
+<script>
+ var modal = require('@weex-module/modal')
+ module.exports = {
+ data: {},
+ methods: {
+ alertViewappearMsg: function () {
+ modal.alert({
+ message: 'viewappear.',
+ okTitle: 'viewappear'
+ }, function() {
+ })
+ },
+ alertViewdisappearMsg: function () {
+ modal.alert({
+ message: 'viewdisappear.',
+ okTitle: 'viewdisappear'
+ }, function() {
+ })
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/450205a8f8612381422220ce88a562ff)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v1.0/references/common-style.md
----------------------------------------------------------------------
diff --git a/_draft/v1.0/references/common-style.md b/_draft/v1.0/references/common-style.md
new file mode 100644
index 0000000..8a585f2
--- /dev/null
+++ b/_draft/v1.0/references/common-style.md
@@ -0,0 +1,322 @@
+---
+title: 通用样式
+type: references
+order: 1.6
+version: 0.10
+---
+
+# 通用样式
+
+所有 Weex 组件都支持以下通用样式规则。
+
+## 盒模型
+
+
+
+Weex 盒模型基于 [CSS 盒模型](https://www.w3.org/TR/css3-box/)，每个 Weex 元素都可视作一个盒子。我们一般在讨论设计或布局时，会提到「盒模型」这个概念。
+
+盒模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界 margin edge, 边框边界 border edge, 内边距边界 padding edge 与内容边界 content edge。这四层边界，形成一层层的盒子包裹起来，这就是盒模型大体上的含义。
+
+**注意：**
+Weex 对于长度值目前只支持*像素*值，单位可省略，不支持相对单位（`em`、`rem`）。
+
+- `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` 目前不支持类似这样 `border: 1 solid #ff0000;` 的组合写法。
+
+ 可有如下写法：
+
+ - `border-style`：
+
+ 设定边框样式，值类型为 string，可选值为 `solid` | `dashed` | `dotted`，默认值 `solid`
+
+ 可有如下写法：
+
+ - `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`
+
+ - `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
+
+ 可有如下写法：
+
+ - `border-bottom-left-radius {length}`：，非负值, 默认值 0
+ - `border-bottom-right-radius {length}`：，非负值, 默认值 0
+ - `border-top-left-radius {length}`：，非负值, 默认值 0
+ - `border-top-right-radius {length}`：，非负值, 默认值 0
+
+
+注意：目前在 `<image>` 和 `<text>` 组件上尚无法只定义一个或几个角的 `border-radius`。比如你无法在这两个组件上使用 `border-top-left-radius`。
+
+Weex 盒模型的 `box-sizing` 默认为 `border-box`，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。
+
+### 示例：
+
+```html
+<template>
+ <div>
+ <image style="width: 400; height: 200; margin-left: 20;" src="https://g.alicdn.com/mtb/lab-zikuan/0.0.18/weex/weex_logo_blue@3x.png"></image>
+ </div>
+</template>
+```
+
+## Flexbox
+
+Weex 布局模型基于 CSS [`Flexbox`](http://www.w3.org/TR/css3-flexbox/)，以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。
+
+Flexbox 包含 flex 容器和 flex 成员项。如果一个 Weex 元素可以容纳其他元素，那么它就成为 flex 容器。需要注意的是，flexbox 的老版规范相较新版有些出入，比如是否能支持 wrapping。这些都描述在 W3C 的工作草案中了，你需要注意下新老版本之间的不同。另外，老版本只在安卓 4.4 版以下得到支持。
+
+### Flex 容器
+
+在 Weex 中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 `display: flex;` 属性。
+
+- `flex-direction`：
+
+ 定义了 flex 容器中 flex 成员项的排列方向。可选值为 `row` | `column`，默认值为 `column`
+
+ - `column`：从上到下排列。
+ - `row`：从左到右排列。
+
+- `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: 1`，它们将平均分配剩余空间. 如果一个成员项设置的值为 `flex: 2`，其它的成员项设置的值为 `flex: 1`，那么这个成员项所占用的剩余空间是其它成员项的2倍。
+
+- `flex {number}`：值为 number 类型。
+
+### 示例
+
+一个简单的网格布局。
+
+
+
+```html
+<template>
+ <div>
+ <div repeat="(i, v) in list" class="row">
+ <div repeat="(k, text) in v" class="item">
+ <div>
+ <text>{{text}}</text>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<style>
+ .item{
+ flex:1;
+ justify-content: center;
+ align-items:center;
+ border-width:1;
+ }
+ .row{
+ flex-direction: row;
+ height:80;
+ }
+</style>
+<script>
+ module.exports = {
+ data: function () {
+ return {
+ list:[
+ ['A', 'B', 'C'],
+ ['D', 'E', 'F'],
+ ['G', 'H', 'I']
+ ]
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/ee6a898fcac2242308c24fe5882c52ac)
+
+一个在相对于屏幕水平居中，全屏居中的 `<div>`。
+
+```html
+<template>
+ <div class="wrapper">
+ <div class="box">
+ </div>
+ </div>
+</template>
+
+<style>
+ .wrapper {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: #cccccc;
+ justify-content: center;
+ align-items: center;
+ }
+ .box {
+ width: 200;
+ height: 200;
+ background-color: #fc0000;
+ }
+</style>
+```
+
+[体验一下](http://dotwe.org/a76cd89b37c72d308ed576131830e877)
+
+## 定位
+
+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。
+
+**注意：**
+
+1. Weex 目前不支持 `z-index` 设置元素层级关系，但靠后的元素层级更高，因此，对于层级高的元素，可将其排列在后面。
+2. 如果定位元素超过容器边界，在 Android 下，超出部分将**不可见**，原因在于 Android 端元素 `overflow` 默认值为 `hidden`，但目前 Android 暂不支持设置 `overflow: visible`。
+
+### 示例
+
+
+
+```html
+<template>
+ <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: 400;
+ height: 400;
+ position: absolute;
+ }
+ .box1 {
+ top: 0;
+ left: 0;
+ background-color: #ff0000;
+ }
+ .box2 {
+ top: 150;
+ left: 150;
+ background-color: #0055dd;
+ }
+ .box3 {
+ top: 300;
+ left: 300;
+ background-color: #00ff49;
+ }
+</style>
+```
+
+[体验一下](http://dotwe.org/b04339de27cfabf0710e045c0079e56a)
+
+## 其他基本样式
+
+- `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` 。
+
+**注意：** [色值的关键字列表](./color-names.md)。
+
+## 上手样式
+
+如果对于样式写法需要更多上手参考，可参考
+
+- [如何做出高性能长列表]()
+- [如何布局]()
+- 以及每个组件的文档中，都有常见的例子可供参考。
+
+你可以按照以下步骤来规划 Weex 页面的样式。
+
+1. 全局样式规划：将整个页面分割成合适的模块。
+2. flex 布局：排列和对齐页面模块。
+3. 定位盒子：定位并设置偏移量。
+4. 细节样式处理：增加特定的具体样式。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v1.0/references/component-defs.md
----------------------------------------------------------------------
diff --git a/_draft/v1.0/references/component-defs.md b/_draft/v1.0/references/component-defs.md
new file mode 100644
index 0000000..11e4282
--- /dev/null
+++ b/_draft/v1.0/references/component-defs.md
@@ -0,0 +1,126 @@
+---
+title: ViewModel 选项
+type: references
+order: 1.2
+version: 0.10
+---
+
+# 组件定义
+
+定义组件是通过一组选项来描述一个组件。这组选项总是被赋值给 `<script>` 标签中的 `module.exports` 。
+
+``` javascript
+module.exports = {
+ // a set of options here
+}
+```
+## 数据和方法
+
+``` javascript
+module.exports = {
+ data: function () {
+ return {x: 1, y: 2}
+ },
+ methods: {
+ doThis: function () {...},
+ doThat: function () {...}
+ },
+ ...
+}
+```
+
+`data` 选项是一个函数，它返回这个视图模型可监听的数据对象。而 `methods` 是一个映射，其中包含所有视图模型的方法。
+
+每个 `data` 或 `method` 属性将被代理到视图模型实例中。所以，你能通过 `this.x` 读写数据，或者通过 `this.doThis()` 调用方法。
+
+一个完整的例子：
+
+```html
+<template>
+ <div style="width: {{w}}; height: {{h}}; background-color: red;" onclick="update"></div>
+</template>
+<script>
+ module.exports = {
+ data: function () {
+ return {w: 750, h: 200}
+ },
+ methods: {
+ update: function (e) {
+ this.h += 200
+ }
+ }
+ }
+</script>
+```
+## 事件
+
+``` javascript
+module.exports = {
+ data: ...,
+ methods: {
+ foo: function () {
+ ...
+ this.$emit('customtype1', data)
+ }
+ },
+ events: {
+ customtype1: function (e) {
+ console.log(e.type, e.detail)
+ }
+ },
+ ...
+}
+```
+
+`events` 选项允许你在视图模型被创建时注册自定义事件。然后，它会监听这些类型的事件，并通过函数类型的值处理它们。
+
+Weex 会把一个事件对象作为第一个参数传递给其绑定的事件，这个事件对象在 `e.detail` 中包含事件数据。
+## 生命周期
+
+``` javascript
+module.exports = {
+ data: ...,
+ methods: ...,
+ init: function () {
+ console.log('ViewModel constructor begins')
+ },
+ created: function () {
+ console.log('Data observation finished')
+ },
+ ready: function () {
+ console.log('Virtual DOM finished')
+ },
+ ...
+}
+```
+
+Weex 视图模型现在支持生命周期内的钩子函数，这些钩子函数能被写为组件选项：
+- `init`: 在视图模型的构造函数开始调用时激活；
+- `created`: 当视图模型监听默认数据，但还未编译模板时激活；
+- `ready`: 当视图模型监听默认数据并且编译模板生成虚拟DOM后被激活。
+
+**注意：当 `methods`、`events` 或生命周期方法作为参数传递给别的函数时，务必确认函数执行时的上下文符合您的预期，例如：**
+
+``` javascript
+module.exports = {
+ data: function () {
+ return {x: 1, y: 2}
+ },
+ ready: function () {
+ // `undefined`
+ // 因为上下文发生了变化
+ this.foo(this.bar)
+ // `1`
+ // 正确绑定上下文之后可以得到预期的值
+ this.foo(this.bar.bind(this))
+ },
+ methods: {
+ foo: function (fn) {
+ return fn()
+ },
+ bar: function () {
+ return this.x
+ }
+ }
+}
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v1.0/references/components/a.md
----------------------------------------------------------------------
diff --git a/_draft/v1.0/references/components/a.md b/_draft/v1.0/references/components/a.md
new file mode 100644
index 0000000..75bd831
--- /dev/null
+++ b/_draft/v1.0/references/components/a.md
@@ -0,0 +1,273 @@
+---
+title: <a>
+type: references
+order: 2.1
+version: 0.10
+---
+
+# <a>
+
+`<a>` 组件定义了指向某个页面的一个超链接. 此组件的作用和用法与HTML5中的 [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) 非常类似，区别在于 Weex 的 `<a>` 组件**不能**直接在里面添加文本（字符串），如果要展示文本，应该添加 `<text>` 组件。
+
+一个简单例子：
+
+```HTML
+<template>
+ <div class="wrapper">
+ <a href="http://dotwe.org/raw/dist/a468998152ee680413588c38bd61c29e.js">
+ <text>click</text>
+ </a>
+ </div>
+</template>
+
+<style>
+.wrapper {
+ text-align: center;
+}
+</style>
+```
+
+[体验一下](http://dotwe.org/f63c78213ef26c25357ffa851537fff3)
+
+## 子组件
+
+此组件支持除了自己外的所有 Weex 组件作为子组件。
+
+## 特性
+
+- `href {string}`：定义了超链接的 URL。
+
+## 样式
+
+`<a>` 支持所有通用样式。
+
+- 盒模型
+- `flexbox` 布局
+- `position`
+- `opacity`
+- `background-color`
+
+查看 [组件通用样式](../common-style.html)。
+
+## 事件
+
+`<a>` 支持所有通用事件。
+
+- `click`
+ **注意：**我们不能保证 `click` 事件和 `href` 跳转的执行顺序。建议不要使用 `click` 事件来处理 `href` 跳转前的逻辑处理。
+- `longpress`
+- `appear`
+- `disappear`
+
+查看 [通用事件](../common-event.html)。
+
+## 约束
+
+1. **不能**直接在 `<a>` 中添加文本。
+ 错误示例，“click” 无法被正常渲染。
+
+ ```HTML
+ <template>
+ <div class="wrapper">
+ <a href="http://dotwe.org/raw/dist/a468998152ee680413588c38bd61c29e.js">
+ click
+ </a>
+ </div>
+ </template>
+
+ <style>
+ .wrapper {
+ text-align: center;
+ }
+ </style>
+ ```
+
+[体验一下](http://dotwe.org/0a22d65138691a208e3fb1f8f6392b38)
+
+2. 请不要为 `<a>` 添加 `click` 事件。我们不能确保 `click` 事件和 `href` 跳转的执行顺序。
+
+## 示例
+
+```html
+<template>
+ <div>
+ <list class="list">
+ <header class="header">
+ <text class="title">Search Results</text>
+ </header>
+ <refresh style="width: 750; padding: 30;" onrefresh="refreshData" display="{{refreshDisplay}}">
+ <text class="text"> ↓ Pull to refresh </text>
+ <loading-indicator class="indicator"></loading-indicator>
+ </refresh>
+ <cell class="row" repeat="item in items" id="item-{{$index}}">
+ <div class="lines">
+ <text class="item">Repo name: </text><a href="{{item.repo_url}}"><text class="link">{{item.full_name}}</text></a>
+ </div>
+ <div>
+ <text class="item">Repo star: {{item.stargazers_count}}</text>
+ </div>
+ </cell>
+ <loading onloading="loadingData" style="width: 750; padding: 30;" display="{{loadingDisplay}}">
+ <text class="text">{{loadingText}}</text>
+ </loading>
+ </list>
+ <div class="up" onclick="goToTop">
+ <img class="img" src="https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png"></img>
+ </div>
+ </div>
+</template>
+
+<style>
+.header {
+ padding: 25;
+ background-color: #efefef;
+ border-bottom-color: #eeeeee;
+ border-bottom-width: 2;
+ border-bottom-style: solid;
+}
+.title {
+ text-align: center;
+}
+.text {
+ text-align: center;
+}
+.list {
+ background-color: #ffffff;
+}
+.row {
+ padding: 20;
+ border-bottom-color: #eeeeee;
+ border-bottom-width: 2;
+ border-bottom-style: solid;
+}
+.up {
+ width: 70;
+ height: 70;
+ position: fixed;
+ right: 20;
+ bottom: 20;
+}
+.img {
+ width: 70;
+ height: 70;
+}
+.lines {
+ flex-direction: row;
+}
+.link {
+ color: #008cff;
+ text-decoration: underline;
+}
+</style>
+
+<script>
+var dom = require('@weex-module/dom') || {}
+var stream = require('@weex-module/stream') || {}
+var modal = require('@weex-module/modal') || {}
+
+var SEARCH_URL = 'https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc',
+ PAGE_URL = 'http://dotwe.org/raw/dist/f1fa0895d0fa0fd80896e02a589443dd.js'
+
+module.exports = {
+ data: {
+ isLoaded: true,
+ page: 1,
+ loadingDisplay: 'hide',
+ refreshDisplay: 'hide',
+ loadingText: 'Loading...',
+ items:[]
+ },
+ created: function () {
+ var url = SEARCH_URL + '&page=' + this.page
+
+ this.renderData(url)
+
+ this.page++
+ },
+ methods: {
+ renderData: function (url) {
+ var self = this
+
+ stream.fetch({
+ method: 'GET',
+ url: url,
+ type:'json'
+ }, function(res) {
+ try {
+ var results = res.data.items || []
+
+ if (Array.isArray(results)) {
+ for(var i = 0; i < results.length; i++) {
+ var repo_url = results[i].html_url
+ if (repo_url) {
+ results[i].repo_url = self.processUrl(repo_url)
+ }
+ self.items.push(results[i])
+ }
+ }
+ } catch(e) {}
+ },function(res){
+
+ })
+ },
+ loadingData: function (e) {
+ var url = SEARCH_URL + '&page=' + this.page
+ var self = this
+
+ if (self.isLoaded === false) return
+
+ self.loadingDisplay = 'show'
+
+ if (self.page <=10 ) {
+ self.renderData(url)
+ self.page++
+ } else {
+ self.loadingDisplay = 'hide'
+ self.loadingText = 'NO MORE!'
+ }
+ },
+ goToTop: function (e) {
+ dom.scrollToElement(this.$el('item-0'), {
+ offset: -100
+ })
+ },
+ refreshData: function (e) {
+ var url = SEARCH_URL + '&page=1'
+
+ if (this.isLoaded === false) return
+
+ this.refreshDisplay = 'show'
+
+ modal.toast({
+ 'message': 'Refreshing...',
+ 'duration': 1
+ })
+
+ this.items = []
+ this.page = 1
+ this.renderData(url)
+
+ this.refreshDisplay = 'hide'
+ },
+ processUrl: function (url) {
+ var platform = this.$getConfig().env.platform.toLowerCase()
+
+
+ if (url) {
+ // iOS do not need encode
+ if (platform === 'ios') {
+ return PAGE_URL + '?weburl=' + url
+ } else if (platform === 'web') {
+ return url
+ } else {
+ var encodeUrl = encodeURIComponent(url)
+ return PAGE_URL + '?weburl=' + encodeUrl
+ }
+ }
+ }
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/3e8369efb20a169077b5331b45927ed8)。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v1.0/references/components/cell.md
----------------------------------------------------------------------
diff --git a/_draft/v1.0/references/components/cell.md b/_draft/v1.0/references/components/cell.md
new file mode 100644
index 0000000..e977037
--- /dev/null
+++ b/_draft/v1.0/references/components/cell.md
@@ -0,0 +1,191 @@
+---
+title: <cell>
+type: references
+order: 2.5
+version: 0.10
+---
+
+# <cell>
+
+用于定义列表中的子列表项，类似于 HTML 中的 `ul` 之于 `li`。Weex 会对 `<cell>` 进行高效的内存回收以达到更好的性能，该组件必须作为[`<list>`](./list.html) 组件的子组件, 这是为了优化滚动时的性能。
+
+## 子组件
+
+支持所有 Weex 的组件作为它的子组件。
+
+## 样式
+
+**注意：**
+
+你不能给 `<cell>` 设定`flex`值。 `<cell>`的宽度等于父组件 `<list>` 的宽度，并且 `<cell>` 高度自适应。
+
+- 通用样式：支持所有通用样式
+
+ - 盒模型
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- 通用事件
+
+ 支持所有通用事件：
+
+ - `click`
+ - `longpress`
+ - `appear`
+ - `disappear`
+
+ 查看 [通用事件](../common-event.html)
+
+## 示例
+
+
+
+```html
+<template>
+ <div>
+ <list class="list">
+ <header class="header">
+ <text class="title">Search Results</text>
+ </header>
+ <refresh style="width: 750; padding: 30;" onrefresh="refreshData">
+ <text class="text"> ↓ Pull to refresh </text>
+ <loading-indicator class="indicator"></loading-indicator>
+ </refresh>
+ <cell class="row" repeat="item in items" id="item-{{$index}}">
+ <div>
+ <text class="item">Repo name: {{item.full_name}}</text>
+ </div>
+ <div>
+ <text class="item">Repo star: {{item.stargazers_count}}</text>
+ </div>
+ </cell>
+ <loading onloading="loadingData" style="width: 750; padding: 30;" display="{{loadingDisplay}}">
+ <text class="text">{{loadingText}}</text>
+ </loading>
+ </list>
+ <div class="up" onclick="goToTop">
+ <img class="img" src="https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png"></img>
+ </div>
+ </div>
+</template>
+
+<style>
+.header {
+ padding: 25;
+ background-color: #efefef;
+ border-bottom-color: #eeeeee;
+ border-bottom-width: 2;
+ border-bottom-style: solid;
+}
+.title {
+ text-align: center;
+}
+.text {
+ text-align: center;
+}
+.list {
+ background-color: #ffffff;
+}
+.row {
+ padding: 20;
+ border-bottom-color: #eeeeee;
+ border-bottom-width: 2;
+ border-bottom-style: solid;
+}
+.up {
+ width: 70;
+ height: 70;
+ position: fixed;
+ right: 20;
+ bottom: 20;
+}
+.img {
+ width: 70;
+ height: 70;
+}
+</style>
+
+<script>
+var dom = require('@weex-module/dom') || {}
+var stream = require('@weex-module/stream') || {}
+var modal = require('@weex-module/modal') || {}
+
+var SEARCH_URL = 'https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc'
+
+module.exports = {
+ data: {
+ page: 1,
+ loadingDisplay: 'show',
+ loadingText: 'Loading...',
+ items:[]
+ },
+ created: function () {
+ var url = SEARCH_URL + '&page=' + this.page
+
+ this.renderData(url)
+
+ this.page++
+ },
+ methods: {
+ renderData: function (url) {
+ var self = this
+
+ stream.fetch({
+ method: 'GET',
+ url: url,
+ type:'json'
+ }, function(res) {
+ try {
+ var results = res.data.items || []
+
+ if (Array.isArray(results)) {
+ for(var i = 0; i < results.length; i++) {
+ self.items.push(results[i])
+ }
+ }
+ } catch(e) {}
+ },function(res){
+
+ })
+ },
+ loadingData: function (e) {
+ var url = SEARCH_URL + '&page=' + this.page
+ var self = this
+
+ if (self.page <=10 ) {
+ self.renderData(url)
+ self.page++
+ } else {
+ self.loadingDisplay = 'hide'
+ self.loadingText = 'NO MORE!'
+ }
+ },
+ goToTop: function (e) {
+ dom.scrollToElement(this.$el('item-0'), {
+ offset: -100
+ })
+ },
+ refreshData: function (e) {
+ var url = SEARCH_URL + '&page=1'
+
+ modal.toast({
+ 'message': 'Refreshing...',
+ 'duration': 1
+ })
+
+ this.items = []
+ this.page = 1
+ this.renderData(url)
+ }
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/280fa3dc8e793ea8712451ecdf84fb7b)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v1.0/references/components/div.md
----------------------------------------------------------------------
diff --git a/_draft/v1.0/references/components/div.md b/_draft/v1.0/references/components/div.md
new file mode 100644
index 0000000..893f7a1
--- /dev/null
+++ b/_draft/v1.0/references/components/div.md
@@ -0,0 +1,245 @@
+---
+title: <div>
+type: references
+order: 2.2
+version: 0.10
+---
+
+# <div>
+
+`<div>` 组件是用于包装其它组件的最基本容器。支持所有的通用样式、特性、`flexbox` 布局。其类似于 HTML 的 `<div>` 容器，但**不能**直接在里面添加文本（字符串），如果要展示文本，应该使用 `<text>` 组件。历史版本中，`<div>` 别名是 `<container>`，目前**已经弃用**。
+
+**注意：**
+
+`<div>` 嵌套层级不可过深，否则容易引起性能问题，建议控制在 **10** 层以内。
+
+一个简单例子：
+
+```html
+<template>
+ <div>
+ <text class="text">Hello World!</text>
+ </div>
+</template>
+
+<style>
+.text {
+ font-size: 70;
+ color: #ff0000
+}
+</style>
+
+<script></script>
+```
+
+[体验一下](http://dotwe.org/a468998152ee680413588c38bd61c29e)
+
+
+
+## 子组件
+
+`<div>` 基本容器组件，因此支持包括 `<div>` 在内的任何组件作为自己的子组件。因此，在写一个组件时，推荐外层使用 `<div>` 作为根容器。
+
+## 样式
+
+`<div>` 支持所有通用样式：
+
+- 盒模型
+- `flexbox` 布局
+- `position`
+- `opacity`
+- `background-color`
+
+查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+`<div>` 支持所有通用事件：
+
+- `click`
+- `longpress`
+- `appear`
+- `disappear`
+
+查看 [通用事件](../common-event.html)
+
+## 约束
+
+1. **不能**直接在 `<div>` 中添加文本。
+
+ 错误示例，“Hello World!” 无法被正常渲染。
+
+ ```html
+ <template>
+ <div>Hello World!</div>
+ </template>
+
+ <style>
+ .text {
+ font-size: 70;
+ color: #ff0000
+ }
+ </style>
+
+ <script></script>
+ ```
+
+ [体验一下](http://dotwe.org/3ef3ba3f0f162b27e24c525250c46a04)
+
+2. `<div>` 不可滚动，即使显式设置高度也一样。
+
+ [错误示例](http://dotwe.org/a2cc491c5b9e6f6eb06795e45e725efd)
+
+## 示例
+
+
+
+```html
+<style>
+.item {
+ padding: 20;
+ height: 220;
+ border-bottom-width: 1;
+ border-bottom-style: solid;
+ border-bottom-color: #efefef;
+}
+.item-content {
+ flex-direction: row;
+ width: 710;
+ background-color: #ffffff;
+}
+.item-imgbox {
+ height: 180;
+ width: 180;
+ margin-right: 20;
+}
+.item-img {
+ width: 180;
+ height: 180;
+}
+.item-info {
+ height: 180;
+ width: 510;
+ justify-content: center;
+ position: relative;
+}
+.item-info-detail {
+ position: relative;
+ color: #A2A2A2;
+}
+.desc {
+ lines: 4;
+ text-overflow: ellipsis;
+ font-size: 26;
+ line-height: 30;
+ color: #A2A2A2;
+}
+.title {
+ lines: 1;
+ text-overflow: ellipsis;
+ font-size: 32;
+ color: #2D2D2D;
+ line-height: 40;
+}
+.detail-info {
+ margin-top: 15;
+}
+.up {
+ width: 70;
+ height: 70;
+ position: fixed;
+ right: 20;
+ bottom: 20;
+}
+.img {
+ width: 70;
+ height: 70;
+}
+</style>
+
+<template>
+ <div>
+ <scroller>
+ <div class="item" repeat="item in items" id="item-{{$index}}">
+ <div class="item-content">
+ <div class="item-imgbox">
+ <img class="item-img" src="{{item.img}}" alt="" />
+ </div>
+ <div class="item-info">
+ <div class="item-info-detail">
+ <text class="title">{{item.title}}</text>
+ <div class="detail-info">
+ <text class="desc">{{item.desc}}</text>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </scroller>
+ <div class="up" onclick="goToTop">
+ <img class="img" src="https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png"></img>
+ </div>
+ </div>
+</template>
+
+<script>
+ var dom = require('@weex-module/dom') || {}
+
+ module.exports = {
+ data: {
+ items: [{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ }]
+ },
+ created: function () {
+ },
+ methods: {
+ goToTop: function (e) {
+ dom.scrollToElement(this.$el('item-0'), {
+ offset: 0
+ })
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/799f54b32f5227f9c34cfbb5e6946ba7)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v1.0/references/components/image.md
----------------------------------------------------------------------
diff --git a/_draft/v1.0/references/components/image.md b/_draft/v1.0/references/components/image.md
new file mode 100644
index 0000000..5a18280
--- /dev/null
+++ b/_draft/v1.0/references/components/image.md
@@ -0,0 +1,161 @@
+---
+title: <image>
+type: references
+order: 2.3
+version: 0.10
+---
+
+# <image>
+
+`<image>` 组件用于渲染图片，并且它不能包含任何子组件。可以用 `<img>` 作简写。
+
+需要注意的是，需要明确指定 `width` 和 `height`，否则图片无法显示。
+
+简单例子：
+
+```html
+<template>
+ <div>
+ <img style="width: 560;height: 560;" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></img>
+ </div>
+</template>
+```
+
+[体验一下](http://dotwe.org/23b6cf951e6059d2cf7b9a74a9915ace)
+
+## 子组件
+
+`<image>` 组件不支持任何子组件，因此不要尝试在 `<image>` 组件中添加任何组件。如果需要实现 `background-image` 的效果，可以使用 `<image>` 组件和 `position` 定位来现实，如下面代码。
+
+```html
+<template>
+ <div>
+ <img style="width:750; height:750;" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></img>
+ <div class="title">
+ <text style="font-size:50; color: #ff0000">你好，image</text>
+ </div>
+ </div>
+</template>
+<style>
+ .title{
+ position:absolute;
+ top:50;
+ left:10;
+ }
+</style>
+```
+
+[体验一下](http://dotwe.org/08dd49aaca8bf289c5fc08f808b9c08c)
+
+## 特性
+
+`<image>` 组件，包含 `src` 和 `resize` 两个重要特性。
+
+- `src {string}`：定义图片链接，目前图片暂不支持本地图片。
+- `resize {string}`：可以控制图片的拉伸状态，值行为和 W3C 标准一致。
+
+ 可选值为：
+
+ - `stretch`：默认值，指定图片按照容器拉伸，有可能使图片产生形变。
+ - `cover`：指定图片可以被调整到容器，以使图片完全覆盖背景区域，图片有可能被剪裁。
+ - `contain`：指定可以不用考虑容器的大小，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
+
+ 例子：
+
+ 
+
+ [体验一下](http://dotwe.org/049213ab3364a86637e211c0329cdc50)
+
+## 样式
+
+- 通用样式：支持所有通用样式
+
+ - 盒模型
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- `load` <sup class="wx-v">v0.8+</sup>：当图片加载完成时触发。目前在 Android、iOS 上支持，H5 暂不支持。
+
+- 通用事件
+
+ 支持所有通用事件：
+
+ - `click`
+ - `longpress`
+ - `appear`
+ - `disappear`
+
+ 查看 [通用事件](../common-event.html)
+
+## 约束
+
+1. 需要指定宽高；
+2. 不支持子组件。
+
+## 示例
+
+我们这里展示了一篇文章，文章标题有一副背景图。
+
+
+
+这个效果实现起来非常容易，我们只需要将标题文案通过 `position: absolute` 进行定位即可。唯一需要注意的一点是，Weex 目前不支持 `z-index`，因此必须把上层元素放在后。
+
+```html
+<style>
+ .page-head {
+ width:750;
+ height:200;
+ }
+ .title-bg {
+ width:750;
+ height:200;
+ }
+ .title-box {
+ width: 750;
+ height: 200;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+ .title {
+ color: #ffffff;
+ font-size: 32;
+ font-weight: bold;
+ }
+ .article {
+ padding: 20;
+ }
+ .paragraph{
+ margin-bottom: 15;
+ }
+</style>
+
+<template>
+ <scroller class="wrapper" >
+ <div class="page-head" >
+ <image class="title-bg" resize="cover" src="https://img.alicdn.com/tps/TB1dX5NOFXXXXc6XFXXXXXXXXXX-750-202.png"></image>
+ <div class="title-box">
+ <text class="title">Alan Mathison Turing</text>
+ </div>
+ </image>
+ <div class="article">
+ <text class="paragraph">Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.</text>
+ <text class="paragraph">During the Second World War, Turing worked for the Government Code and Cypher School (GC&CS) at Bletchley Park, Britain's codebreaking centre. For a time he led Hut 8, the section responsible for German naval cryptanalysis. He devised a number of techniques for speeding the breaking of German ciphers, including improvements to the pre-war Polish bombe method, an electromechanical machine that could find settings for the Enigma machine. Turing played a pivotal role in cracking intercepted coded messages that enabled the Allies to defeat the Nazis in many crucial engagements, including the Battle of the Atlantic; it has been estimated that this work shortened the war in Europe by more than two years and saved over fourteen million lives.</text>
+ <text class="paragraph">After the war, he worked at the National Physical Laboratory, where he designed the ACE, among the first designs for a stored-program computer. In 1948 Turing joined Max Newman's Computing Machine Laboratory at the Victoria University of Manchester, where he helped develop the Manchester computers and became interested in mathematical biology. He wrote a paper on the chemical basis of morphogenesis, and predicted oscillating chemical reactions such as the Belousov–Zhabotinsky reaction, first observed in the 1960s.</text>
+ <text class="paragraph">Turing was prosecuted in 1952 for homosexual acts, when by the Labouchere Amendment, "gross indecency" was still criminal in the UK. He accepted chemical castration treatment, with DES, as an alternative to prison. Turing died in 1954, 16 days before his 42nd birthday, from cyanide poisoning. An inquest determined his death as suicide, but it has been noted that the known evidence is also consistent with accidental poisoning. In 2009, following an Internet campaign, British Prime Minister Gordon Brown made an official public apology on behalf of the British government for "the appalling way he was treated." Queen Elizabeth II granted him a posthumous pardon in 2013.</text>
+ </div>
+ </scroller>
+</template>
+```
+
+[体验一下](http://dotwe.org/bccf884672f0a76f884298b3754d2079)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v1.0/references/components/index.md
----------------------------------------------------------------------
diff --git a/_draft/v1.0/references/components/index.md b/_draft/v1.0/references/components/index.md
new file mode 100644
index 0000000..78ef46b
--- /dev/null
+++ b/_draft/v1.0/references/components/index.md
@@ -0,0 +1,24 @@
+---
+title: 内建组件
+type: references
+order: 2
+version: 0.10
+---
+
+# 内建组件
+
+- [<a>](./a.html)
+- [<indicator>](./indicator.html)
+- [<switch>](./switch.html)
+- [<text>](./text.html)
+- [<textarea>](./textarea.html)
+- [<video>](./video.html)
+- [<web>](./web.html)
+- [<div>](./div.html)
+- [<image>](./image.html)
+- [<input>](./input.html)
+- [<list>](./list.html)
+- [<cell>](./cell.html)
+- [<refresh> & <loading>](./refresh.html)
+- [<scroller>](./scroller.html)
+- [<slider>](./slider.html)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v1.0/references/components/indicator.md
----------------------------------------------------------------------
diff --git a/_draft/v1.0/references/components/indicator.md b/_draft/v1.0/references/components/indicator.md
new file mode 100644
index 0000000..b2aa19d
--- /dev/null
+++ b/_draft/v1.0/references/components/indicator.md
@@ -0,0 +1,124 @@
+---
+title: <indicator>
+type: references
+order: 2.10
+version: 0.10
+---
+
+# <indicator>
+
+`<indicator>` 组件用于显示轮播图指示器效果，必须充当 [`<slider>`](./slider.html) 组件的子组件使用。
+
+## 子组件
+
+`<indicator>` 组件没有任何子组件。
+
+## 样式
+
+`<indicator>` 组件有一些私有样式，如下：
+
+- `item-color {color}`：设置项的颜色，可以是颜色的名称，例如 `red`；也可以是 16 进制的颜色，例如 `#RRGGBB`。
+
+- `item-selected-color {color}`：被选中时的颜色，可以是颜色的名称，`red`；也可以是 16 进制的颜色，例如 `#RRGGBB`。
+
+- `item-size {number}`：元素的个数。
+
+- 通用样式
+ - 盒模型
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+**注意 1：**
+
+这里需要注意一点，`<indicator>` 的 `position` 不仅依赖 `top`、`left`、`bottom` 和 `right` 样式，同时会参考 `width`和 `height` 样式。`<indicator>` 默认的宽高继承于 `<slider>`，如果 `<slider>` 未设置宽高，需要显式的给 `<indicator>` 设置宽高值。
+
+**注意 2：**
+
+`background-color` 不推荐使用，建议使用 `item-color` 和 `item-selected-color` 代替。
+
+
+## 事件
+
+支持所有通用事件。
+
+- `click`
+- `longpress`
+- `appear`
+- `disappear`
+
+查看 [通用事件](../common-event.html)
+
+## 约束
+
+1. 不支持子组件。
+
+## 示例
+
+```html
+<template>
+ <div>
+ <slider class="slider">
+ <div class="slider-pages" repeat="item in itemList">
+ <image class="img" src="{{item.pictureUrl}}"></image>
+ <text class="title">{{item.title}}</text>
+ </div>
+ <indicator class="indicator"></indicator>
+ </slider>
+ </div>
+</template>
+
+<style>
+ .img {
+ width: 714;
+ height: 150;
+ }
+ .title {
+ position: absolute;
+ top: 20;
+ left: 20;
+ color: #ff0000;
+ font-size: 48;
+ font-weight: bold;
+ background-color: #eeeeee;
+ }
+ .slider {
+ flex-direction: row;
+ margin: 18;
+ width: 714;
+ height: 230;
+ }
+ .slider-pages {
+ flex-direction: row;
+ width: 714;
+ height: 200;
+ }
+ .indicator {
+ width:714;
+ height:200;
+ position:absolute;
+ top:1;
+ left:1;
+ item-color: red;
+ item-selectedColor: blue;
+ item-size: 20;
+ }
+</style>
+
+<script>
+ module.exports = {
+ data: {
+ itemList: [
+ {itemId: '520421163634', title: 'item1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
+ {itemId: '522076777462', title: 'item2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
+ {itemId: '522076777462', title: 'iten3', pictureUrl: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
+ ]
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/baea3d54c503c6d3d4e4a8f275b9d47f)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v1.0/references/components/input.md
----------------------------------------------------------------------
diff --git a/_draft/v1.0/references/components/input.md b/_draft/v1.0/references/components/input.md
new file mode 100644
index 0000000..9a7b8ff
--- /dev/null
+++ b/_draft/v1.0/references/components/input.md
@@ -0,0 +1,309 @@
+---
+title: <input>
+type: references
+order: 2.4
+version: 0.10
+---
+
+# <input>
+
+Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组件。 `<input>` 组件的工作方式因 `type` 属性的值而异，比如 `<text>`， `password`，`url`，`email`，`tel` 等。
+
+**注意：**
+
+此组件不支持 `click` 事件。请监听 `<input>` 或 `change` 来代替 `click` 事件。
+
+## 子组件
+
+不支持子组件。
+
+## 特性
+
+- `type {string}`：控件的类型，默认值是 `<text>`。`type` 值可以是 `text`，`password`，`url`，`email`，`tel` 。每个 `type` 值都符合 W3C 标准。
+- `value {string}`：组件的接收到的输入字符。
+- `placeholder {string}`：提示用户可以输入什么。 提示文本不能有回车或换行。
+- `disabled {boolean}`：布尔类型的数据，表示是否支持输入。通常 `click` 事件在 `disabled` 控件上是失效的。
+- `autofocus {boolean}`：布尔类型的数据，表示是否在页面加载时控件自动获得输入焦点。
+- `maxlength {nubmer}`：<sup class="wx-v">v0.7</sup>一个数值类型的值，表示输入的最大长度。
+
+## 样式
+
+- `placeholder-color {color}`：placeholder 字符颜色。默认值是 `#999999`。
+- text styles
+ - 支持 `color`
+ - 支持 `font-size`
+ - 支持 `font-style`
+ - 支持 `font-weight`
+ - 支持 `text-align`
+
+ 查看 [文本样式](../text-style.html)
+
+- 通用样式：支持所有通用样式
+ - 盒模型
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- `input`: 输入字符的值更改。
+
+ 事件中 event 对象属性：
+
+ - `value`: 触发事件的组件；
+ - `timestamp`: 事件发生时的时间戳,仅支持Android。
+
+- `change`: 当用户输入完成时触发。通常在 `blur` 事件之后。
+
+ 事件中 event 对象属性：
+
+ - `value`: 触发事件的组件；
+
+ - `timestamp`: 事件发生时的时间戳,仅支持Android。
+
+- `focus`: 组件获得输入焦点。
+
+ 事件中 event 对象属性：
+
+ - `timestamp`: 事件发生时的时间戳,仅支持Android。
+
+- `blur`: 组件失去输入焦点。
+
+ 事件中 event 对象属性：
+
+ - `timestamp`: 事件发生时的时间戳,仅支持Android。
+
+- 通用事件
+
+ **注意：**
+ 不支持 `click` 事件。 请监听 `input` 或 `change` 事件代替。
+
+ 支持以下通用事件：
+
+ - `longpress`
+ - `appear`
+ - `disappear`
+
+ 查看 [通用事件](../common-event.html)
+
+# 约束
+
+目前不支持 `this.$el(id).value = ''` 这种方式改写 input value。只支持在 `<input>` 组件的 `input`、`change` 事件中改写。
+
+## 示例
+
+```html
+<template>
+ <div>
+ <div>
+ <text style="font-size: 40px">oninput: {{txtInput}}</text>
+ <text style="font-size: 40px">onchange: {{txtChange}}</text>
+ <text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
+ </div>
+ <scroller>
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text>
+ </div>
+ <input type="text" placeholder="Input Text" class="input" :autofocus=true value="" @change="onchange" @input="oninput" @focus="onfocus" @blur="onblur"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = password</text>
+ </div>
+ <input type="password" placeholder="Input Password" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = url</text>
+ </div>
+ <input type="url" placeholder="Input URL" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = email</text>
+ </div>
+ <input type="email" placeholder="Input Email" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = tel</text>
+ </div>
+ <input type="tel" placeholder="Input Tel" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = time</text>
+ </div>
+ <input type="time" placeholder="Input Time" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = date</text>
+ </div>
+ <input type="date" placeholder="Input Date" class="input" @change="onchange" @input="oninput" max="2017-12-12" min="2015-01-01"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = default</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="default" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = go</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="go" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = next</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="next" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = search</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="search" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = send</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="send" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input return-key-type = done</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="done" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">function focus() & blur()</text>
+ </div>
+ <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
+ <text class="button" value="Focus" type="primary" @click="focus"></text>
+ <text class="button" value="Blur" type="primary" @click="blur"></text>
+ </div>
+
+ <input type="text" placeholder="Input1" class="input" value="" ref="input1"/>
+ </div>
+
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input selection</text>
+ </div>
+ <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
+ <text class="button" value="setRange" type="primary" @click="setRange"></text>
+ </div>
+ <input type="text" ref="inputselection" placeholder="please input" value="123456789" class="input" @change="onchange" @return = "onreturn" @input="oninput"/>
+ </div>
+
+
+
+ </scroller>
+ </div>
+</template>
+
+<style scoped>
+ .input {
+ font-size: 60px;
+ height: 80px;
+ width: 750px;
+ }
+ .button {
+ font-size: 36;
+ width: 200;
+ color: #41B883;
+ text-align: center;
+ padding-top: 10;
+ padding-bottom: 10;
+ border-width: 2;
+ border-style: solid;
+ margin-right: 20;
+ border-color: rgb(162, 217, 192);
+ background-color: rgba(162, 217, 192, 0.2);
+ }
+</style>
+
+<script>
+ const modal = weex.requireModule('modal')
+ module.exports = {
+ data: function () {
+ return {
+ txtInput: '',
+ txtChange: '',
+ txtReturnType: '',
+ txtSelection:'',
+ autofocus: false
+ };
+ },
+ methods: {
+ ready: function () {
+ var self = this;
+ setTimeout(function () {
+ self.autofocus = true;
+ }, 1000);
+ },
+ onchange: function (event) {
+ this.txtChange = event.value;
+ console.log('onchange', event.value);
+ },
+ onreturn: function (event) {
+ this.txtReturnType = event.returnKeyType;
+ console.log('onreturn', event.type);
+ },
+ oninput: function (event) {
+ this.txtInput = event.value;
+ console.log('oninput', event.value);
+ },
+ focus: function () {
+ this.$refs['input1'].focus();
+ },
+ blur: function () {
+ this.$refs['input1'].blur();
+ },
+ setRange: function() {
+ console.log(this.$refs["inputselection"]);
+ this.$refs["inputselection"].setSelectionRange(2, 6);
+ },
+ onfocus () {
+ console.log('onfocus:');
+ modal.toast({
+ message: 'onfocus',
+ duration: 0.8
+ })
+ },
+ onblur () {
+ console.log('onblur:');
+ modal.toast({
+ message: 'input blur',
+ duration: 0.8
+ })
+ }
+ }
+ };
+</script>
+```
+
+[体验一下](http://dotwe.org/vue/dd83d941d2364f2849e45dc3c5d91ab4)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v1.0/references/components/list.md
----------------------------------------------------------------------
diff --git a/_draft/v1.0/references/components/list.md b/_draft/v1.0/references/components/list.md
new file mode 100644
index 0000000..842201f
--- /dev/null
+++ b/_draft/v1.0/references/components/list.md
@@ -0,0 +1,375 @@
+---
+title: <list>
+type: references
+order: 2.4
+version: 0.10
+---
+
+# <list>
+
+`<list>` 组件是提供垂直列表功能的核心组件，拥有平滑的滚动和高效的内存管理，非常适合用于长列表的展示。最简单的使用方法是在 `<list>` 标签内使用一组由简单数组 `repeat` 生成的 `<cell>` 标签填充。
+
+一个最简例子：
+
+```html
+<template>
+ <list class="list">
+ <cell class="row" repeat="item in rows" index="{{$index}}">
+ <text class="item-title">row {{item.id}}</text>
+ </cell>
+ </list>
+</template>
+
+<style></style>
+
+<script>
+module.exports = {
+ data: {
+ rows:[
+ {id: 1},
+ {id: 2},
+ {id: 3},
+ {id: 4},
+ {id: 5}
+ ]
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/bcaf48a63b49750b828d2d23762d4a15)
+
+
+
+## 子组件
+
+`<list>` 组件支持更多高级功能，由以下子组件提供：
+
+- `<cell>`
+
+ 用于定义列表中的子列表项，类似于 HTML 中的 `ul` 之于 `li`。Weex 会对 `<cell>` 进行高效的内存回收以达到更好的性能。
+
+ 使用文档请查看 [`<cell>`](./cell.html)。
+
+- `header` <sup class="wx-v">0.6.1+</sup>
+
+ 当 `<header>` 到达屏幕顶部时，吸附在屏幕顶部。
+
+- `<refresh>`
+
+ 用于给列表添加下拉刷新的功能。
+
+ 使用文档请查看 [`<refresh>`](./refresh.html)
+
+- `<loading>`
+
+ `<loading>` 用法与特性和 `<refresh>` 类似，用于给列表添加上拉加载更多的功能。
+
+ 使用文档请查看 [`<loading>`](./loading.html)
+
+**注意：**
+
+`<list>` 的子组件只能包括以上四种组件或是 `fix` 定位的组件，其他形式的组件将不能被正确的渲染。
+
+一个错误的示范，此例子无法在客户端正常渲染，因为 `<list>` 子组件是 `<div>`：
+
+```html
+<template>
+ <list class="list">
+ <div class="row" repeat="item in rows" index="{{$index}}">
+ <text class="item-title">row {{item.id}}</text>
+ </div>
+ </list>
+</template>
+
+<style></style>
+
+<script>
+module.exports = {
+ data: {
+ rows:[
+ {id: 1},
+ {id: 2},
+ {id: 3},
+ {id: 4},
+ {id: 5}
+ ]
+ }
+}
+</script>
+```
+
+## 特性
+
+- `loadmoreoffset {number}`：默认值为 0，触发 `loadmore` 事件所需要的垂直偏移距离（设备屏幕底部与 `<list>` 底部之间的距离）。当 `<list>` 的滚动条滚动到足够接近 `<list>` 底部时将会触发 `loadmore` 这个事件。
+
+ 
+
+## 样式
+
+- 通用样式：支持所有通用样式
+
+ - 盒模型
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- `loadmore` <sup class="wx-v">0.5+</sup>：如果列表滚动到底部将会立即触发这个事件，你可以在这个事件的处理函数中加载下一页的列表项。
+
+ [体验一下](http://dotwe.org/bc445ede8746a31360e3607d210304c5)
+
+- 通用事件
+
+ 支持所有通用事件：
+
+ - `click`
+ - `longpress`
+ - `appear`
+ - `disappear`
+
+ 查看 [通用事件](../common-event.html)
+
+## 扩展
+
+### scrollToElement(node, options)
+
+滚动到列表某个指定项是常见需求，`<list>` 拓展了该功能支持滚动到指定 `<cell>`。通过 `dom` module 访问，更多信息可参考 [dom module](../modules/dom.html) 。
+
+#### 参数
+
+- `node {node}`：指定目标节点。
+- `options {Object}`：
+ - `offset {number}`：一个到其可见位置的偏移距离，默认是 0
+
+#### 示例
+
+```html
+<template>
+ <list class="list">
+ <cell>
+ <div onclick="go" style="width: 750;height: 50; position: fixed; left: 0; right: 0; bottom: 0; background-color: #eeeeee;">
+ <text style="text-align: center;">
+ Go to 50th line.
+ </text>
+ </div>
+ </cell>
+ <cell class="row" repeat="item in rows" id="item-{{$index}}">
+ <text class="item-title">row {{item.id}}</text>
+ </cell>
+ </list>
+</template>
+
+<script>
+var dom = require('@weex-module/dom')
+
+module.exports = {
+ data: {
+ rows: []
+ },
+ created: function () {
+ for (var i = 0; i < 100; i++) {
+ this.rows.push({
+ id: i
+ })
+ }
+ },
+ methods: {
+ go: function () {
+ var el = this.$el('item-49')
+
+ dom.scrollToElement(el, {
+ offset: 0
+ })
+ }
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/65d91cb47d0e348c5750d2248d59b6bd)
+
+## 约束
+
+1. **不允许**相同方向的 `<list>` 或者 `<scroller>` 互相嵌套，换句话说就是嵌套的 `<list>`/`<scroller>` 必须是不同的方向。
+
+ 举个例子，**不允许**一个垂直方向的 `<list>` 嵌套的一个垂直方向的 `<scroller>` 中，但是一个垂直方向的 `<list>` 是可以嵌套的一个水平方向的 list 或者 `<scroller>` 中的。
+
+2. `<list>` 为根节点时无需设置高度，但是内嵌 `<list>` 高度**必须可计算**，你可以使用 `flex` 或 `postion` 将 `<list>` 设为一个响应式高度（例如全屏显示）, 也可以显式设置 `<list>` 组件的 `height` 样式。
+
+## 示例
+
+```html
+<template>
+ <div class="wrapper">
+ <list class="list">
+ <header class="header">
+ <text class="title">Search Results</text>
+ </header>
+ <refresh style="width: 750; padding: 30;" onrefresh="refreshData" display="{{refreshDisplay}}">
+ <text class="text"> ↓ Pull to refresh </text>
+ <loading-indicator class="indicator"></loading-indicator>
+ </refresh>
+ <cell class="row" repeat="item in items" id="item-{{$index}}">
+ <div>
+ <text class="item">Repo name: {{item.full_name}}</text>
+ </div>
+ <div>
+ <text class="item">Repo star: {{item.stargazers_count}}</text>
+ </div>
+ </cell>
+ <loading onloading="loadingData" style="width: 750; padding: 30;" display="{{loadingDisplay}}">
+ <text class="text">{{loadingText}}</text>
+ </loading>
+ </list>
+ <div class="up" onclick="goToTop">
+ <img class="img" src="https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png"></img>
+ </div>
+ </div>
+</template>
+
+<style>
+.wrapper {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+.list{
+ background-color: #ffffff;
+ flex: 1;
+}
+.header {
+ height: 80;
+ align-items: center;
+ justify-content: center;
+ background-color: #efefef;
+ border-bottom-color: #eeeeee;
+ border-bottom-width: 2;
+ border-bottom-style: solid;
+}
+.title {
+ text-align: center;
+}
+.text {
+ text-align: center;
+}
+.row {
+ padding: 20;
+ border-bottom-color: #eeeeee;
+ border-bottom-width: 2;
+ border-bottom-style: solid;
+}
+.up {
+ width: 70;
+ height: 70;
+ position: fixed;
+ right: 20;
+ bottom: 20;
+}
+.img {
+ width: 70;
+ height: 70;
+}
+</style>
+
+<script>
+var dom = require('@weex-module/dom') || {}
+var stream = require('@weex-module/stream') || {}
+var modal = require('@weex-module/modal') || {}
+
+var SEARCH_URL = 'https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc'
+
+module.exports = {
+ data: {
+ isLoaded: true,
+ page: 1,
+ loadingDisplay: 'hide',
+ refreshDisplay: 'hide',
+ loadingText: 'Loading...',
+ items:[]
+ },
+ created: function () {
+ var url = SEARCH_URL + '&page=' + this.page
+
+ this.renderData(url)
+
+ this.page++
+ },
+ methods: {
+ renderData: function (url) {
+ var self = this
+
+ stream.fetch({
+ method: 'GET',
+ url: url,
+ type:'json'
+ }, function(res) {
+ self.refreshDisplay = 'hide'
+ self.loadingDisplay = 'hide'
+
+ try {
+ var results = res.data.items || []
+
+ if (Array.isArray(results)) {
+ for(var i = 0; i < results.length; i++) {
+ self.items.push(results[i])
+ }
+ }
+
+ self.isLoaded = true
+ } catch(e) {}
+ },function(res){
+
+ })
+ },
+ loadingData: function (e) {
+ var url = SEARCH_URL + '&page=' + this.page
+ var self = this
+
+ if (self.isLoaded === false) return
+
+ self.loadingDisplay = 'show'
+
+ if (self.page <=10 ) {
+ self.renderData(url)
+ self.page++
+ } else {
+ self.loadingDisplay = 'hide'
+ self.loadingText = 'NO MORE!'
+ }
+ },
+ goToTop: function (e) {
+ dom.scrollToElement(this.$el('item-0'), {
+ offset: -100
+ })
+ },
+ refreshData: function (e) {
+ var url = SEARCH_URL + '&page=1'
+
+ if (this.isLoaded === false) return
+
+ this.refreshDisplay = 'show'
+
+ modal.toast({
+ 'message': 'Refreshing...',
+ 'duration': 1
+ })
+
+ this.items = []
+ this.page = 1
+ this.renderData(url)
+
+ this.refreshDisplay = 'hide'
+ }
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/ed524ade679b0fa96e980600c53ea5ce)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v1.0/references/components/loading.md
----------------------------------------------------------------------
diff --git a/_draft/v1.0/references/components/loading.md b/_draft/v1.0/references/components/loading.md
new file mode 100644
index 0000000..f6d68fa
--- /dev/null
+++ b/_draft/v1.0/references/components/loading.md
@@ -0,0 +1,118 @@
+---
+title: <loading>
+type: references
+order: 2.6
+version: 0.10
+---
+
+# <loading>
+
+<span class="weex-version">v0.6.1+</span>
+
+`<loading>` 为 `<scroller>` 和 `<list>` 提供上拉加载功能。用法与特性与 `<refresh>` 类似， 是 `<scroller>` 和 `<list>` 的子组件，且只能在被 `<scroller>` 和 `<list>` 包含时才能被正确的渲染。
+
+## 子组件
+
+- [`<text>`](./text.html)
+- [`<image>`](./image.html)
+- `<loading-indicator>`: `<refresh>` 和 `<loading>` 组件的子组件，拥有默认的动画效果的实现。
+
+## 特性
+
+- `display {string}`：可选值为 `show` 或者 `hide`，仅隐藏 `<indicator>`，`<loading>` 其他子组件依然可见，`loading` 事件仍会被触发。
+
+## 样式
+
+支持所有通用样式。
+
+- 盒模型
+- `flexbox` 布局
+- `position`
+- `opacity`
+- `background-color`
+
+查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- `loading`：加载时被触发。
+
+## 约束
+
+- `<loading>` 不支持 `remove`，v0.9 版本会修复。
+- `display` 值为 `show` 或 `hide`。仅隐藏 `<indicator>`，`<loading>` 其他子组件依然可见，`loading` 事件仍会被触发。
+
+ 如果需要 `<loading>` hide 时隐藏文案并不再触发事件，有两种解决方法：
+
+ 1. 修改提示文案，并在 `loading` 事件中添加判断逻辑；
+ 2. v0.9+ 可通过 `remove` 解决。
+
+- 只能通过 `display` 特性进行展示和隐藏，且必须成对出现，即设置 `display="show"`,必须有对应的 `display="hide"`。
+
+## 示例
+
+```html
+<template>
+ <list>
+ <header>
+ <div class="center">
+ <text style="text-align:center">I am the header</text>
+ </div>
+ </header>
+ <loading onloading="onloading" display="{{loadingDisplay}}" style="width:750;flex-direction: row;justify-content: center;">
+ <loading-indicator style="height:160;width:160;color:#3192e1"></loading-indicator>
+ </loading>
+ <cell class="row" repeat="i in staffs" index="{{$index}}">
+ <div class="item">
+ <text>{{i.name}}</text>
+ </div>
+ </cell>
+ </list>
+</template>
+
+<style>
+ .row {
+ width: 750;
+ }
+ .item {
+ justify-content: center;
+ border-bottom-width: 2;
+ border-bottom-color: #c0c0c0;
+ height: 100;
+ padding:20;
+ }
+ .center {
+ border-bottom-width: 2;
+ border-bottom-color: #cccccc;
+ height: 100;
+ padding:20;
+ background-color:#FFFFFF;
+ justify-content: center;
+ }
+</style>
+
+<script>
+ module.exports = {
+ data: {
+ staffs:[],
+ loadingDisplay: 'show',
+ loadingText: 'pull up to load more',
+ refreshText: 'pull down to refresh'
+ },
+ created:function() {
+ this.refreshDisplay='show'
+ this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}];
+ },
+ methods:{
+ onloading:function(e){
+ console.log('onloading...');
+ this.staffs.push({name:'onloading'})
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/6adf7add849f3c9fcdbc776a6c471f02)
+
+更多示例可查看 [`<list>`](./list.html)