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:44 UTC
[49/51] [abbrv] incubator-weex-site git commit: update file structure
and fix responsive styles
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/api.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/api.md b/_draft/v-0.10/references/api.md
deleted file mode 100644
index a62d5b8..0000000
--- a/_draft/v-0.10/references/api.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Component APIs
-type: references
-order: 1.3
-version: 0.10
----
-
-# APIs
-
-You can access these apis through `this`(Vm) context in script methods.
-
-e.g.
-
-```html
-<script>
-module.exports = {
- methods: {
- somemethod: function() {
- this.$vm('someId');
- }
- }
-}
-</script>
-```
-
-## $(id)
-
-**Deprecated**, please use `$vm` instead.
-
-## $el(id)
-
-Return the element referenced by specific id.
-
-### Arguments
-
-* `id`*(string)*: the unique identifier.
-
-### Returns
-
-* *(Element)*: an Element object referenced.
-
-### Tips
-* id is only guaranteed to be unique within the current (page)components, if you are looking for the parent components or child components, you can make use of the communication mode between components.
-* Further reading: [id](../guide/syntax/id.html), [Communicate Between Components](../guide/syntax/comm.html)
-
-## $vm(id)
-
-Return the vm object referenced by specific id.
-
-### Arguments
-
-* `id`*(string)*: the unique identifier.
-
-### Returns
-
-* `vm`*(Vm)*: a Vm object referenced.
-
-### Tips
-* id is only guaranteed to be unique within the current (page)components, if you are looking for the parent components or child components, you can make use of the communication mode between components.
-* Further reading: [id](../guide/syntax/id.html), [Communicate Between Components](../guide/syntax/comm.html)
-
-## $getConfig()
-
-Get the current global environment variables and configuration information.
-
-### Returns
-
- * `config`*(object)*: the object of config.
- * `bundleUrl`*(string)*: the url of bundle.
- * `debug`*(boolean)*: if is debug mode.
- * `env`*(object)*: a object of envrioment.
- * `weexVersion`*(string)*: a version of weex sdk.
- * `appName`*(string)*: a name of app.
- * `appVersion`*(string)*: a version of app.
- * `platform`*(string)*: the platform, one of `iOS`, `Android` and `Web`.
- * `osVersion`*(string)*: the version of os.
- * `deviceModel`*(string)*: the model of device. **native only**
- * `deviceWidth`*(number)*: the width of device, in pixels.
- * `deviceHeight`*(number)*: the height of device, in pixels.
-
-## $call(module, method, ...args)
-
-**Deprecated**, please use `require('@weex-module/module')[method](...args)` instead. See [modules](./modules/index.html) for more information
-
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/bubble.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/bubble.md b/_draft/v-0.10/references/bubble.md
deleted file mode 100644
index ba59a90..0000000
--- a/_draft/v-0.10/references/bubble.md
+++ /dev/null
@@ -1,150 +0,0 @@
----
-title: Event Bubble
-type: references
-order: 1.3
-version: 0.10
----
-
-# Event Bubble <span class="api-version">v0.13+</span>
-
-Weex 1.0 implements the W3C standard event bubbling mechanism.
-
-### Usage
-
-```html
-<template>
- <div class="root" onclick="rootClick" bubble="true">
- <div>
- <text style="font-size: 40px;">{{rootText}}</text>
- </div>
- <div class="outer" onclick="parentClick">
- <div>
- <text style="font-size: 40px;">{{parentText}}</text>
- </div>
- <text class="inner" onclick="click">{{innerText}}</text>
- </div>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- innerText: 'click me',
- parentText: '',
- rootText: ''
- },
- methods: {
- click: function(e) {
- this.innerText = 'inner bubble'
- },
- parentClick: function(e) {
- this.parentText = 'parent bubble'
- },
- rootClick: function(e) {
- this.rootText = 'root bubble'
- }
- }
- }
-</script>
-
-<style>
- .inner {
- font-size: 40px;
- text-align: center;
- background-color: #7a9b1b;
- padding: 40px;
- }
-
- .outer {
- font-size: 40px;
- text-align: center;
- background-color: #9b7a1b;
- padding: 120px;
- }
-
- .root {
- font-size: 40px;
- text-align: center;
- background-color: #7a1b9b;
- padding: 80px;
- }
-</style>
-```
-
-[try it](http://dotwe.org/weex/dbfeb926e003986e2eea88c8ccdadb92)
-
-Run the above code, open with the client, click on the middle of the elements, you can see the event spread up, followed by the trigger.
-
-### Notice
-
-One thing should be noticed: **For compatibility with previous versions, Weex does not turn on event bubbling by default. You need to add `bubble = "true"` on the root element's properties to turn on the bubbling mechanism. Otherwise, the event will not be propagated upwards, keeping the same effect as the previous version.**
-
-### stopPropagation
-
-In the event handler function, you can use the `e.stopPropagation()` method to prevent the event from escalating. Note that `e.stopPropagation()` differs from `bubble = "true"`, which affects only the current elements and the propagation of parent elements, without affecting the propagation of child elements; the latter is a switching mechanism that is added for compatibility, Will be a global shutdown or open the bubble mechanism, the two can co-exist, as follows:
-
-```html
-<template>
- <div class="root" onclick="rootClick" bubble="true">
- <div>
- <text style="font-size: 40px;">{{rootText}}</text>
- </div>
- <div class="outer" onclick="parentClick">
- <div>
- <text style="font-size: 40px;">{{parentText}}</text>
- </div>
- <text class="inner" onclick="click">{{innerText}}</text>
- </div>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- innerText: 'click me',
- parentText: '',
- rootText: ''
- },
- methods: {
- click: function(e) {
- this.innerText = 'inner bubble'
- },
- parentClick: function(e) {
- this.parentText = 'parent bubble'
- e.stopPropagation()
- },
- rootClick: function(e) {
- this.rootText = 'root bubble'
- // e.stopPropagation()
- }
- }
- }
-</script>
-
-<style>
- .inner {
- font-size: 40px;
- text-align: center;
- background-color: #7a9b1b;
- padding: 40px;
- }
-
- .outer {
- font-size: 40px;
- text-align: center;
- background-color: #9b7a1b;
- padding: 120px;
- }
-
- .root {
- font-size: 40px;
- text-align: center;
- background-color: #7a1b9b;
- padding: 80px;
- }
-</style>
-```
-
-[try it](http://dotwe.org/weex/0cab45a7c62e8bebedd2ffd83a8e1256)
-
-Run the above code, open with the client, click on the middle of the element, you can see the event up to the parent element is terminated, no longer continue to spread to the root element.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/cheatsheet.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/cheatsheet.md b/_draft/v-0.10/references/cheatsheet.md
deleted file mode 100644
index 68ac69a..0000000
--- a/_draft/v-0.10/references/cheatsheet.md
+++ /dev/null
@@ -1,102 +0,0 @@
-# Weex Cheat Sheet
-
-## Native Components
-
-| component | attribtues | styles | events | special parent | children |
-| ---- | ---- | ---- | ---- | ---- | ---- |
-| `<div>` | - | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
-| `<text>` | `value` | **box model**<br>flex<br>`position`<br>`background-color`<br>`opacity`<br>`color`<br>`font-size`<br>`font-style`<br>`font-weight`<br>`text-decoration`<br>`text-align`<br>`text-overflow`<br>`line-height` | `click`<br>`appear`<br>`disappear` | - | text only |
-| `<image>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity`<br>`resize` | `click`<br>`appear`<br>`disappear` | - | (none) |
-| `<scroller>` | `show-scrollbar`<br>`scroll-direction` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
-| `<list>` | `loadmoreoffset` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`loadmore`<br>`refresh`<br>`loading` | - | `<cell>`<br>`<header>`<br>`<refresh>`<br>`<loading>` |
-| `<cell>` | - | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | `<list>` | (any) |
-| `<slider>` | `auto-play` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`change` | - | (any)<br>`<indicator>` |
-| `<indicator>` | - | **box model**<br>**flexbox**<br>`position`<br>`item-color`<br>`item-selected-color`<br>`item-size` | `click`<br>`appear`<br>`disappear` | `<slider>` | (none) |
-| `<wxc-navpage>` | `height`<br>`background-color`<br>`title`<br>`title-color`<br>`left-item-title`<br>`left-item-color`<br>`right-item-title`<br>`right-item-color`<br>`left-item-src`<br>`right-item-src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`naviBar.leftItem.click`<br>`naviBar.rightItem.click` | - | (any) |
-| `<wxc-tabbar>` | `tab-items` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `tabBar.onClick` | - | (none) |
-| `<embed>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (none) |
-| `<web>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`pagestart`<br>`pagefinish`<br>`error` | - | (none) |
-| `<video>` | `src`<br>`play-status`<br>`auto-play` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`start`<br>`pause`<br>`finish`<br>`fail` | - | (none) |
-| `<a>` | `href` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
-| `<input>` | `type`<br>`value`<br>`placeholder`<br>`disabled`<br>`autofocus` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity`<br>`placeholder-color`<br>`color`<br>`font-size`<br>`font-style`<br>`font-weight`<br>`text-align` | `click`<br>`appear`<br>`disappear` | - | (none) |
-| `<switch>` | `checked`<br>`disabled` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `appear`<br>`disappear`<br>`input`<br>`change`<br>`focus`<br>`blur` | - | (none) |
-
-## Native Modules
-
-| module | apis |
-| ---- | ---- |
-| `@weex-module/dom` | `scrollToElement(node, { offset })` |
-| `@weex-module/modal` | `toast({ message, duration })`<br>`alert({ message, okTitle }, callback)`<br>`confirm({ message, okTitle, cancelTitle }, callback(result))`<br>`prompt({ message, okTitle, cancelTitle }, callback(result, data))` |
-| `@weex-module/stream` | `fetch({ method, url, headers, type, body }, callback({ status, ok, statusText, data, headers }), progressCallback({ readyState, status, length, statusText, headers}))` |
-| `@weex-module/webview` | `goBack(ref)`<br>`goForward(ref)`<br>`reload(ref)` |
-| `@weex-module/navigator` | `push({ url, animated }, callback)`<br>`pop({ animated }, callback)` |
-| `@weex-module/animation` | `transition(node, { styles, duration, timingFunction, delay, transform-origin }, callback)` |
-
-## Special Template Syntax
-
-* `<foo x="abc">`
-* `{% raw %}<foo x="{{expr}}">{% endraw %}`
-* `<foo style="name1: value1; name2: value2">`
-* `{% raw %}<foo style="name1: value1; name2: {{expr}}; name3: ...">{% endraw %}`
-* `<foo class="a b c">`
-* `{% raw %}<foo class="a {{expr}} c">{% endraw %}`
-* `<foo onclick="methodName">`
-* `<foo id="abc">`
-* `<foo if="expr">`
-* `<foo repeat="item in list">`
-* `<foo repeat="(key,item) in list">`
-* `<component type="foo">`
-* `{% raw %}<component type="{{expr}}">{% endraw %}`
-
-## ViewModel APIs
-
-* `this.$vm(el)`
-* `this.$el(el)`
-* `this.$getConfig()`
-* `this.$emit(type, data)`
-* `this.$dispatch(type, data)`
-* `this.$broadcast(type, data)`
-
-## ViewModel Options
-
-* `data`
-* `methods`
-* `computed`
-* `init`, `created`, `ready`
-* `events`
-
-example:
-
-```javascript
-module.exports = {
-
- data: function () {
- return {
- x: 1,
- y: 2
- }
- }
-
- methods: {
- foo: function () {
- console.log('foo')
- }
- },
-
- computed: {
- z: function () {
- return this.x + this.y
- }
- },
-
- events: {
- custom: function (e) {
- console.log(e)
- }
- },
-
- init: function () {},
- created: function () {},
- ready: function () {}
-}
-```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/color-names.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/color-names.md b/_draft/v-0.10/references/color-names.md
deleted file mode 100644
index a61112b..0000000
--- a/_draft/v-0.10/references/color-names.md
+++ /dev/null
@@ -1,182 +0,0 @@
----
-title: List of the names of colors
-type: references
-order: 1.7
-version: 0.10
----
-
-# List of the names of colors
-
-### Basic color keywords:
-
-| Color Name | Hex rgb |
-| ---------- | ------- |
-| black | #000000 |
-| silver | #C0C0C0 |
-| gray | #808080 |
-| white | #FFFFFF |
-| maroon | #800000 |
-| red | #FF0000 |
-| purple | #800080 |
-| fuchsia | #FF00FF |
-| green | #008000 |
-| lime | #00FF00 |
-| olive | #808000 |
-| yellow | #FFFF00 |
-| navy | #000080 |
-| blue | #0000FF |
-| teal | #008080 |
-| aqua | #00FFFF |
-
-### Extended color keywords:
-
-| Color Name | Hex rgb |
-| ---------- | ------- |
-| aliceblue | #F0F8FF |
-| antiquewhite | #FAEBD7 |
-| aqua | #00FFFF |
-| aquamarine | #7FFFD4 |
-| azure | #F0FFFF |
-| beige | #F5F5DC |
-| bisque | #FFE4C4 |
-| black | #000000 |
-| blanchedalmond | #FFEBCD |
-| blue | #0000FF |
-| blueviolet | #8A2BE2 |
-| brown | #A52A2A |
-| burlywood | #DEB887 |
-| cadetblue | #5F9EA0 |
-| chartreuse | #7FFF00 |
-| chocolate | #D2691E |
-| coral | #FF7F50 |
-| cornflowerblue | #6495ED |
-| cornsilk | #FFF8DC |
-| crimson | #DC143C |
-| cyan | #00FFFF |
-| darkblue | #00008B |
-| darkcyan | #008B8B |
-| darkgoldenrod | #B8860B |
-| darkgray | #A9A9A9 |
-| darkgreen | #006400 |
-| darkgrey | #A9A9A9 |
-| darkkhaki | #BDB76B |
-| darkmagenta | #8B008B |
-| darkolivegreen | #556B2F |
-| darkorange | #FF8C00 |
-| darkorchid | #9932CC |
-| darkred | #8B0000 |
-| darksalmon | #E9967A |
-| darkseagreen | #8FBC8F |
-| darkslateblue | #483D8B |
-| darkslategray | #2F4F4F |
-| darkslategrey | #2F4F4F |
-| darkturquoise | #00CED1 |
-| darkviolet | #9400D3 |
-| deeppink | #FF1493 |
-| deepskyblue | #00BFFF |
-| dimgray | #696969 |
-| dimgrey | #696969 |
-| dodgerblue | #1E90FF |
-| firebrick | #B22222 |
-| floralwhite | #FFFAF0 |
-| forestgreen | #228B22 |
-| fuchsia | #FF00FF |
-| gainsboro | #DCDCDC |
-| ghostwhite | #F8F8FF |
-| gold | #FFD700 |
-| goldenrod | #DAA520 |
-| gray | #808080 |
-| green | #008000 |
-| greenyellow | #ADFF2F |
-| grey | #808080 |
-| honeydew | #F0FFF0 |
-| hotpink | #FF69B4 |
-| indianred | #CD5C5C |
-| indigo | #4B0082 |
-| ivory | #FFFFF0 |
-| khaki | #F0E68C |
-| lavender | #E6E6FA |
-| lavenderblush | #FFF0F5 |
-| lawngreen | #7CFC00 |
-| lemonchiffon | #FFFACD |
-| lightblue | #ADD8E6 |
-| lightcoral | #F08080 |
-| lightcyan | #E0FFFF |
-| lightgoldenrodyellow | #FAFAD2 |
-| lightgray | #D3D3D3 |
-| lightgreen | #90EE90 |
-| lightgrey | #D3D3D3 |
-| lightpink | #FFB6C1 |
-| lightsalmon | #FFA07A |
-| lightseagreen | #20B2AA |
-| lightskyblue | #87CEFA |
-| lightslategray | #778899 |
-| lightslategrey | #778899 |
-| lightsteelblue | #B0C4DE |
-| lightyellow | #FFFFE0 |
-| lime | #00FF00 |
-| limegreen | #32CD32 |
-| linen | #FAF0E6 |
-| magenta | #FF00FF |
-| maroon | #800000 |
-| mediumaquamarine | #66CDAA |
-| mediumblue | #0000CD |
-| mediumorchid | #BA55D3 |
-| mediumpurple | #9370DB |
-| mediumseagreen | #3CB371 |
-| mediumslateblue | #7B68EE |
-| mediumspringgreen | #00FA9A |
-| mediumturquoise | #48D1CC |
-| mediumvioletred | #C71585 |
-| midnightblue | #191970 |
-| mintcream | #F5FFFA |
-| mistyrose | #FFE4E1 |
-| moccasin | #FFE4B5 |
-| navajowhite | #FFDEAD |
-| navy | #000080 |
-| oldlace | #FDF5E6 |
-| olive | #808000 |
-| olivedrab | #6B8E23 |
-| orange | #FFA500 |
-| orangered | #FF4500 |
-| orchid | #DA70D6 |
-| palegoldenrod | #EEE8AA |
-| palegreen | #98FB98 |
-| paleturquoise | #AFEEEE |
-| palevioletred | #DB7093 |
-| papayawhip | #FFEFD5 |
-| peachpuff | #FFDAB9 |
-| peru | #CD853F |
-| pink | #FFC0CB |
-| plum | #DDA0DD |
-| powderblue | #B0E0E6 |
-| purple | #800080 |
-| red | #FF0000 |
-| rosybrown | #BC8F8F |
-| royalblue | #4169E1 |
-| saddlebrown | #8B4513 |
-| salmon | #FA8072 |
-| sandybrown | #F4A460 |
-| seagreen | #2E8B57 |
-| seashell | #FFF5EE |
-| sienna | #A0522D |
-| silver | #C0C0C0 |
-| skyblue | #87CEEB |
-| slateblue | #6A5ACD |
-| slategray | #708090 |
-| slategrey | #708090 |
-| snow | #FFFAFA |
-| springgreen | #00FF7F |
-| steelblue | #4682B4 |
-| tan | #D2B48C |
-| teal | #008080 |
-| thistle | #D8BFD8 |
-| tomato | #FF6347 |
-| turquoise | #40E0D0 |
-| violet | #EE82EE |
-| wheat | #F5DEB3 |
-| white | #FFFFFF |
-| whitesmoke | #F5F5F5 |
-| yellow | #FFFF00 |
-| yellowgreen | #9ACD32 |
-
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/common-attrs.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/common-attrs.md b/_draft/v-0.10/references/common-attrs.md
deleted file mode 100644
index 2ed0310..0000000
--- a/_draft/v-0.10/references/common-attrs.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Common Attribute
-type: references
-order: 1.5
-version: 0.10
----
-
-# Common Attribute
-
-Attributes provide additional information about weex tags. All weex tags can have attributes, attributes are always specified in the start tag and usually come in name/value pairs like: name="value". Mustache can be used inside a value.
-All of weex tags have the following attributes：
-
-## id
-
-Specifies a unique id for an element in `<template>` scope. With `id` attribute you can easily refer a weex tag.
-
-```html
-<div id="logo"></div>
-<div id="item-{{index}}"></div>
-```
-
-## style
-
-Specifies an inline style for an element.
-
-```html
-<div style="width: 200; height: 200"></div>
-<div style="padding: {{x}}; margin: 0"></div>
-```
-
-## class
-
-Specifies one or more classnames for an element (refers to a class in a style sheet).
-
-```html
-<div class="button"></div>
-<div class="button {{btnStatus}}"></div>
-```
-
-## repeat
-
-We can use the `repeat` attribute to render a list of items based on an array. The `repeat` attribute has a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an alias for the array element being iterated on.
-
-```html
-<div repeat={{list}}></div>
-<div repeat={{item in list}}></div>
-```
-
-## if
-
-Provide a boolean value to decide whether or not to display current tag.
-
-```html
-<div if="true"></div>
-<div if="{{opened}}"></div>
-<div if="{{direction === 'row'}}"></div>
-```
-
-## append
-
-By providing the value of tree or node, it determines the progress of rendering.
-
-```html
-<div append="tree/node"></div>
-```
-
-## Event Handing (on...)
-
-Register event handlers on weex tag.
-
-```html
-<div onclick="openDetail"></div>
-<div onappear="{{loadMore}}"></div>
-```
-
-## Notes!
-
-Weex is basically following [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) naming rule, so please **do not use CamelCase** in your attribute, **kebab-case** with "-" as delimiter is much better.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/common-event.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/common-event.md b/_draft/v-0.10/references/common-event.md
deleted file mode 100644
index c8e0836..0000000
--- a/_draft/v-0.10/references/common-event.md
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: Common Events
-type: references
-order: 1.9
-version: 0.10
----
-
-# Common Events
-
-Weex provide the ability to let events trigger action, like starting a JavaScript when a user click on a component. Bellow are the common event attributes that can be added to weex components to define event actions.
-
-## Click event
-
-The onclick attribute fires on a click gesture on the element.
-**Notes: ** The `input` and `switch` component does not currently support the `click` event, please use `change` or `input` event instead.
-
-### event object
-
-- `type` : `click`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-
-**Example:**
-
-```html
-<template>
- <text style="font-size: 60px" onclick="{{update}}">I am {{name}}</text>
-</template>
-
-<script>
- module.exports = {
- data: {
- name: 'Tom'
- },
- methods: {
- update: function () {
- this.name = this.name === 'Tom' ? 'Jerry' : 'Tom'
- }
- }
- }
-</script>
-```
-
-
-## Longpress event
-
-If a `longpress` event is bound to a component, the event will be triggered when user long press on it.
-**Notes: ** The `input` and `switch` component does not currently support the `click` event, please use `change` or `input` event instead.
-
-### event object
-
-- `type` : `longpress`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-
-**Example:**
-
-```html
-<template>
- <div style="width: 400px; height: 200px; background-color: {{bg}};
- justify-content: center; align-items: center;" onlongpress="{{update}}">
- <text style="font-size: 60px">Press me</text>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- bg: '#FF0000'
- },
- methods: {
- update: function () {
- this.bg = this.bg === '#FF0000' ? '#00FF00' : '#FF0000'
- }
- }
- }
-</script>
-```
-
-## Appear event
-
-If a appear event is bound to a component inside a scrollable container, the event will be triggered when the component comes to be visible.
-
-### event object
-
-- `type` : `appear`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-- `direction` : The direction in which the scroller is scrolling. Could be `up` or `down`.
-
-[example](http://dotwe.org/3fa162a65fbf0c7e2655fbc1bebbfc38)
-
-## Disappear event
-
-If a `disappear` event is bound to a component inside a scrollable container, the event will be triggered when the component scrolls out of viewport and disappears from your sight.
-
-### event object
-
-- `type` : `disappear`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-- `direction` : The direction in which the scroller is scrolling. Could be `up` or `down`.
-
-[example](http://dotwe.org/3fa162a65fbf0c7e2655fbc1bebbfc38)
-
-## Page event
-
-Weex provides you with simple management of page status, such as `viewappear` and `viewdisappear`.
-The `viewappear` event will be triggered when page is about to show or before any animations are configured for showing. For example, when calling `push` method in `navigator` module, this event will be trigged in new page.
-The `viewdisappear` event will be triggeded when page is about to dismiss.
-Different from `appear` and `disappear` of component, these two events focus on the status of whole page, so **they must be bound to the root component**.
-In addititon, these events also can be bound to body component which is not root actually such as `wxc-navpage`.
-
-### event object
-
-- `type` : `viewappear` or `viewdisappear`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-
-[example](http://dotwe.org/3fa162a65fbf0c7e2655fbc1bebbfc38)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/common-style.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/common-style.md b/_draft/v-0.10/references/common-style.md
deleted file mode 100644
index 8ae8224..0000000
--- a/_draft/v-0.10/references/common-style.md
+++ /dev/null
@@ -1,208 +0,0 @@
----
-title: Common Style
-type: references
-order: 1.6
-version: 0.10
----
-
-# Common Style
-
-All of weex tags share some common style rules
-
-## Box Model
-
-
-
-Weex box model based on the CSS box model, all of weex elements can be considered as boxes. The term "box model" is used when talking about design and layout. The box model is essentially a box that wraps around every HTML element. It consists of margins, borders, paddings, and the actual content.
-
-you can use the definition below in weex box model.
-
-- `width`: `length` type, default value `0`
-- `height`: `length` type, default value `0`
-- `padding`: `length` type, default value `0`, (space around content, between element content and the element border)
- - `padding-left`: `length` type, default value `0`
- - `padding-right`: `length` type, default value `0`
- - `padding-top`: `length` type, default value `0`
- - `padding-bottom`: `length` type, default value `0`
-- `margin`: `length` type, default value `0`, (space around elements, outside the border)
- - `margin-left`: `length` type, default value `0`
- - `margin-right`: `length` type, default value `0`
- - `margin-top`: `length` type, default value `0`
- - `margin-bottom`: `length` type, default value `0`
-- `border`
- - `border-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-left-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-top-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-right-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-bottom-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-width`: `length` type, non-negative, default value `0`
- **DO NOT** use `border-width:1`. There is a default viewport `<viewport width="750">`, if the actual width of a device is 720px, then `border-width:1` will be `border-width:0.96`. As weex **do not** support sub-pixel, this border would not be rendered.
- - `border-left-width`: `length` type, non-negative, default value `0`
- - `border-top-width`: `length` type, non-negative, default value `0`
- - `border-right-width`: `length` type, non-negative, default value `0`
- - `border-bottom-width`: `length` type, non-negative, default value `0`
- - `border-color`: `color` type, default value `#000000`
- - `border-left-color`: `color` type, default value `#000000`
- - `border-top-color`: `color` type, default value `#000000`
- - `border-right-color`: `color` type, default value `#000000`
- - `border-bottom-color`: `color` type, default value `#000000`
- - `border-radius`: `length` type, default value `0`, (rounded borders to elements , default value is 0 meaning right angle )
-
- Although the the default overflow style is `overflow:hidden` in android, a view will not be clipped by its parents' `border-radius`. This only happens on Android, it works fine on iOS.
- - `border-bottom-left-radius`: `length` type, non-negative, default value `0`
- - `border-bottom-right-radius`: `length` type, non-negative, default value `0`
- - `border-top-left-radius`: `length` type, non-negative, default value `0`
- - `border-top-right-radius`: `length` type, non-negative, default value `0`
-
-Notes: The rule of border-radius for a specific corner such as `border-top-left-radius` is not currently supported for component `<image>` and `<text>`.
-
-Weex box model uses `border-box` as the default value of `box-sizing`, meaning the width and height properties includes content, padding and border, but not the margin.
-
-example:
-
-```html
-<template>
- <div>
- <image src="..." style="width: 400; height: 200; margin-left: 20;"></image>
- </div>
-</template>
-```
-
-## Flexbox
-
-Weex box style model based on the CSS flexbox, ensures that elements behave predictably and the page layout can accommodates to different screen sizes and different display devices.
-
-Flexbox consists of flex containers and flex items. If a weex element can containing other elements, it is a flex container.
-
-Notice that the old version of flexbox specification has differences with the new ones, such as whether or not to support wrapping. This is described at w3c's working drafts, and you should notice the differences among them. Also notice that the old version is only supported below the 4.4 version of android.
-
-### Flex container
-
-Flexbox is the default and only style model in Weex, so you don't have to add `display: flex;` in a container.
-
-- `flex-direction`: values `row` | `column`, default value `column`
-
-The flex-direction property specifies the direction of the flexible items inside the flex container. Default value is `column` (top-to-bottom).
-
-- `justify-content`: values `flex-start` | `flex-end` | `center` | `space-between`, default value `flex-start`
-
-The justify-content property horizontally aligns the flexible container's items when the items do not use all available space on the main-axis. Default value is `flex-start` meaning the flex items are positioned at the beginning of the container. `flex-end` means the items are positioned at the end of the container. `center` means the items are positioned at the center of the container. `space-between` means the items are positioned with space between the lines.
-
-
-
-- `align-items`: values `stretch` | `flex-start` | `center` | `flex-end`, default value `stretch`
-
-The align-items property vertically aligns the flexible container's items when the items do not use all available space on the cross-axis. Default value is `stretch` meaning the items are stretched to fit the container. `flex-start` means the items are positioned at the top of the container; `flex-end` means the items are positioned at the bottom of the container; `center` means items are positioned at the center of the container (vertically).
-
-
-
-### Flex item
-
-- `flex`: `number` type, default value `0`
-
-the flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container. If all of the flex items set `flex: 1`, they will have equal width or height on direction of flex container's `flex-direction`. If there are two flex items, with one setting `flex: 1`, and the other setting `flex: 2`, the first one will take 1/3 container space, and the second one will take 2/3 container space. If all of flex items don't set `flex`, they will be aligned depending on the container's `justify-content` property.
-
-
-## Examples
-
-a list of images with equal scales align at the vertical axis:
-
-```html
-<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>
-```
-
-a image with fixed width aligns with a stretched text:
-
-```html
-<template>
- <div style="width: 300; height: 100;">
- <image src="..." style="width: 100; height: 100;"></image>
- <text style="flex: 1;">...</text>
- </div>
-</template>
-```
-
-mixed direction alignment:
-
-```html
-<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>
-```
-
-one text align left , the other float right:
-
-
-
-```html
-<template>
-<div style="flex-direction: row; justify-content: space-between;">
- <text>WEEX</text>
- <text>2016-05-08</text>
-</div>
-</template>
-```
-
-## Position
-
-we can use properties below to control placement of weex tag
-
-- `position`: values `relative` | `absolute` | `fixed` | `sticky`, default value `relative`
-
-`relative` means the item is positioned relative to its normal position. `absolute` means the item is positioned relative to its container. `fixed` keeps the elements position fixed when the page is scrolling. `sticky` keeps elements positioned inside the viewport as "stuck" at the top or "relative" at its original place depending on whether does it about to scroll out of the view.
-
-- `top`: `number` type, default value `0`, upward offset value
-- `bottom`: `number` type, default value `0`, downward offset value
-- `left`: `number` type, default value `0`, leftward offset value
-- `right`: `number` type, default value `0`, rightward offset value
-
-### Examples
-
-```html
-<template>
- <div style="flex-direction: column;">
- <div style="height: 3000;">
- <image src="..." style="top: 50; left: 50; ..."></image>
- </div>
- <div style="height: 3000;">
- <image src="..." style="position: sticky; ..."></image>
- </div>
- <div style="height: 3000;">
- <image src="..." style="position: absolute; top: 50; left: 50; ..."></image>
- </div>
- </div>
-</template>
-```
-
-## Other Common Style
-
-- `opacity`
-- `background-color`
-
-## Type of Style Value
-
-- `length` type
-- `number` type
-- `color` type (*[The list of color keywords.](./color-names.html)*)
-- enumerated type
-
-## Simple Step
-
-These up-to-down steps may help you to plan the whole style of weex pages.
-
-1. overall style: divide the whole page to different parts
-2. flex alignment: align boxes in every part of page
-3. position box: place box, set offset
-4. element specific style: set styles for certain element if needed
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/component-defs.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/component-defs.md b/_draft/v-0.10/references/component-defs.md
deleted file mode 100644
index baa6584..0000000
--- a/_draft/v-0.10/references/component-defs.md
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: Component Definition
-type: references
-order: 1.2
-version: 0.10
----
-
-# Component Definition
-
-A component definition is a set of options to describe a component. It's always assigned to `module.exports` in `<script>`.
-
-```javascript
-module.exports = {
- // a set of options here
-}
-```
-
-## Data & Methods options
-
-```javascript
-module.exports = {
- data: function () {
- return {x: 1, y: 2}
- },
- methods: {
- doThis: function () {...},
- doThat: function () {...}
- },
- ...
-}
-```
-
-The `data` option is a function that return a observable data object for this ViewModel.
-The `methods` option is a map which contains all ViewModel methods.
-
-Each `data` or `methods` property will be proxied to the ViewModel instance. So you can read and write data with `this.x`, also you can call methods with `this.doThis(...)`.
-
-A whole example:
-
-```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>
-```
-
-## Events options
-
-```javascript
-module.exports = {
- data: ...,
- methods: {
- foo: function () {
- ...
- this.$emit('customtype1', data)
- }
- },
- events: {
- customtype1: function (e) {
- console.log(e.type, e.detail)
- }
- },
- ...
-}
-```
-
-The `events` options could allow you to add custom event listeners when ViewModel created. Then it will listen these type of events and handle them by the function-type value.
-
-The first argument is a event object which contains event data in `e.detail`.
-
-## Lifecycle options
-
-```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 ViewModel now supports these lifecycle hook functions which could be write as component options:
-
-* `init`: fired at the beginning of a ViewModel constructor call.
-* `created`: fired when ViewModel observes default data but not compile the template.
-* `ready`: fired when ViewModel observes default data and compiles the template to generate virtual DOM finally.
-
-**Note: If you want to use the function in `methods`, `events` or lifecycle options as a parameter, please make sure the context is correct as expect. For example:**
-
-```javascript
-module.exports = {
- data: function () {
- return {x: 1, y: 2}
- },
- ready: function () {
- // `undefined`
- // because the context changed
- this.foo(this.bar)
- // `1`
- // because the context bound correct
- 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/12e3a8bc/_draft/v-0.10/references/components/a.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/a.md b/_draft/v-0.10/references/components/a.md
deleted file mode 100644
index e1677bf..0000000
--- a/_draft/v-0.10/references/components/a.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: <a>
-type: references
-order: 2.1
-version: 0.10
----
-
-# <a>
-
-`a` defines a hyperlink to a page in the web. Its purpose and syntax is very similar to [<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) in HTML5.
-
-## Child Components
-
-This type of component supports all kinds of weex component as it's child components except for its own kind.
-
-## Attributes
-
-* href: href attributes defines the URL of the hyperlink.
-
-## Styles:
-
-### common styles
-
-Check out the [common styles](../common-style.html)
-
-## Events
-
-### common events
-
-Check out the [common events](../common-event.html)
-
-### Notes
-
-We can't guarantee the order of execution between onclick function and href. we recommend that do not use the click event in `a`.
-
-## Examples
-
-```html
-<template>
- <div>
- <a href="http://h5.m.taobao.com">
- <text>Click me to see how 'A' element opens a new world.</text>
- </a>
- </div>
-</template>
-```
-
-[Try it](http://dotwe.org/d99f6eb55aa501c836a195ec824cada0)
-
-Use [Weex Playground](https://alibaba.github.io/weex/download.html) App to Scan the QR image and view the example for 'a'.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/components/cell.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/cell.md b/_draft/v-0.10/references/components/cell.md
deleted file mode 100644
index 34d1703..0000000
--- a/_draft/v-0.10/references/components/cell.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: <cell>
-type: references
-order: 2.6
-version: 0.10
----
-
-# <cell>
-
-### Summary
-
-This component must be used as a subcomponent of a [`list`](./list.html) component, which is for the performance optimizing during scrolling.
-
-### Child Components
-
-This type of component supports all kinds of weex component as its child components.
-
-### Attributes
-
-There is no specific attribute for this component other than the [common attributes](../common-attrs.html).
-
-**Notes:** you can't give `<cell>` a `flex` value. Width of `<cell>` is equal to the width of its parent component `<list>`, and you don't need to specify its height.
-
-### Styles
-
-**common styles**: check out the [common styles](../common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `click` event. Check out [common events](../common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../common-event.html)
-
-### Example
-
-please refer to [List](./list.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/components/div.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/div.md b/_draft/v-0.10/references/components/div.md
deleted file mode 100644
index 1e75523..0000000
--- a/_draft/v-0.10/references/components/div.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: <div>
-type: references
-order: 2.2
-version: 0.10
----
-
-# <div>
-
-### Summary
-
-The most fundamental component which is a contianer to wrap any other components. It supports all the common styles, attributes and layout of flexbox.
-
-alias: `<container>` (deprecated)
-
-### Child Components
-
-This type of component supports all kinds of weex component as its child components including its own kind.
-
-### Attributes
-
-There is no specific attribute for this component other than the [common attributes](../common-attrs.html).
-
-### Styles
-
-**common styles**: check out the [common styles](../common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `click` event. Check out [common events](../common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../common-event.html)
-
-### Examples
-
-```html
-<div>
- <image src="..."></image>
- <text>...</text>
-</div>
-```
-
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/components/image.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/image.md b/_draft/v-0.10/references/components/image.md
deleted file mode 100644
index 3eae206..0000000
--- a/_draft/v-0.10/references/components/image.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: <image>
-type: references
-order: 2.3
-version: 0.10
----
-
-# <image>
-
-### Summary
-
-`image` tag is used to render a specified picture, and it shouldn't contain any child component. You can use `img` as alias.
-
-**Notes:** the styles of `width` and `height` should be specified, otherwise it won't work.
-
-alias: `<img>`
-
-### Child Components
-
-This component supports no child components.
-
-### Attributes
-
-- `src`: <string> image source url
-- `resize`: <span class="api-version">v0.5+</span> <string> the 'ScaleType' of the component. The default value is ``stretch``, if this attribute is not specified. Possible values are ``cover``, ``contain``, each of which has the same meaning with w3c standard.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-### Styles
-
-- `width`: <length> the width of the component. This style should be specified.
-- `height`: <length> the height of the component. This style should be specifed.
-
-**common styles**: check out the [common styles](../common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `click` event. Check out [common events](../common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../common-event.html)
-
-### Examples
-
-```html
-<div>
- <image src="..." ></image>
- <text>...</text>
-</div>
-```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/components/index.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/index.md b/_draft/v-0.10/references/components/index.md
deleted file mode 100644
index 66e211c..0000000
--- a/_draft/v-0.10/references/components/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Build-in Components
-type: references
-order: 2
-version: 0.10
----
-
-# Build-in Components
-
-- [<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/12e3a8bc/_draft/v-0.10/references/components/indicator.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/indicator.md b/_draft/v-0.10/references/components/indicator.md
deleted file mode 100644
index b06dc95..0000000
--- a/_draft/v-0.10/references/components/indicator.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: <indicator>
-type: references
-order: 2.10
-version: 0.10
----
-
-# <indicator>
-
-### Summary
-
-This component must be used as a subcomponent of a [`slider`](./slider.html) component.
-
-### Child Components
-
-This component supports no child components.
-
-### Attributes
-
-There is no specific attribute for this component other than the [common attributes](../common-attrs.html).
-
-### Styles
-
-- `item-color`: <colors> This style attribute sets the normal item color using either a named color or a color specified in the hexadecimal #RRGGBB format.
-- `item-selectedColor`: <colors> This style attribute sets the selected item color using either a named color or a color specified in the hexadecimal #RRGGBB format.
-- `item-size`: <length> The size of the indicator elements, which is an float attribute.
-
-**common styles**: check out the [common styles](../common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-
-**Note:** There are some specific details about the style `width` and `height` on this component: the position of indicator will not only depend on the `top`, `left`, `bottom` and `right`, but also depend on the value of `width` and `height`. Imagine there is a virtual container outside the indicator, and it inherit the `width` and `height` of the indicator. The `top`, `left`, `right` and `bottom` will always take effect on this container, not the indicator points themselves, and the indicator points will be positioned in the center of it. And also you should know the default `width` and `height` is the parent slider's `width` and `height`.
-
-**Note:** `background-color` is not recommended to apply on this component, and you should use `item-color` and `item-selectedColor` instead.
-
-### Events
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `click` event. Check out [common events](../common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../common-event.html)
-
-### Example
-
-```html
-<template>
- <div>
- <slider class="slider">
- <div class="slider-pages" repeat="{{itemList}}">
- <image class="img" src="{{pictureUrl}}"></image>
- <text class="title">{{title}}</text>
- </div>
-
- <indicator class="indicator"></indicator>
- </slider>
- </div>
-</template>
-
-<style>
- .img {width: 150; height: 150;}
- .title {flex: 1; 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://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/components/input.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/input.md b/_draft/v-0.10/references/components/input.md
deleted file mode 100644
index feaac53..0000000
--- a/_draft/v-0.10/references/components/input.md
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: <input>
-type: references
-order: 2.4
-version: 0.10
----
-
-# input
-
-The weex builtin component `input` is used to create input controls to receive the user's input characters. How a `input` component works varies considerably depending on the value of its `type` attribute, such as `text`, `password`, `url`, `email`, `tel` etc.
-
-**Notes:** does not support the common-event `click`. Please listen to the `input` or `change` event instead.
-
-## Child Components
-
-This component supports no child components.
-
-## Attributes
-
-* `type`: the type of controls to display. The default value is `text`, if this attribute is not specified. Possible values are `text`, `password`, `tel`, `email`, `url` etc. each of which has the same meaning with W3C standard.
-
-* `value`: the value(text) of the control.
-
-* `placeholder`: a hint to the user of which can be entered to the control. The placeholder text must have no carriage returns or line-feeds.
-
-* `disabled`: a boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls.
-
-* `autofocus`: a boolean attribute lets you specify that a form control should have input focus when the page loads.
-
-* `maxlength`: <span class="api-version">v0.7+</span> a number value to specify maxlength of input.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-
-* placeholder-color: the color of placeholder. Default value is '#999999'.
-
-* text styles: checkout [text styles](../text-style.html)
-
- * support 'color' style.
- * support 'font-size' style.
- * support 'font-style' style.
- * support 'font-weight' style.
- * support 'text-align' style.
-
-### common styles
-check out [common styles for components](../common-style.html)
-
-* support flexbox related styles.
-* support box model related styles.
-* support 'position' related styles.
-* support 'opacity', 'background-color' etc.
-
-## Events
-
-* input: the value of an input character changes.
-* change: the change event is fired when a change to the component's value is commited by the user. It always come after a 'blur' event.
-* focus: a component has received focus.
-* blur: a component has lost focus.
-
-### common events
-check out [common events](../common-event.html)
-
-* support 'appear' / 'disappear' event.
-
-### Notes
-does not support the common-event 'click'. Please listen to the 'input' or 'change' event instead.
-
-### Parameters of events' object
-
-* for 'input' and 'change' events:'value': the value of the component who dispatched this event.'timestamp': the time stamp of the event.
-* for 'focus' and 'blur' events:'timestamp': the time stamp of the event.
-
-## Example
-
-```html
-<template>
- <div>
- <input
- type="text"
- placeholder="Input Something"
- class="input"
- autofocus="true"
- value=""
- onchange="onchange"
- oninput="oninput"
- />
- <text>oninput: {{txtInput}}</text>
- <text>onchange: {{txtChange}}</text>
- </div>
-</template>
-
-<style>
- .input {
- font-size: 60;
- height: 80;
- width: 400;
- }
-</style>
-
-<script>
- require('weex-components');
- module.exports = {
- data: {
- txtInput: '',
- txtChange: ''
- },
- methods: {
- onchange: function(event) {
- this.txtChange = event.value;
- console.log('onchange', event.value);
- },
- oninput: function(event) {
- this.txtInput = event.value;
- console.log('oninput', event.value);
- }
- }
- };
-</script>
-```
-
-[Try it](http://dotwe.org/e1b18eb89facb4e2a5467ee4bebd9be6)
-
-Use [Weex Playground](https://alibaba.github.io/weex/download.html) App to Scan the QR image and view the example for 'input'.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/components/list.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/list.md b/_draft/v-0.10/references/components/list.md
deleted file mode 100644
index 3b4745e..0000000
--- a/_draft/v-0.10/references/components/list.md
+++ /dev/null
@@ -1,292 +0,0 @@
----
-title: <list>
-type: references
-order: 2.5
-version: 0.10
----
-
-# List
-
-<span class="weex-version">v0.6.1+</span>
-
-The List component, which inherits from Scroller component, is a core component, and it provides the most popular features for using a list of items.
-
-It can provide excellent experience and performance while still maintaining smooth scroll and low memory usage.
-
-**example**
-
-```html
-<template>
- <list>
- <cell onappear="onappear($event, $index)" ondisappear="ondisappear($event, $index)" class="row" repeat="{{staffs}}" index="{{$index}}">
- <div class="item">
- <text>{{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;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- 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:{
- onappear: function (e, index) {
- console.log('+++++', index)
- console.log(this.staffs[index].name + ' is appearing...');
- },
- ondisappear:function (e, index) {
- console.log('+++++', index)
- }
- }
- }
-</script>
-
-```
-
-[try it](http://dotwe.org/15d58cfbca9b6a72c89c9a13ad1f6155)
-
-### Child Components
-
-Notes: The list now supports the following child components: cell, header, refresh, loading and fixed-position components. Other kinds of components will not be guaranteed to be displayed correctly.
-
-* cell 0.6.1 defines the attributes and behavior of the cells that appear in list.
-* header 0.6.1 sticks to the top when it reaches the top of the screen.
-* refresh 0.6.1 used inside list to add pull-down-to-refresh functionality.
-* loading 0.6.1 used inside list to add pull-up-to-load-more functionality.
-
-
-### Attributes
-
-* show-scrollbar: true/false whether show the scroll bar or not, default value is true
-* scroll-direction: <string> define scroll direction of component, horizontal or vertical
-* loadmoreoffset : <number> default value is 0. The loadmore event will be triggered when the list is loadmoreoffset left to reach the bottom of the list view. e.g. a list has total content length of 1000, and the loadmoreoffset is set to 400, the loadmore event will be triggered when 600 has beed scrolled and there is less than 400 left.
-* loadmoreretry : <number> default value 0，whether to reset loadmore related UI when loadmore failed, will be deprecated in further release.
-
-Please checkout [Scroller Component Attributes](./scroller.html) to have a look at the inherited attributes from direct parent.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-### Styles
-
-common styles: check out [common styles for components](../common-style.html)
-
-* support flexbox related styles
-* support box model related styles
-* support position related styles
-* support opacity, background-color etc.
-
-### Events
-
-onloadmore 0.5 used with loadmoreoffset attribute. if the view has less than loadmoreoffset to scroll down, the onloadmore event will be triggered.
-
-common events: check out the [common events](../common-event.html)
-
-* support onclick event. Check out [common events](../common-event.html)
-* support onappear / ondisappear event. Check out [common events](../common-event.html)
-
-
-### API
-
-All cells or cell's subcomponents in list support the scrollToElement API in [dom module](../modules/dom.html)
-
-#### Difference between loading child component and onloadmore event
-
-loading is a child component that can response to the onloading event, and this event can only be triggered when the scroller/list has been scrolled down to the bottom.
-onloadmore is an event that will be triggered when the rest of the scroller/list is less than loadmoreoffset long.
-
-
-* [scroller example](http://dotwe.org/85fd3988eefa24f058b7da7966e56203)
-* [list example](http://dotwe.org/62f895249014dde26cc0725c8005e42c)
-
-### Restrictions
-
-Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions.
-For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal.
-
-### Example
-
-```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>
-```
-
-[Try it](http://dotwe.org/ed524ade679b0fa96e980600c53ea5ce)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/components/refresh-loading.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/refresh-loading.md b/_draft/v-0.10/references/components/refresh-loading.md
deleted file mode 100644
index 8b1d610..0000000
--- a/_draft/v-0.10/references/components/refresh-loading.md
+++ /dev/null
@@ -1,297 +0,0 @@
----
-title: <refresh> & <loading>
-type: references
-order: 2.7
-version: 0.10
----
-
-# refresh & loading
-
-<span class="weex-version">v0.6.1+</span>
-
-## Loading Components
-
-To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
-
-
-**example**
-
-```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 onappear="onappear($event, $index)" ondisappear="ondisappear($event, $index)" class="row" repeat="{{staffs}}" index="{{$index}}">
- <div class="item">
- <text>{{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:{
- onappear: function (e, index) {
- // console.log('+++++', index);
- // console.log(this.staffs[index].name + ' is appearing...');
- },
- ondisappear:function (e, index) {
- // console.log('+++++', index);
- },
- onloading:function(e){
- console.log('onloading...');
- this.staffs.push({name:'onloading'})
- }
- }
- }
-</script>
-
-```
-
-[try it](http://weex.alibaba-inc.com/raw/html5/a34523fee395aa68018d65f0fb622310.js)
-
-### Child Components
-
-Any other components, like the text and img components, can be put inside the refresh component. And there is a special component named loading-indicator used only inside the refresh or the loading components.
-
-* loading-indicator is a child component implemented with default animation effect for the refresh component.
-[example](http://weex.alibaba-inc.com/playground/a34523fee395aa68018d65f0fb622310)
-
-### Attributes
-
-* display has value of show or hide.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-
-### Styles
-common styles: check out [common styles for components](../common-style.html)
-
-### Events
-
-* onloading triggered when loading
-
-
-#### Restrictions
-* refresh/loading does not support remove action, Weex 0.9 will fix it.
-* refresh/loading despite setting with display='hide', the refresh/loading view will still appear when scrolling due to known issues. it can be fixed with a another display='hide' when the refresh/loading should be hidden.
-* refresh/loading can only be hidden or displayed with an attribute display with value of show or hide. And there should be a statement of display='hide' when display='show' shows up in an event function, or your scroller may not response to user inputs.
-
-## Refresh Components
-
-To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
-
-```html
-<template>
- <scroller onloadmore="onloadmore" loadmoreoffset="1000">
- <refresh onrefresh="onrefresh" display="{{refreshDisplay}}">
- <text id="refreshText">{{refreshText}}</text>
- </refresh>
- <div repeat="{{v in items}}">
- <text style="font-size: 40; color: #000000">{{v.item}}</text>
- </div>
- <loading onloading="onloading" display="{{loadingDisplay}}">
- <text id="loadingText">{{loadingText}}</text>
- </loading>
- </scroller>
-</template>
-<script>
- module.exports = {
- data: {
- refreshDisplay: 'show',
- loadingDisplay: 'show',
- loadingText: 'pull up to load more',
- refreshText: 'pull down to refresh',
- items: []
- },
- created: function () {
- for (var i = 0; i < 30; i++) {
- this.items.push({'item': 'test data' + i});
- }
- },
- methods: {
- onrefresh: function () {
- var vm = this;
- vm.refreshDisplay = 'show'
- if (vm.items.length > 50) {
- vm.refreshText = "no more data!"
- vm.refreshDisplay = 'hide'
- return;
- }
- var len = vm.items.length;
- for (var i = len; i < (len + 20); i++) {
- vm.items.unshift({'item': 'test data ' + i});
- }
- vm.refreshDisplay = 'hide'
- },
- onloading: function () {
- var vm = this;
- vm.loadingDisplay = 'show'
- if (vm.items.length > 30) {
- vm.loadingText = "no more data!"
- vm.loadingDisplay = 'hide'
- return;
- }
-
- var len = vm.items.length;
- for (var i = len; i < (len + 20); i++) {
- vm.items.push({'item': 'test data ' + i});
- }
- vm.loadingDisplay = 'hide'
- },
- onloadmore:function(){
- console.log("into--[onloadmore]")
- }
- }
- }
-</script>
-```
-
-[try it](http://dotwe.org/242add915e41d307f2fa6f423278425a)
-
-### Child Components
-
-Any other components, like the text and img components, can be put inside the refresh component. And there is a special component named loading-indicator used only inside the refresh or the loading components.
-
-* loading-indicator is a child component implemented with default animation effect for the refresh component.
-[example](http://dotwe.org/e65a2cb0abfcdbbabda6778064837a92)
-
-### Attributes
-* display has value of show or hide, default value is show.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-
-### Styles
-common styles: check out [common styles for components](../common-style.html)
-
-### Events
-* onrefresh triggered when the scroller has been pulled down
-* onpullingdown available on Android. triggered when the scroller has been pulled down. you can get dy, headerHeight, maxHeight from onpullingdowns event object. [example](http://dotwe.org/10ee6bd59ebe173f0f578a4eb8bac6f1)
-
-**example**
-
-```html
-<template>
- <list>
- <header>
- <div class="center">
- <text style="text-align:center">I am the header</text>
- </div>
- </header>
- <refresh onpullingdown='onpullingdown' onrefresh="onrefresh" display="{{refreshDisplay}}" style="width:750;flex-direction: row;justify-content: center;">
- <loading-indicator style="height:160;width:160;color:#3192e1"></loading-indicator>
- </refresh>
- <cell onappear="onappear" ondisappear="ondisappear" class="row" repeat="{{staffs}}" index="{{$index}}">
- <div class="item">
- <text>{{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:[],
- refreshDisplay: 'show',
- 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:{
- onappear: function (e) {
- var index = e.target.attr.index
- // console.log(this.staffs[index].name + ' is appearing...');
- },
- ondisappear:function (e) {
- },
- onrefresh:function(e){
- this.refreshDisplay='show';
- // this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'}];
- this.refreshDisplay='hide'
- // console.log(this.refreshDisplay);
- },
- onpullingdown:function(e){
- console.log('onpullingdown triggered.');
- console.log('dy:'+e.dy);
- console.log('headerHeight:'+e.headerHeight);
- console.log('maxHeight:'+e.maxHeight);
- }
- }
- }
-</script>
-
-```
-
-[try it ](http://dotwe.org/10ee6bd59ebe173f0f578a4eb8bac6f1)
-
-
-### Restrictions
-
-* refresh/loading does not support remove action, may support in Weex 0.9.
-* refresh/loading despite setting with display='hide', the refresh/loading view will still appear when scrolling due to known issues. it can be fixed with a another display='hide' when the refresh/loading should be hidden.
-* refresh/loading can only be hidden or displayed with an attribute display with value of show or hide. And there should be a statement of display='hide' when display='show' shows up in an event function, or your scroller may not response to user inputs.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/components/scroller.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/scroller.md b/_draft/v-0.10/references/components/scroller.md
deleted file mode 100644
index 3197ab8..0000000
--- a/_draft/v-0.10/references/components/scroller.md
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: <scroller>
-type: references
-order: 2.8
-version: 0.10
----
-
-# <scroller>
-<span class="weex-version">v0.6.1+</span>
-
-A scroller is a component in vertical direction which can have multiple child components in one column. If total height of its child components exceed the height of the scroller, the whole child components will be scrollable.
-
-Notes: A <scroller> can be used as a root element or a embed element. The scroll direction of this component is column, and it can't be changed.
-
-
-**example**
-
-```html
-<template>
- <scroller onloadmore="onloadmore" loadmoreoffset="100">
- <div repeat="{{v in items}}">
- <text style="font-size: 40; color: #000000">{{v.item}}</text>
- </div>
- </scroller>
-</template>
-<script>
- module.exports = {
- data: {
- items: [],
- triggered:false
- },
- created: function () {
- for (var i = 0; i < 50; i++) {
- this.items.push({'item': 'test data' + i});
- }
- },
- methods: {
- onloadmore:function(){
- if(!this.triggered){
- for (var i = 100; i >= 50; i--) {
- this.items.push({'item':'onloadmore triggered' + i});
- }
- }
- this.triggered=true;
- }
- }
- }
-</script>
-```
-
-[try it](http://dotwe.org/acf155122b9457211165680b01fae1c2)
-
-## Child Components
-
-Scroller supports all kinds of components, such as div, text, etc.
-And there are two special components that can only be used inside scroller component.
-
-* refresh 0.6.1 used inside list to add pull-down-to-refresh functionality.
-* loading 0.6.1 used inside list to add pull-up-to-load-more functionality.
-
-
-## Attributes
-
-* show-scrollbar: true/false whether show the scroll bar or not, default value is true
-* scroll-direction: <string> define scroll direction of component, horizontal or vertical
-* loadmoreoffset : <number> default value is 0. The loadmore event will be triggered when the list is loadmoreoffset left to reach the bottom of the list view. e.g. a list has total content length of 1000, and the loadmoreoffset is set to 400, the loadmore event will be triggered when 600 has beed scrolled and there is less than 400 left.
-* loadmoreretry : <number> default value 0，whether to reset loadmore related UI when loadmore failed, will be deprecated in further release.
-
-**example**
-
-```html
-<template>
- <scroller onloadmore="onloadmore" loadmoreoffset="100">
- <div repeat="{{v in items}}">
- <text style="font-size: 40; color: #000000">{{v.item}}</text>
- </div>
- </scroller>
-</template>
-<script>
-module.exports = {
- data: {
- items: [],
- triggered:false
- },
- created: function () {
- for (var i = 0; i < 50; i++) {
- this.items.push({'item': 'test data' + i});
- }
- },
- methods: {
- onloadmore:function(){
- if(!this.triggered){
- for (var i = 100; i >= 50; i--) {
- this.items.push({'item':'onloadmore triggered' + i});
- }
- }
- this.triggered=true;
- }
- }
-}
-</script>
-```
-
-[try it](http://dotwe.org/acf155122b9457211165680b01fae1c2)
-
-
-Please checkout [Scroller Component Attributes]() to have a look at the inherited attributes from direct parent.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-
-common styles: check out [common styles for components](../common-style.html)
-
-* support flexbox related styles
-* support box model related styles
-* support position related styles
-* support opacity, background-color etc.
-
-
-## Events
-
-onloadmore used with loadmoreoffset attribute. if the view has less than loadmoreoffset to scroll down, the onloadmore event will be triggered.
-
-common events: check out the [common events](../common-event.html)
-
-* support onclick event. Check out [common events](../common-event.html)
-* support onappear / ondisappear event. Check out [common events](../common-event.html)
-
-
-
-## Restrictions
-
-Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions.
-For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal.
-
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/components/slider.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/slider.md b/_draft/v-0.10/references/components/slider.md
deleted file mode 100644
index b1a537f..0000000
--- a/_draft/v-0.10/references/components/slider.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: <slider>
-type: references
-order: 2.9
-version: 0.10
----
-
-# <slider>
-
-## Summary
-
-A slide's player to show slides (mostly as pictures) one page by another. The default interval between two slides is 3 seconds.
-
-## Child Components
-
-It supports all kinds of weex components as its slides, especially the `indicator` component which can be used only as a child component of `slider`.
-
-## Attributes
-
-- `auto-play`: <boolean> `true` | `false`. This value determines whether the slides plays automatically after the page rendering finished. The default value is `false`.
-- `interval`: <number> millisecond. This value determines time interval for each page displayed in slider.
-- `index`: <number> . This value determines the index of current shown slide. The default value is `0`.
-
-Other attributes please check out the [common attributes](../references/common-attrs.html).
-
-## Styles
-
-**common styles**: check out [common styles for components](../references/common-style.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-## Events
-
-- `change`: triggerd when the slide's index is changed. The event object contains the attribute of `index`, which is the index number of the currently shown slide.
-
-**common events**: check out the [common events](../references/common-event.html)
-
-- support `click` event. Check out [common events](../references/common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../references/common-event.html)
-
-### Example
-
-```html
-<template>
- <div>
- <slider class="slider" interval="3000" auto-play="true">
- <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://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/components/switch.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/switch.md b/_draft/v-0.10/references/components/switch.md
deleted file mode 100644
index 441da7b..0000000
--- a/_draft/v-0.10/references/components/switch.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: <switch>
-type: references
-order: 2.11
-version: 0.10
----
-
-# <switch>
-
-<span class="weex-version">v0.6.1+</span>
-
-The weex builtin component switch is used to create and manage an IOS styled On/Off buttons, for example, the Airplane mode button in the Settings app is a switch button.
-
-**example**
-
-```html
-<template>
- <div>
- <text>muted:</text>
- <switch checked="true" onclick='onclick' onchange='onchange' ondisappear='ondisappear' onappear='onappear'></switch>
-</div>
-</template>
-
-<script>
- module.exports ={
- methods:{
- onclick:function(e){
- console.log('onclick:' + e.timestamp);
- },
- onchange:function(e){
- console.log('onchage, value:' + e.value);
- },
- ondisappear:function(e){
- console.log('ondisappear, value:' + e.value);
- },
- onappear:function(e){
- console.log('onappear, value:' + e.value);
- },
- }
- }
-</script>
-```
-
-[try it](http://dotwe.org/7306d24f4f677b6d9935dbd00e3aa981)
-
-## Child Components
-
-There are no child components for the switch component.
-
-## Attributes
-
-* checked <boolean> true|false, default value is false, indicating whether the button is on or not.
-* disabled <boolean> true|false, default value is false, indicating whether the button is enable or not.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-Notes: There are several style properties that you mustn't use on this component. And here are all the invalid properties:
-
-* width
-* height
-* min-width
-* min-height
-* margin and margin-xxs
-* padding and padding-xxs
-* border and border-xxs
-
-Notes: Specially the width and height related properties is not configurable and the size of this component is fixed to 100x60 (for the design width 750px).
-
-common styles: check out [common styles for components](../common-style.html)
-
-## Events
-
-* onappear / ondisappear event. check out [common events](../common-event.html)
-* onclick: check out [common events](../common-event.html)
-* onchange: check out [common events](../common-event.html)
-
-## Parameters of events' object for onchange event:
-
-* value: the value of the component who dispatched this event, which is the boolean value true or false.
-* timestamp: the time stamp of the event.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_draft/v-0.10/references/components/text.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/text.md b/_draft/v-0.10/references/components/text.md
deleted file mode 100644
index 308fd4a..0000000
--- a/_draft/v-0.10/references/components/text.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: <text>
-type: references
-order: 2.12
-version: 0.10
----
-
-# <text>
-
-The weex builtin component 'text' is used to render text with specified style rule. <text> tag can contain text value only. You can use variable interpolation in the text content with the mark `{% raw %}{{}}{% endraw %}`.
-
-## Child Components
-
-This component supports no child components.
-
-## Attributes
-
-* value(string): text value of this component. This is equal to the content of 'text'.
-
-### example
-
-```
-var textComponent = this.$el("textid");
-this.text = textComponent.attr.value;
-```
-
-## Styles
-
-* lines: specify the text lines. Default value is `0` for unlimited.
-* text styles: check out [text styles](../text-style.html)
-
- * support 'color' style.
- * support 'font-size' style. iOS: default vlaue `32`. Android: platform specify. HTML5: default value `32`.
- * support 'font-style' style.
- * support 'font-weight' style.
- * support 'text-align' style.
- * support 'text-decoration' style.
- * support 'text-overflow' style.
- * support 'line-height'(available from v0.6.1) style. line-height in iOS is different from h5 and Android, text value will be placed at bottom of line box.
- * not support 'flex-direction, 'justify-content', 'align-items' which is active for child nodes, and text has no child nodes.
-
-### common styles
-check out [common styles for components](../common-style.html)
-
-* support flexbox related styles.
-* support box model related styles.
-* support 'position' related styles.
-* support 'opacity', 'background-color' etc.
-
-## Events
-
-### common events
-check out [common events](../common-event.html)
-
-* support 'click' event.
-* support 'appear' / 'disappear' event.
-
-## Example
-
-```html
-<template>
- <div>
- <text>this is text content</text>
- <text value="this is text value"></text>
- <text style="text">{{price1}}</text>
- <text id="textid" onclick={{showtext}}>this is gettext content</text>
- <text value="{{text}}"></text>
- </div>
-</template>
-
-<style>
- .text {
- font-size: 24;
- text-decoration: underline;
- }
-</style>
-
-<script>
- module.exports = {
- data: {
- price1: '99.99',
- price2: '88.88',
- text:''
- },
- methods: {
- showtext: function(event) {
- var textComponent = this.$el("textid");
- this.text = textComponent.attr.value;
- }
- }
- };
-</script>
-```
-[Try it](http://dotwe.org/48f4d7c50245145c72c33161e2bb4325)