You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by cn...@apache.org on 2019/12/11 05:02:34 UTC
[incubator-weex-site] branch master created (now 347348e)
This is an automated email from the ASF dual-hosted git repository.
cnryb pushed a change to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git.
at 347348e Feat update rax docs (#563)
This branch includes the following new commits:
new f02a8a5 change qr code (#562)
new 347348e Feat update rax docs (#563)
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-weex-site] 01/02: change qr code (#562)
Posted by cn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
cnryb pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
commit f02a8a530f1520a6a22a304b25c136e9a3ac9359
Author: 任跃兵 <cn...@live.cn>
AuthorDate: Thu Dec 5 16:41:20 2019 +0800
change qr code (#562)
---
docs/.vuepress/public/tool-playground-qrcode.png | Bin 20076 -> 1902 bytes
1 file changed, 0 insertions(+), 0 deletions(-)
diff --git a/docs/.vuepress/public/tool-playground-qrcode.png b/docs/.vuepress/public/tool-playground-qrcode.png
index bdfd4b2..83540eb 100644
Binary files a/docs/.vuepress/public/tool-playground-qrcode.png and b/docs/.vuepress/public/tool-playground-qrcode.png differ
[incubator-weex-site] 02/02: Feat update rax docs (#563)
Posted by cn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
cnryb pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
commit 347348e5a091e265401ab825edc2014f1c930f74
Author: 亚城 <na...@163.com>
AuthorDate: Fri Dec 6 10:59:39 2019 +0800
Feat update rax docs (#563)
* feat: add demos
* docs: add menu
* feat: add rax logo
* feat: add img
* feat: remove empty date
* docs: 增加 rax 介绍文档与组件文档
* docs: 增加英文文档
* doc: 文档修复
---
docs/.vuepress/components/IndexPage.vue | 2 +-
docs/.vuepress/public/vue-rax.png | Bin 120960 -> 163126 bytes
docs/docs/components/a.md | 22 +++-
docs/docs/components/cell.md | 15 ++-
docs/docs/components/div.md | 25 ++++
docs/docs/components/image.md | 33 ++++-
docs/docs/components/indicator.md | 2 +-
docs/docs/components/input.md | 23 +++-
docs/docs/components/list.md | 80 ++++++++++++
docs/docs/components/loading.md | 2 +-
docs/docs/components/recycle-list.md | 2 +-
docs/docs/components/refresh.md | 63 ++++++++-
docs/docs/components/richtext.md | 2 +-
docs/docs/components/scroller.md | 63 ++++++++-
docs/docs/components/slider.md | 48 ++++++-
docs/docs/components/text.md | 24 +++-
docs/docs/components/textarea.md | 35 ++++-
docs/docs/components/video.md | 25 +++-
docs/docs/components/waterfall.md | 92 ++++++++++++-
docs/docs/components/web.md | 26 +++-
docs/guide/front-end-frameworks.md | 6 +-
docs/guide/images/vue-rax.png | Bin 120960 -> 162056 bytes
docs/zh/docs/components/a.md | 23 +++-
docs/zh/docs/components/cell.md | 18 ++-
docs/zh/docs/components/div.md | 25 ++++
docs/zh/docs/components/image.md | 33 ++++-
docs/zh/docs/components/indicator.md | 2 +-
docs/zh/docs/components/input.md | 23 +++-
docs/zh/docs/components/list.md | 82 +++++++++++-
docs/zh/docs/components/loading.md | 2 +-
docs/zh/docs/components/refresh.md | 65 +++++++++-
docs/zh/docs/components/richtext.md | 2 +-
docs/zh/docs/components/scroller.md | 63 ++++++++-
docs/zh/docs/components/slider.md | 47 ++++++-
docs/zh/docs/components/text.md | 23 +++-
docs/zh/docs/components/textarea.md | 35 ++++-
docs/zh/docs/components/video.md | 27 +++-
docs/zh/docs/components/waterfall.md | 93 +++++++++++++-
docs/zh/docs/components/web.md | 26 +++-
docs/zh/guide/front-end-frameworks.md | 4 +
docs/zh/guide/images/vue-rax.png | Bin 120960 -> 162056 bytes
docs/zh/guide/introduction.md | 2 +-
docs/zh/guide/use-rax-in-weex.md | 221 ++++++++++++++++++++++++++++++++
43 files changed, 1365 insertions(+), 41 deletions(-)
diff --git a/docs/.vuepress/components/IndexPage.vue b/docs/.vuepress/components/IndexPage.vue
index 08b4428..224d789 100644
--- a/docs/.vuepress/components/IndexPage.vue
+++ b/docs/.vuepress/components/IndexPage.vue
@@ -30,7 +30,7 @@
<h3>{{weex.charc3Title}}</h3>
<div>{{weex.charc3Content}}</div>
</div>
- <img src="https://img.alicdn.com/tfs/TB1UrQ4qAvoK1RjSZFNXXcxMVXa-808-1180.png" width="50%" height="100%" />
+ <img src="https://gw.alicdn.com/tfs/TB1WFkDjkT2gK0jSZFkXXcIQFXa-808-1180.png" width="50%" height="100%" />
</div>
<div class="character-o">
diff --git a/docs/.vuepress/public/vue-rax.png b/docs/.vuepress/public/vue-rax.png
index 1e6e57e..c10f02e 100644
Binary files a/docs/.vuepress/public/vue-rax.png and b/docs/.vuepress/public/vue-rax.png differ
diff --git a/docs/docs/components/a.md b/docs/docs/components/a.md
index 87f2dfb..990acd6 100644
--- a/docs/docs/components/a.md
+++ b/docs/docs/components/a.md
@@ -30,7 +30,7 @@ It's forbidden to add text directly to `<a>`, use [`<text>`](./text.html) to wra
The execution order of callback function of click and href is **undefined**. Do **not** use click event to do the preprocessing of `href`.
:::
-## Examples
+## Vue Example
```Html
<a href="http://emas-ha-remote-log-poc.oss-cn-beijing.aliyuncs.com/eweex/app/biz-docs-com-mod/upload/271ccdca-db41-423d-981c-c7c6751ba479/show_1.js">
@@ -39,3 +39,23 @@ The execution order of callback function of click and href is **undefined**. Do
```
[Demo](http://dotwe.org/vue/3b789771e48be92a70bd682f084b84b5)
+
+## Rax Example
+
+`rax-link` is the component `<a>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import Link from 'rax-link';
+import Text from 'rax-text';
+
+function App() {
+ return <Link href={"//www.google.com"} onPress={(e)=>{console.log(e)}}>
+ <Text>click me</Text>
+ </Link>
+}
+```
+
+[rax-link doc](https://rax.js.org/docs/components/link)
+
diff --git a/docs/docs/components/cell.md b/docs/docs/components/cell.md
index 9a385ce..df2570c 100644
--- a/docs/docs/components/cell.md
+++ b/docs/docs/components/cell.md
@@ -28,8 +28,21 @@ This type of component supports all kinds of weex component as its child compone
* **common events**. Check out [common events](../events/common-events.html).
-## Example
+## Vue Example
Please refer to
* [list](./list.html)
* [waterfall](./waterfall.html)
+
+## Rax Example
+
+```jsx
+import RecyclerView from 'rax-recyclerview';
+```
+
+```jsx
+<RecyclerView.Cell>{...}</RecyclerView.Cell>
+```
+
+[rax-recyclerview doc](https://rax.js.org/docs/components/recyclerview)
+
diff --git a/docs/docs/components/div.md b/docs/docs/components/div.md
index 1ebbc77..02f3548 100644
--- a/docs/docs/components/div.md
+++ b/docs/docs/components/div.md
@@ -21,3 +21,28 @@
## Events
* **common events**. Check out [common events](../events/common-events.html).
+
+## Rax Example
+
+`rax-view` is the component `<div>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import View from "rax-view";
+
+function App() {
+ return <View
+ style={{
+ width: '200rpx',
+ height: '200rpx',
+ backgroundColor: '#222831',
+ }}
+ />;
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-view doc](https://rax.js.org/docs/components/view)
+
diff --git a/docs/docs/components/image.md b/docs/docs/components/image.md
index c55f3a5..29e0f2a 100644
--- a/docs/docs/components/image.md
+++ b/docs/docs/components/image.md
@@ -161,6 +161,35 @@ export default {
Complete example goes [here](http://dotwe.org/vue/94de9307517240dec066d2ea57fe54a0).
-## Examples
+## Vue Example
* [Base64 example](http://dotwe.org/vue/ba477790c85ea12bbf7ad3a5f0885b5c)
-* [Lazy load image example](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)
\ No newline at end of file
+* [Lazy load image example](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)
+
+## Rax Example
+
+`rax-image` is the component `<image>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import Image from 'rax-image';
+
+const App = () => {
+ return (
+ <Image
+ source={{
+ uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',
+ }}
+ style={{
+ height: '68rpx',
+ width: '67rpx'
+ }}
+ />
+ );
+};
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-image doc](https://rax.js.org/docs/components/image)
+
diff --git a/docs/docs/components/indicator.md b/docs/docs/components/indicator.md
index 423a1c8..7a2a20e 100644
--- a/docs/docs/components/indicator.md
+++ b/docs/docs/components/indicator.md
@@ -22,6 +22,6 @@ No attributes.
No events.
-## Example
+## Vue Example
Please refer to [slider](./slider.html)
diff --git a/docs/docs/components/input.md b/docs/docs/components/input.md
index f99c1e6..f42fa45 100644
--- a/docs/docs/components/input.md
+++ b/docs/docs/components/input.md
@@ -139,7 +139,7 @@ input does not support the common-event `click`. Please listen to the `input`
* for `focus` and `blur` events:
- `timestamp`: the time stamp of the event.
-## Demo
+## Vue Example
- [input with normal content and binding actions Example] (http://dotwe.org/vue/c2c9a853e5184d8ade57d1d93432f31f)
- [ date & time Example ](http://dotwe.org/vue/23ec083078356ef0e31618164e5a184b)
@@ -148,3 +148,24 @@ input does not support the common-event `click`. Please listen to the `input`
- [Other Examples](http://dotwe.org/vue/aec5342b15d3c01b3b427384a71b0874)
[try it](http://dotwe.org/vue/3470e4d0194f3879a72d38e2ab02cc9f)
+
+## Rax Example
+
+`rax-textinput` is the component `<textarea>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from "rax";
+import Driver from 'driver-universal';
+import TextInput from "rax-textinput";
+
+function App() {
+ return (
+ <TextInput autoFocus={true} />
+ );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-textinput doc](https://rax.js.org/docs/components/textinput)
+
diff --git a/docs/docs/components/list.md b/docs/docs/components/list.md
index 2ed3a09..2738c56 100644
--- a/docs/docs/components/list.md
+++ b/docs/docs/components/list.md
@@ -76,3 +76,83 @@ For example, a vertical list nested in a vertical list or scroller is not allowe
[load more demo](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38)
+
+## Rax Example
+
+`rax-recyclerview` is the component `<list>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, Component, render } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Driver from "driver-universal"
+import RecyclerView from 'rax-recyclerview';
+
+function Thumb() {
+ return (
+ <RecyclerView.Cell>
+ <View style={styles.button}>
+ <View style={styles.box} />
+ </View>
+ </RecyclerView.Cell>
+ );
+}
+let THUMBS = [];
+for (let i = 0; i < 20; i++) THUMBS.push(i);
+let createThumbRow = (val, i) => <Thumb key={i} />;
+
+function App() {
+ return (
+ <View style={styles.root}>
+ <View style={styles.container}>
+ <RecyclerView
+ style={{
+ height: 500
+ }}>
+ <RecyclerView.Header>
+ <Text>Sticky view is not header</Text>
+ </RecyclerView.Header>
+ <RecyclerView.Header>
+ <View style={styles.sticky}>
+ <Text>Sticky view must in header root</Text>
+ </View>
+ </RecyclerView.Header>
+ {THUMBS.map(createThumbRow)}
+ </RecyclerView>
+ </View>
+ </View>
+ );
+}
+
+let styles = {
+ root: {
+ width: '750rpx',
+ },
+ container: {
+ padding: '20rpx',
+ borderStyle: 'solid',
+ borderColor: '#dddddd',
+ borderWidth: '1rpx',
+ marginLeft: '20rpx',
+ height: '1000rpx',
+ marginRight: '20rpx',
+ marginBottom: '10rpx',
+ },
+ button: {
+ margin: '7rpx',
+ padding: '5rpx',
+ alignItems: 'center',
+ backgroundColor: '#eaeaea',
+ borderRadius: '3rpx',
+ },
+ box: {
+ width: '64rpx',
+ height: '64rpx',
+ }
+};
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-recyclerview doc](https://rax.js.org/docs/components/recyclerview)
+
diff --git a/docs/docs/components/loading.md b/docs/docs/components/loading.md
index 799291e..227b10a 100644
--- a/docs/docs/components/loading.md
+++ b/docs/docs/components/loading.md
@@ -65,6 +65,6 @@ The `<loading>` Component provide a pullup to loading function for some special
</loading>
```
-## Example
+## Vue Example
- Complete example goes [here](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f)
diff --git a/docs/docs/components/recycle-list.md b/docs/docs/components/recycle-list.md
index 475034b..c1d358f 100644
--- a/docs/docs/components/recycle-list.md
+++ b/docs/docs/components/recycle-list.md
@@ -129,7 +129,7 @@ Different from the understanding in the front-end framework, the logic to implem
* Component custom event
Plan support. Features such as `vm.$on`, `vm.$once`, `vm.$emit`, `vm.$off` are not fully tuned, the interface is available, but the behavior may be slightly different (parameters are missing), do not use it for the time being.
-## Demo
+## Example
```html
<recycle-list for="(item, i) in longList" switch="type">
<cell-slot case="A">
diff --git a/docs/docs/components/refresh.md b/docs/docs/components/refresh.md
index 07f292f..656863e 100644
--- a/docs/docs/components/refresh.md
+++ b/docs/docs/components/refresh.md
@@ -76,6 +76,67 @@ To be rendered properly, the `<refresh>` Component must appear inside the specia
-## Example
+## Vue Example
- Complete example goes [here](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539)
+
+## Rax Example
+
+`rax-refreshcontrol` is the component `<refresh>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, Component, render } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Driver from 'driver-universal';
+import RecyclerView from 'rax-recyclerview';
+import RefreshControl from 'rax-refreshcontrol';
+
+class RefreshControlDemo extends Component {
+ state = {
+ isRefreshing: false,
+ loaded: 0,
+ refreshText: '↓ Pull To Refresh'
+ };
+
+ handleRefresh = (e) => {
+ this.setState({
+ isRefreshing: true,
+ refreshText: 'Refreshing',
+ });
+ setTimeout(() => {
+ // update Data
+ this.setState({
+ isRefreshing: false,
+ refreshText: '↓ Pull To Refresh',
+ });
+ }, 1000);
+ };
+
+ render() {
+ return (
+ <View>
+ <RecyclerView
+ refreshControl={null}>
+ <RefreshControl
+ refreshing={this.state.isRefreshing}
+ onRefresh={this.handleRefresh}
+ >
+ <Text>{this.state.refreshText}</Text>
+ </RefreshControl>
+ <RecyclerView.Cell>
+ <View>
+ <Text>this is list</Text>
+ </View>
+ </RecyclerView.Cell>
+ </RecyclerView>
+ </View>
+ );
+ }
+}
+
+render(<RefreshControlDemo/>, document.body, { driver: Driver });
+```
+
+[rax-refreshcontrol doc](https://rax.js.org/docs/components/refreshcontrol)
+
diff --git a/docs/docs/components/richtext.md b/docs/docs/components/richtext.md
index f702fd4..8645ee6 100644
--- a/docs/docs/components/richtext.md
+++ b/docs/docs/components/richtext.md
@@ -75,6 +75,6 @@ Only limited css styles listed below are supported by richtext.
* The `a` tag has a `pseudo-ref` property whose value will be sent with the itemclick event. **Please be noted that the default jump behavior on `a` tag will be disabled at this moment.`[Demo](http://editor.weex.io/p/sunshl/Contribute/commit/b21e1133830b48767c6d00d712e415b2)
* If `itemclick` is specified on nested nodes, only the event on the outer node will take effect.
-## Example
+## Vue Example
[Demo](http://dotwe.org/vue/8a817e1acb46c2910caf1b53b8016a48)
diff --git a/docs/docs/components/scroller.md b/docs/docs/components/scroller.md
index ed16904..fb6f5d6 100644
--- a/docs/docs/components/scroller.md
+++ b/docs/docs/components/scroller.md
@@ -59,7 +59,7 @@ common styles: check out [common styles for components](../styles/common-styles.
Nested lists or scrollers within the same direction are not supported. In other words. nested list/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
+## Vue Example
```html
<template>
@@ -148,3 +148,64 @@ For example, a vertical list nested in a vertical list or scroller is not allowe
```
[try it](http://dotwe.org/vue/2f22f14fb711d88515e63c3f67bed46a)
+
+## Rax Example
+
+`rax-scrollview` is the component `<scroller>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal"
+import View from 'rax-view';
+import ScrollView from 'rax-scrollview';
+
+function Thumb() {
+ return (
+ <View style={styles.button}>
+ <View style={styles.box} />
+ </View>
+ );
+}
+
+let THUMBS = [];
+for (let i = 0; i < 20; i++) THUMBS.push(i);
+let createThumbRow = (val, i) => <Thumb key={i} />;
+
+function App () {
+ return (
+ <View style={{ ...styles.container, ...{ height: 500 } }}>
+ <ScrollView>
+ {THUMBS.map(createThumbRow)}
+ </ScrollView>
+ </View>
+ );
+}
+
+let styles = {
+ container: {
+ padding: 20,
+ borderStyle: 'solid',
+ borderColor: '#dddddd',
+ borderWidth: 1,
+ marginLeft: 20,
+ marginRight: 20,
+ marginBottom: 10,
+ },
+ button: {
+ margin: 7,
+ padding: 5,
+ alignItems: 'center',
+ backgroundColor: '#eaeaea',
+ borderRadius: 3,
+ },
+ box: {
+ width: 64,
+ height: 64,
+ }
+};
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-scrollview doc](https://rax.js.org/docs/components/scrollview)
+
diff --git a/docs/docs/components/slider.md b/docs/docs/components/slider.md
index e8b65c8..86e3a80 100644
--- a/docs/docs/components/slider.md
+++ b/docs/docs/components/slider.md
@@ -30,7 +30,8 @@ It supports all kinds of weex components as its slides. The `indicator` componen
* **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.
* **scroll**. This event is fired when scrolling. The current `offsetXRatio` value is given in this event callback. And `offsetXRatio` means the current slide offset ratio which value range is [-1, 1]. Negative value means the slide is shifted to left and positive value means to right. For example, -0.2 means 20% of the current slide is slided beyonds left border of the slider.
-## Example
+## Vue Example
+
```html
<template>
<div>
@@ -81,3 +82,48 @@ It supports all kinds of weex components as its slides. The `indicator` componen
* [Demo of setting scroll event](http://dotwe.org/vue/00aff16c6c1c9e9c1209d2db70b94b24)
* [Demo of auto-play with indicator](http://dotwe.org/vue/7c9c0f5cc6e4571a962b8f0cf627fab3)
* [Demo Ocean](http://dotwe.org/vue/c851d5fe09e54709a6128dbc5bf74a6e)
+
+## Rax Example
+
+`rax-slider` is the component `<slider>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, Component, render, createRef } from 'rax';
+import View from 'rax-view';
+import Image from 'rax-image';
+import Slider from 'rax-slider';
+import Driver from 'driver-universal';
+
+const App = () => {
+ const handleChange = (idx) {
+ console.log('change to ', idx);
+ }
+
+ return (
+ <View>
+ <Slider
+ className="slider"
+ width="750"
+ height="500"
+ autoPlay
+ onChange={handleChange}
+ >
+ <View style={styles.itemWrap}>
+ <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png'}} />
+ </View>
+ <View style={styles.itemWrap}>
+ <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png'}} />
+ </View>
+ <View style={styles.itemWrap}>
+ <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png'}} />
+ </View>
+ </Slider>
+ </View>
+ );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-slider doc](https://rax.js.org/docs/components/slider)
+
diff --git a/docs/docs/components/text.md b/docs/docs/components/text.md
index d4ec54a..cb50633 100644
--- a/docs/docs/components/text.md
+++ b/docs/docs/components/text.md
@@ -80,5 +80,27 @@ Generally speaking, you would meet inconsistent word-break behavior if one of th
Developers could add `\uFEFF` namely [ZERO WIDTH NO-BREAK SPACE](http://jkorpela.fi/chars/spaces.html) just after the character with inconsistent word-break behavior to force no-break strategy, ref [demo](http://dotwe.org/vue/88a4b46f0dc1d1f6d82c506f490029ce) to see more detail。`\uFEFF` may not work on all Android ROMs, as some of them may just ignore it.
:::
-## Example
+## Vue Example
* [Basic usage for `<text>`](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0).
+
+
+## Rax Example
+
+`rax-text` is the component `<text>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import Text from 'rax-text';
+
+function App() {
+ return (
+ <Text>Text</Text>
+ );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-text doc](https://rax.js.org/docs/components/text)
+
diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md
index 9843800..89df18f 100644
--- a/docs/docs/components/textarea.md
+++ b/docs/docs/components/textarea.md
@@ -49,7 +49,7 @@ The difference between `active` and `focus` is that when the cursor is inside th
* @param isShow: boolean, showing or hiding the keyboard.
* @param keyboardSize: keyboard height in web pixel format.
-## Example
+## Vue Example
```html
<template>
@@ -116,3 +116,36 @@ The difference between `active` and `focus` is that when the cursor is inside th
* [Demo](http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa)
* [Demo of events](http://dotwe.org/vue/2ba8ebc4e6970e1e86725c3e80296e40)
* [Demo of binding](http://dotwe.org/vue/d884b0c18891a05d653253c0f0a94bc1)
+
+## Rax Example
+
+`rax-textinput` is the component `<textarea>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render } from "rax";
+import Driver from 'driver-universal';
+import TextInput from "rax-textinput";
+
+function App() {
+ return (
+ <View style={{margin: '20rpx'}}>
+ <TextInput
+ multiline={true}
+ numberOfLines={3}
+ style={{
+ height: '150rpx',
+ width: '600rpx',
+ borderWidth: '1rpx',
+ borderColor: '#dddddd',
+ borderStyle: 'solid'
+ }}
+ />
+ </View>
+ );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-textinput doc](https://rax.js.org/docs/components/textinput)
+
diff --git a/docs/docs/components/video.md b/docs/docs/components/video.md
index 7917a2e..0a6e919 100644
--- a/docs/docs/components/video.md
+++ b/docs/docs/components/video.md
@@ -28,7 +28,7 @@ A `text` is the only valid type of child component.
* **finish** Triggered when playback state is Finished.
* **fail** Triggered when playback state is Failed.
-# Example
+# Vue Example
```html
<template>
@@ -81,3 +81,26 @@ A `text` is the only valid type of child component.
* [Demo](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197)
* [Demo of autoplay](http://dotwe.org/vue/342d32830f51f72df6acab21fb1c21bd)
* [Demo of controls](http://dotwe.org/vue/7bdf54dce22def3d3850f65d95f5eac9)
+
+## Rax Example
+
+`rax-video` is the component `<video>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, Component, render } from "rax";
+import Video from "rax-video";
+import Driver from "driver-universal";
+
+render(
+ <Video
+ style={{ width: '750rpx', height: '400rpx' }}
+ autoPlay
+ src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4"
+ />,
+ document.body,
+ { driver: Driver }
+);
+```
+
+[rax-video doc](https://rax.js.org/docs/components/video)
+
diff --git a/docs/docs/components/waterfall.md b/docs/docs/components/waterfall.md
index 93fe2ba..b1d3745 100644
--- a/docs/docs/components/waterfall.md
+++ b/docs/docs/components/waterfall.md
@@ -49,6 +49,96 @@ common events: check out the [common events](/docs/events/common-events.html)
All subcomponents in waterfall support the scrollToElement API in [dom module](../modules/dom.html)
-## Example
+## Vue Example
[waterfall example](http://dotwe.org/vue/7a9195643e9e8da352b0d879cdbe68c0)
+
+## Rax Example
+
+`rax-waterfall` is the component `<waterfall>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, useState, useRef, render } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Driver from "driver-universal"
+import RefreshControl from 'rax-refreshcontrol';
+import Waterfall from 'rax-waterfall';
+
+const data = [
+ { height: 550, item: {} },
+ { height: 624, item: {} },
+ { height: 708, item: {} },
+ { height: 600, item: {} },
+ { height: 300, item: {} },
+ { height: 100, item: {} },
+ { height: 400, item: {} },
+ { height: 550, item: {} },
+ { height: 624, item: {} },
+ { height: 708, item: {} },
+ { height: 600, item: {} },
+ { height: 300, item: {} },
+ { height: 100, item: {} },
+ { height: 400, item: {} }
+];
+
+let App = (props) => {
+
+ let [refreshing, setRefreshing] = useState(false);
+ let handleRefresh = () => {
+ if (refreshing) {
+ return;
+ }
+ setRefreshing(true);
+ setTimeout(() => {
+ setRefreshing(false);
+ }, 500);
+ }
+ let loadMore = () => {
+ console.log('load more');
+ }
+
+ return (
+ <Waterfall
+ columnWidth={370}
+ columnCount={2}
+ columnGap={10}
+ dataSource={data}
+ renderHeader={() => {
+ return [
+ <RefreshControl
+ key="0"
+ refreshing={refreshing}
+ onRefresh={handleRefresh}>
+ <Text>RefreshControl</Text>
+ </RefreshControl>,
+ <View key="1" style={{
+ height: 100,
+ backgroundColor: '#efefef',
+ marginBottom: 10
+ }}><Text>Header Mod</Text></View>
+ ];
+ }}
+ renderFooter={() => {
+ return <View key="3" style={{width: 750, height: 100, backgroundColor: '#efefef', marginTop: 10}}><Text>Footer Mod</Text></View>;
+ }}
+ renderItem={(item, index) => {
+ return (
+ <View style={{
+ height: item.height,
+ backgroundColor: '#efefef',
+ marginBottom: 10
+ }}>
+ <Text>{index}</Text>
+ </View>
+ );
+ }}
+ onEndReached={loadMore} />
+ );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-waterfall doc](https://rax.js.org/docs/components/waterfall)
+
diff --git a/docs/docs/components/web.md b/docs/docs/components/web.md
index a39dac8..26d8668 100644
--- a/docs/docs/components/web.md
+++ b/docs/docs/components/web.md
@@ -120,6 +120,30 @@ Support **[common styles](../styles/common-styles.html)**.
- `<web>` can not have any nested child component.
- You can use [webview module](../modules/webview.html) to control `<web>` component, see the [example](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939).
-## Examples
+## Vue Example
- [Browser example](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939)
+
+## Rax Example
+
+`rax-embed` is the component `<web>` of rax, which can run in web and weex.
+
+```jsx
+import { createElement, render, Component } from 'rax';
+import Driver from 'driver-universal';
+import Embed from 'rax-embed';
+
+function App() {
+ const urlParam = {
+ paramOne:123,
+ paramTwo:456
+ };
+ return <Embed urlParam={urlParam} src={'http://taobao.com'}
+ useIframeInWeb={true} style={{ height: 750, width: 750 }} />
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-embed doc](https://rax.js.org/docs/components/embed)
+
diff --git a/docs/guide/front-end-frameworks.md b/docs/guide/front-end-frameworks.md
index 837d08a..1b60988 100644
--- a/docs/guide/front-end-frameworks.md
+++ b/docs/guide/front-end-frameworks.md
@@ -81,6 +81,8 @@ Please refer to [Use Vue.js in Weex](./use-vue-in-weex.html) document to learn m
## Rax
-Rax is a front-end framework with React-compatible APIs.
+Rax is a front-end framework with React-compatible APIs.Please refer to [Rax's official website](https://alibaba.github.io/rax/) to get more information.
-Please refer to [Rax's official website](https://alibaba.github.io/rax/) to get more information.
+::: tip
+Please refer to [Use Rax in Weex](./use-rax-in-weex.html) document to learn more technics about Weex and Rax.
+:::
diff --git a/docs/guide/images/vue-rax.png b/docs/guide/images/vue-rax.png
index 1e6e57e..a748fd6 100644
Binary files a/docs/guide/images/vue-rax.png and b/docs/guide/images/vue-rax.png differ
diff --git a/docs/zh/docs/components/a.md b/docs/zh/docs/components/a.md
index e29aa7d..0f714b7 100644
--- a/docs/zh/docs/components/a.md
+++ b/docs/zh/docs/components/a.md
@@ -30,7 +30,7 @@
`click` 事件的回调函数和 `href` 跳转的执行顺序**未被定义**，**不要**使用 `click` 来进行 `href` 跳转前的逻辑处理。
:::
-## 示例
+## Vue 示例
```Html
<a href="http://emas-ha-remote-log-poc.oss-cn-beijing.aliyuncs.com/eweex/app/biz-docs-com-mod/upload/271ccdca-db41-423d-981c-c7c6751ba479/show_1.js">
@@ -39,3 +39,24 @@
```
[示例](http://dotwe.org/vue/3b789771e48be92a70bd682f084b84b5)
+
+
+## Rax 示例
+
+`rax-link` 是 `<a>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import Link from 'rax-link';
+import Text from 'rax-text';
+
+function App() {
+ return <Link href={"//www.google.com"} onPress={(e)=>{console.log(e)}}>
+ <Text>点击跳转</Text>
+ </Link>
+}
+```
+
+[rax-link 文档](https://rax.js.org/docs/components/link)
+
diff --git a/docs/zh/docs/components/cell.md b/docs/zh/docs/components/cell.md
index e2da8a8..1d484d4 100644
--- a/docs/zh/docs/components/cell.md
+++ b/docs/zh/docs/components/cell.md
@@ -10,7 +10,6 @@ Cell 支持添加任意类型的组件作为自己的子组件，但是请不要
## 属性
-* **keep-scroll-position** boolean. 控制当 Cell 被添加到列表中时，列表的滚动位置是否要保持不变。
* **insert-animation** string, cell 的插入动画。当前只支持 `none` 和 `default`。
* **delete-animation** string, cell 的删除动画。当前只支持 `none` 和 `default`。
@@ -30,8 +29,23 @@ Cell 支持添加任意类型的组件作为自己的子组件，但是请不要
* **通用事件**. 参见[通用事件](../events/common-events.html)
-## 示例
+## Vue 示例
Cell 的例子请参考
* [list](./list.html)
* [waterfall](./waterfall.html)
+
+## Rax 示例
+
+Rax 中 cell 是 `rax-recyclerview` 提供的子组件，使用方式如下
+
+```jsx
+import RecyclerView from 'rax-recyclerview';
+```
+
+```jsx
+<RecyclerView.Cell>{...}</RecyclerView.Cell>
+```
+
+[rax-recyclerview 文档](https://rax.js.org/docs/components/recyclerview)
+
diff --git a/docs/zh/docs/components/div.md b/docs/zh/docs/components/div.md
index 382a270..00eb069 100644
--- a/docs/zh/docs/components/div.md
+++ b/docs/zh/docs/components/div.md
@@ -21,3 +21,28 @@
## 事件
* **通用事件** 支持所有[通用事件](../events/common-events.html)。
+
+## Rax 示例
+
+`rax-view` 是 `<div>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import View from "rax-view";
+
+function App() {
+ return <View
+ style={{
+ width: '200rpx',
+ height: '200rpx',
+ backgroundColor: '#222831',
+ }}
+ />;
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-view 文档](https://rax.js.org/docs/components/view)
+
diff --git a/docs/zh/docs/components/image.md b/docs/zh/docs/components/image.md
index 56a805e..b7a159a 100644
--- a/docs/zh/docs/components/image.md
+++ b/docs/zh/docs/components/image.md
@@ -160,7 +160,36 @@ export default {
参见[完整示例](http://dotwe.org/vue/94de9307517240dec066d2ea57fe54a0)。
-## 示例
+## Vue 示例
* [Base64 示例](http://dotwe.org/vue/ba477790c85ea12bbf7ad3a5f0885b5c)
-* [Lazy load image 示例](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)
\ No newline at end of file
+* [Lazy load image 示例](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)
+
+## Rax 示例
+
+`rax-image` 是 `<image>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import Image from 'rax-image';
+
+const App = () => {
+ return (
+ <Image
+ source={{
+ uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',
+ }}
+ style={{
+ height: '68rpx',
+ width: '67rpx'
+ }}
+ />
+ );
+};
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-image 文档](https://rax.js.org/docs/components/image)
+
diff --git a/docs/zh/docs/components/indicator.md b/docs/zh/docs/components/indicator.md
index daaea72..7a57676 100644
--- a/docs/zh/docs/components/indicator.md
+++ b/docs/zh/docs/components/indicator.md
@@ -22,6 +22,6 @@
无事件
-## 示例
+## Vue 示例
请参考 [slider](./slider.html)
diff --git a/docs/zh/docs/components/input.md b/docs/zh/docs/components/input.md
index 1ced9ad..4a5dc7a 100644
--- a/docs/zh/docs/components/input.md
+++ b/docs/zh/docs/components/input.md
@@ -126,7 +126,7 @@ placeholder 字符颜色。默认值是 `#999999`
目前不支持 this.$el(id).value = '' 这种方式改写 input value。只支持在 `<input>` 组件的 input、change 事件中改写。
:::
-## 示例
+## Vue 示例
- [input标签使用及事件处理 demo](http://dotwe.org/vue/c2c9a853e5184d8ade57d1d93432f31f)
@@ -138,3 +138,24 @@ placeholder 字符颜色。默认值是 `#999999`
* [其他示例集合](http://dotwe.org/vue/aec5342b15d3c01b3b427384a71b0874)
<IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB10jc9nVzqK1RjSZFvXXcB7VXa-297-479.png" />
+
+## Rax 示例
+
+`rax-textinput` 是 `<textarea>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from "rax";
+import Driver from 'driver-universal';
+import TextInput from "rax-textinput";
+
+function App() {
+ return (
+ <TextInput autoFocus={true} />
+ );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-textinput 文档](https://rax.js.org/docs/components/textinput)
+
diff --git a/docs/zh/docs/components/list.md b/docs/zh/docs/components/list.md
index f035ef6..85ad2bc 100644
--- a/docs/zh/docs/components/list.md
+++ b/docs/zh/docs/components/list.md
@@ -107,8 +107,88 @@
滚动到列表某个指定项是常见需求，`<list>` 拓展了该功能，可通过 `dom.scrollToElement()` 滚动到指定 `<cell>`。更多信息可参考 [dom module](/docs/modules/dom.html)。
相应的 demo 可参考 [<scroller> 示例](http://dotwe.org/vue/014c0dc53edf7320df7701ebf7c0b2be)中的实现。
-## 示例
+## Vue 示例
[简单示例](http://dotwe.org/vue/c9ab413141713d5c7ea3e5083eb4dbd1)
[滑动加载](http://dotwe.org/vue/f188936d60c6ca45d342d34f0659a2be)
[头部示例](http://dotwe.org/vue/b66212f9779e20f456ba48ab91fd199f)
[cell appear事件](http://dotwe.org/vue/b9e8186c38641f41a7bb1785b3d3fa92)
+
+## Rax 示例
+
+`rax-recyclerview` 是 `<list>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, Component, render } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Driver from "driver-universal"
+import RecyclerView from 'rax-recyclerview';
+
+function Thumb() {
+ return (
+ <RecyclerView.Cell>
+ <View style={styles.button}>
+ <View style={styles.box} />
+ </View>
+ </RecyclerView.Cell>
+ );
+}
+let THUMBS = [];
+for (let i = 0; i < 20; i++) THUMBS.push(i);
+let createThumbRow = (val, i) => <Thumb key={i} />;
+
+function App() {
+ return (
+ <View style={styles.root}>
+ <View style={styles.container}>
+ <RecyclerView
+ style={{
+ height: 500
+ }}>
+ <RecyclerView.Header>
+ <Text>Sticky view is not header</Text>
+ </RecyclerView.Header>
+ <RecyclerView.Header>
+ <View style={styles.sticky}>
+ <Text>Sticky view must in header root</Text>
+ </View>
+ </RecyclerView.Header>
+ {THUMBS.map(createThumbRow)}
+ </RecyclerView>
+ </View>
+ </View>
+ );
+}
+
+let styles = {
+ root: {
+ width: '750rpx',
+ },
+ container: {
+ padding: '20rpx',
+ borderStyle: 'solid',
+ borderColor: '#dddddd',
+ borderWidth: '1rpx',
+ marginLeft: '20rpx',
+ height: '1000rpx',
+ marginRight: '20rpx',
+ marginBottom: '10rpx',
+ },
+ button: {
+ margin: '7rpx',
+ padding: '5rpx',
+ alignItems: 'center',
+ backgroundColor: '#eaeaea',
+ borderRadius: '3rpx',
+ },
+ box: {
+ width: '64rpx',
+ height: '64rpx',
+ }
+};
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-recyclerview 文档](https://rax.js.org/docs/components/recyclerview)
+
diff --git a/docs/zh/docs/components/loading.md b/docs/zh/docs/components/loading.md
index 050ac78..259801d 100644
--- a/docs/zh/docs/components/loading.md
+++ b/docs/zh/docs/components/loading.md
@@ -44,6 +44,6 @@
</loading>
```
-## 示例
+## Vue 示例
[基本用法](http://dotwe.org/vue/1c303ff427e3a92fc8ef5846c00b35e5)
<IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1QYo8n9zqK1RjSZFpXXakSXXa-1242-2208.png" />
diff --git a/docs/zh/docs/components/refresh.md b/docs/zh/docs/components/refresh.md
index bdded90..0287e1e 100644
--- a/docs/zh/docs/components/refresh.md
+++ b/docs/zh/docs/components/refresh.md
@@ -48,6 +48,67 @@
</refresh>
```
-## 示例
+## Vue 示例
[基本用法](http://dotwe.org/vue/fccb7c6b9a9f4b7b1f3f7518344cf1bb)
-<IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1EMM7nYvpK1RjSZPiXXbmwXXa-1242-2208.png" />
\ No newline at end of file
+<IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1EMM7nYvpK1RjSZPiXXbmwXXa-1242-2208.png" />
+
+## Rax 示例
+
+`rax-refreshcontrol` 是 `<refresh>` 组件的上层封装，提供了 Weex 下拉刷新能力
+
+```jsx
+import { createElement, Component, render } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Driver from 'driver-universal';
+import RecyclerView from 'rax-recyclerview';
+import RefreshControl from 'rax-refreshcontrol';
+
+class RefreshControlDemo extends Component {
+ state = {
+ isRefreshing: false,
+ loaded: 0,
+ refreshText: '↓ Pull To Refresh'
+ };
+
+ handleRefresh = (e) => {
+ this.setState({
+ isRefreshing: true,
+ refreshText: 'Refreshing',
+ });
+ setTimeout(() => {
+ // update Data
+ this.setState({
+ isRefreshing: false,
+ refreshText: '↓ Pull To Refresh',
+ });
+ }, 1000);
+ };
+
+ render() {
+ return (
+ <View>
+ <RecyclerView
+ refreshControl={null}>
+ <RefreshControl
+ refreshing={this.state.isRefreshing}
+ onRefresh={this.handleRefresh}
+ >
+ <Text>{this.state.refreshText}</Text>
+ </RefreshControl>
+ <RecyclerView.Cell>
+ <View>
+ <Text>this is list</Text>
+ </View>
+ </RecyclerView.Cell>
+ </RecyclerView>
+ </View>
+ );
+ }
+}
+
+render(<RefreshControlDemo/>, document.body, { driver: Driver });
+```
+
+[rax-refreshcontrol 文档](https://rax.js.org/docs/components/refreshcontrol)
+
diff --git a/docs/zh/docs/components/richtext.md b/docs/zh/docs/components/richtext.md
index 14e8a39..34e33cb 100644
--- a/docs/zh/docs/components/richtext.md
+++ b/docs/zh/docs/components/richtext.md
@@ -74,6 +74,6 @@
* `a`标签设置了pseudo-ref。此时itemclick事件会被触发，并且携带pseudo-ref的值。**此时 `a` 标签的无效。**。[示例](http://editor.weex.io/p/sunshl/Contribute/commit/b21e1133830b48767c6d00d712e415b2)
* 若多个嵌套节点上均包含 `itemclick` 事件，则只有最外层节点上的 `itemclick` 会被触发
-## 示例
+## Vue 示例
[示例](http://dotwe.org/vue/8a817e1acb46c2910caf1b53b8016a48)
diff --git a/docs/zh/docs/components/scroller.md b/docs/zh/docs/components/scroller.md
index ed1e287..649769a 100644
--- a/docs/zh/docs/components/scroller.md
+++ b/docs/zh/docs/components/scroller.md
@@ -104,7 +104,7 @@
- `options {Object}`：可选项，属性为：
- `offset {number}`：一个到其可见位置的偏移距离，默认是 0
-## 示例
+## Vue 示例
- [scrollerstart 事件](http://dotwe.org/vue/6e3c7fb21976e80c2959f330ddd1b26a)
- [设置 scroller 事件触发频率](http://dotwe.org/vue/d896b0896293ec55c209729fdfc7bff2)
@@ -119,3 +119,64 @@
- [聊天窗口](http://dotwe.org/vue/21d8b0a79c20e95139353d9cc8b634f5)，页面局部可滚动，底部输入框不可滚动。
<IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB11_g_n7voK1RjSZPfXXXPKFXa-264-439.gif" />
+
+## Rax 示例
+
+`rax-scrollview` 是 `<scroller>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal"
+import View from 'rax-view';
+import ScrollView from 'rax-scrollview';
+
+function Thumb() {
+ return (
+ <View style={styles.button}>
+ <View style={styles.box} />
+ </View>
+ );
+}
+
+let THUMBS = [];
+for (let i = 0; i < 20; i++) THUMBS.push(i);
+let createThumbRow = (val, i) => <Thumb key={i} />;
+
+function App () {
+ return (
+ <View style={{ ...styles.container, ...{ height: 500 } }}>
+ <ScrollView>
+ {THUMBS.map(createThumbRow)}
+ </ScrollView>
+ </View>
+ );
+}
+
+let styles = {
+ container: {
+ padding: 20,
+ borderStyle: 'solid',
+ borderColor: '#dddddd',
+ borderWidth: 1,
+ marginLeft: 20,
+ marginRight: 20,
+ marginBottom: 10,
+ },
+ button: {
+ margin: 7,
+ padding: 5,
+ alignItems: 'center',
+ backgroundColor: '#eaeaea',
+ borderRadius: 3,
+ },
+ box: {
+ width: 64,
+ height: 64,
+ }
+};
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-scrollview 文档](https://rax.js.org/docs/components/scrollview)
+
diff --git a/docs/zh/docs/components/slider.md b/docs/zh/docs/components/slider.md
index 1bbe1eb..6dc054e 100644
--- a/docs/zh/docs/components/slider.md
+++ b/docs/zh/docs/components/slider.md
@@ -30,7 +30,7 @@ Slider 组件用于在一个页面中展示多个图片，在前端这种效果
* **change** 当轮播索引改变时，触发该事件。该事件给前端的参数中含有 `index`表示当前切换到的序号。
* **scroll** 列表发生滚动时将会触发该事件。在参数中有 `offsetXRatio`，它表示当前图片偏移的比率，取值范围是 [-1, 1]。负值表示当前图片向左滑，正值表示向右划。比如 -0.2 表示当前图片向左滑，并且有 20% 的区域超出了容器边缘。
-## 示例
+## Vue 示例
```html
<template>
<div>
@@ -81,3 +81,48 @@ Slider 组件用于在一个页面中展示多个图片，在前端这种效果
* [滚动事件示例](http://dotwe.org/vue/00aff16c6c1c9e9c1209d2db70b94b24)
* [自动播放和indicator示例](http://dotwe.org/vue/7c9c0f5cc6e4571a962b8f0cf627fab3)
* [Ocean示例](http://dotwe.org/vue/c851d5fe09e54709a6128dbc5bf74a6e)
+
+## Rax 示例
+
+`rax-slider` 是 `<slider>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, Component, render, createRef } from 'rax';
+import View from 'rax-view';
+import Image from 'rax-image';
+import Slider from 'rax-slider';
+import Driver from 'driver-universal';
+
+const App = () => {
+ const handleChange = (idx) {
+ console.log('change to ', idx);
+ }
+
+ return (
+ <View>
+ <Slider
+ className="slider"
+ width="750"
+ height="500"
+ autoPlay
+ onChange={handleChange}
+ >
+ <View style={styles.itemWrap}>
+ <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png'}} />
+ </View>
+ <View style={styles.itemWrap}>
+ <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png'}} />
+ </View>
+ <View style={styles.itemWrap}>
+ <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png'}} />
+ </View>
+ </Slider>
+ </View>
+ );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-slider 文档](https://rax.js.org/docs/components/slider)
+
diff --git a/docs/zh/docs/components/text.md b/docs/zh/docs/components/text.md
index 55503d3..1ee769f 100644
--- a/docs/zh/docs/components/text.md
+++ b/docs/zh/docs/components/text.md
@@ -82,6 +82,27 @@ word-break 行为是不可预测的且与 Android ROM 强相关。事实上，wo
开发者可通过在意外换行处添加 `\uFEFF` 即 [ZERO WIDTH NO-BREAK SPACE](http://jkorpela.fi/chars/spaces.html) 以触发**强制不换行**，详细用法可参考[demo](http://dotwe.org/vue/88a4b46f0dc1d1f6d82c506f490029ce)。请注意这个方法**无法**保证在所有 Android ROM 上有效，一些 ROM 会忽略 *ZERO WIDTH NO-BREAK SPACE* 指令。
:::
-## 示例
+## Vue 示例
* [`<text>`的基本用法](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0)
+
+## Rax 示例
+
+`rax-text` 是 `<text>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from 'rax';
+import Driver from "driver-universal";
+import Text from 'rax-text';
+
+function App() {
+ return (
+ <Text>Text</Text>
+ );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-text 文档](https://rax.js.org/docs/components/text)
+
diff --git a/docs/zh/docs/components/textarea.md b/docs/zh/docs/components/textarea.md
index ca3bed7..d41ff74 100644
--- a/docs/zh/docs/components/textarea.md
+++ b/docs/zh/docs/components/textarea.md
@@ -50,7 +50,7 @@
* @param isShow: boolean, 显示或隐藏键盘。
* @param keyboardSize: 键盘的高度，以前端使用的样式单位返回。
-## 示例
+## Vue 示例
```html
<template>
@@ -117,3 +117,36 @@
* [示例](http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa)
* [事件示例](http://dotwe.org/vue/2ba8ebc4e6970e1e86725c3e80296e40)
* [绑定示例](http://dotwe.org/vue/d884b0c18891a05d653253c0f0a94bc1)
+
+## Rax 示例
+
+`rax-textinput` 是 `<textarea>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render } from "rax";
+import Driver from 'driver-universal';
+import TextInput from "rax-textinput";
+
+function App() {
+ return (
+ <View style={{margin: '20rpx'}}>
+ <TextInput
+ multiline={true}
+ numberOfLines={3}
+ style={{
+ height: '150rpx',
+ width: '600rpx',
+ borderWidth: '1rpx',
+ borderColor: '#dddddd',
+ borderStyle: 'solid'
+ }}
+ />
+ </View>
+ );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-textinput 文档](https://rax.js.org/docs/components/textinput)
+
diff --git a/docs/zh/docs/components/video.md b/docs/zh/docs/components/video.md
index c1f03c7..f85bb59 100644
--- a/docs/zh/docs/components/video.md
+++ b/docs/zh/docs/components/video.md
@@ -28,7 +28,7 @@ Video 组件用于在页面中嵌入视频内容。
* **finish** 当 playback 的状态是 Finished 时触发。
* **fail** 当 playback 状态是 Failed 时触发。
-# 示例
+# Vue 示例
```html
<template>
@@ -80,4 +80,27 @@ Video 组件用于在页面中嵌入视频内容。
```
* [示例](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197)
* [自动播放示例](http://dotwe.org/vue/342d32830f51f72df6acab21fb1c21bd)
-* [手动控制示例](http://dotwe.org/vue/7bdf54dce22def3d3850f65d95f5eac9)
\ No newline at end of file
+* [手动控制示例](http://dotwe.org/vue/7bdf54dce22def3d3850f65d95f5eac9)
+
+## Rax 示例
+
+`rax-video` 是 `<video>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, Component, render } from "rax";
+import Video from "rax-video";
+import Driver from "driver-universal";
+
+render(
+ <Video
+ style={{ width: '750rpx', height: '400rpx' }}
+ autoPlay
+ src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4"
+ />,
+ document.body,
+ { driver: Driver }
+);
+```
+
+[rax-video 文档](https://rax.js.org/docs/components/video)
+
diff --git a/docs/zh/docs/components/waterfall.md b/docs/zh/docs/components/waterfall.md
index 374aa92..a1e3ebd 100644
--- a/docs/zh/docs/components/waterfall.md
+++ b/docs/zh/docs/components/waterfall.md
@@ -60,7 +60,7 @@
- appear：用于监听子组件出现事件（一般绑定于子组件之上例如：监听最后一个元素出现，加载新的数据）
- disappear：用于监听子组件滑出屏幕事件（一般绑定于子组件之上）
-## 示例
+## Vue 示例
[体验示例](http://dotwe.org/vue/c2d4c7b54d92ac83bb2024ebbf3ccf92)
上述示例使用了4种子组件，同时点击不同的单元格，可体验 `<waterfall>` 不同属性间的区别。
@@ -71,3 +71,94 @@
<IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1iEk9nVzqK1RjSZFCXXbbxVXa-544-960.gif" />
+
+## Rax 示例
+
+`rax-waterfall` 是 `<waterfall>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, useState, useRef, render } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Driver from "driver-universal"
+import RefreshControl from 'rax-refreshcontrol';
+import Waterfall from 'rax-waterfall';
+
+// 数据需要指定高度
+const data = [
+ { height: 550, item: {} },
+ { height: 624, item: {} },
+ { height: 708, item: {} },
+ { height: 600, item: {} },
+ { height: 300, item: {} },
+ { height: 100, item: {} },
+ { height: 400, item: {} },
+ { height: 550, item: {} },
+ { height: 624, item: {} },
+ { height: 708, item: {} },
+ { height: 600, item: {} },
+ { height: 300, item: {} },
+ { height: 100, item: {} },
+ { height: 400, item: {} }
+];
+
+let App = (props) => {
+
+ let [refreshing, setRefreshing] = useState(false);
+ let handleRefresh = () => {
+ if (refreshing) {
+ return;
+ }
+ setRefreshing(true);
+ setTimeout(() => {
+ setRefreshing(false);
+ }, 500);
+ }
+ let loadMore = () => {
+ console.log('load more');
+ }
+
+ return (
+ <Waterfall
+ columnWidth={370}
+ columnCount={2}
+ columnGap={10}
+ dataSource={data}
+ renderHeader={() => {
+ return [
+ <RefreshControl
+ key="0"
+ refreshing={refreshing}
+ onRefresh={handleRefresh}>
+ <Text>RefreshControl</Text>
+ </RefreshControl>,
+ <View key="1" style={{
+ height: 100,
+ backgroundColor: '#efefef',
+ marginBottom: 10
+ }}><Text>Header Mod</Text></View>
+ ];
+ }}
+ renderFooter={() => {
+ return <View key="3" style={{width: 750, height: 100, backgroundColor: '#efefef', marginTop: 10}}><Text>Footer Mod</Text></View>;
+ }}
+ renderItem={(item, index) => {
+ return (
+ <View style={{
+ height: item.height,
+ backgroundColor: '#efefef',
+ marginBottom: 10
+ }}>
+ <Text>{index}</Text>
+ </View>
+ );
+ }}
+ onEndReached={loadMore} />
+ );
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-waterfall 文档](https://rax.js.org/docs/components/waterfall)
+
diff --git a/docs/zh/docs/components/web.md b/docs/zh/docs/components/web.md
index 4ff8120..3dc41cf 100644
--- a/docs/zh/docs/components/web.md
+++ b/docs/zh/docs/components/web.md
@@ -82,8 +82,32 @@
<style></style>
```
-## 示例
+## Vue 示例
* [体验示例](http://dotwe.org/vue/9f8a7be89a4ad881ff515145cc9306ea)
上述示例监听了 pagestart、pagefinish 及 error 事件，同时使用了 [webview module](../modules/webview.html) 提供的 API。
+
+## Rax 示例
+
+`rax-embed` 是 `<web>` 组件的上层封装，抹平了 Web 和 Weex 的展现
+
+```jsx
+import { createElement, render, Component } from 'rax';
+import Driver from 'driver-universal';
+import Embed from 'rax-embed';
+
+function App() {
+ const urlParam = {
+ paramOne:123,
+ paramTwo:456
+ };
+ return <Embed urlParam={urlParam} src={'http://taobao.com'}
+ useIframeInWeb={true} style={{ height: 750, width: 750 }} />
+}
+
+render(<App />, document.body, { driver: Driver });
+```
+
+[rax-embed 文档](https://rax.js.org/docs/components/embed)
+
diff --git a/docs/zh/guide/front-end-frameworks.md b/docs/zh/guide/front-end-frameworks.md
index b6e0df3..4f2d57c 100644
--- a/docs/zh/guide/front-end-frameworks.md
+++ b/docs/zh/guide/front-end-frameworks.md
@@ -81,3 +81,7 @@ Weex 从 [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0)（发
## Rax
Rax 是一个兼容 React 接口的前端框架，请参考 [Rax 的官方网站](https://alibaba.github.io/rax/) 来获得更多信息。
+
+::: tip
+关于在 Weex 中使用 Rax 的技巧请参阅： [《在 Weex 中使用 Rax》](./use-rax-in-weex.html)。
+:::
\ No newline at end of file
diff --git a/docs/zh/guide/images/vue-rax.png b/docs/zh/guide/images/vue-rax.png
index 1e6e57e..a748fd6 100644
Binary files a/docs/zh/guide/images/vue-rax.png and b/docs/zh/guide/images/vue-rax.png differ
diff --git a/docs/zh/guide/introduction.md b/docs/zh/guide/introduction.md
index f5b0ae0..b77cfe0 100644
--- a/docs/zh/guide/introduction.md
+++ b/docs/zh/guide/introduction.md
@@ -15,7 +15,7 @@ Weex 渲染引擎与 DSL 语法层是分开的，Weex 并不强依赖任何特
想初步了解 Weex 其实非常简单。
* 安装 [Weex Playground](https://weex.apache.org/zh/guide/playground.html). 在 Playground 里，你可以打开各种示例。
-* 访问 [Online Editor](http://dotwe.org/vue). 在这个网站上，你可以浏览、修改、新建各种基于 Vue.js 的[单页面]((https://vuejs.org/v2/guide/single-file-components.html))例子，并用 WeexPlayground 应用扫码查看实时效果。
+* 访问 [Online Editor](http://dotwe.org/vue). 在这个网站上，你可以浏览、修改、新建各种基于 Vue.js 的[单页面](https://vuejs.org/v2/guide/single-file-components.html)例子，并用 WeexPlayground 应用扫码查看实时效果。
::: tip
尽管 Weex Playground 是 Apache Weex 的一部分，但 Online Editor 不是。
diff --git a/docs/zh/guide/use-rax-in-weex.md b/docs/zh/guide/use-rax-in-weex.md
index a110a7c..8f2e735 100644
--- a/docs/zh/guide/use-rax-in-weex.md
+++ b/docs/zh/guide/use-rax-in-weex.md
@@ -1,3 +1,224 @@
# 在 Weex 中使用 Rax
> **Rax 是一个兼容 React 接口的前端框架，请访问 [Rax 的官方网站](https://alibaba.github.io/rax/) 了解更多信息。**
+
+[[toc]]
+
+在 WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) （发布于 2016 年 2 月 17 日）以及后续的版本中，集成了 v2 版本的 Vue.js。Vue 是一套构建用户界面的渐进式框架，详情请参阅其[官方网站](https://cn.vuejs.org/)。
+
+> 如果没有特别指示，文章中的 "Vue.js" 或者 "Vue" 都指的是 v2 版本的 Vue。
+
+## 什么是 Rax
+
+如果你习惯于 React 的书写方式，欢迎使用 Rax，Rax 是一款超轻量，高性能，易上手的前端解决方案。
+一次开发多端运行，同时支持 Weex Web 小程序等不同端。
+
+## 环境变量
+
+Weex 提供 WXEnvironment 用来获取 Weex 运行的环境变量，Rax 页面可以通过 WXEnvironment 访问。
+提供字段如下：
+
+* platform (String) Current running platform, could be "Android", "iOS" or "Web".
+* weexVersion (String) The version of Weex SDK.
+* appName (String) Mobile app name or browser name.
+* appVersion (String) The version of current app.
+* osName (String) The OS name, could be "Android" or "iOS".
+* osVersion (String) The version of current OS.
+* deviceModel (String) Mobile phone device model. (native only)
+* deviceWidth (Number) Screen resolution width.
+* deviceHeight (Number) Screen resolution height.
+
+Rax 环境中的全局变量 Weex 在 WeexSDK 0.15 版本之后提供
+
+## Weex Rax Framework
+
+Native 和 Web 天生就有很多差异，为了让开发者有更好的体验，大部分的差异是不需要让开发者去关心的。因此 Native 端通过 Framework 模拟出了大量 Web 端的标准全局 API。
+
+常用 API 包括
+
+
+| W3C API |||||
+| -- | -- | -- | -- | -- |
+| name | closed | atob | btoa | performance |
+| document | location | navigator | screen | devicePixelRatio |
+| fetch | setTimeout | clearTimeout | setInterval | clearInterval |
+| requestAnimationFrame | cancelAnimationFrame | alert | open | close |
+| postMessage | addEventListener | removeEventListener | dispatchEvent | onerror |
+| Promise | Symbol | Map | Set | WeakMap |
+| WeakSet | Headers | Response | Request | XMLHttpRequest |
+| URL | URLSearchParams | FontFace | WebSocket | Event |
+| CustomEvent | matchMedia | | | |
+
+其中部分实现依赖 Weex Module 能力
+
+* fetch 使用 @weex-module/stream
+* setTimeout 使用 @weex-module/timer
+* clearTimeout 使用 @weex-module/timer
+* setInterval 使用 @weex-module/timer
+* clearInterval 使用 @weex-module/timer
+* requestAnimationFrame 使用 @weex-module/timer
+* cancelAnimationFrame 使用 @weex-module/timer
+* alert 使用 @weex-module/modal
+* open 使用 @weex-module/navigator
+* close 使用 @weex-module/navigator
+* postMessage 使用 BroadcastChannel 能力
+* addEventListener 跨页面监听使用 BroadcastChannel 能力，页面内监听使用内部的 Emitter
+* onerror 使用 @weex-module/globalEvent
+
+模块规范
+| API | 描述 |
+| -- | -- |
+| define | 组件定义 |
+| require | 组件依赖，支持 Rax 组件与 Weex 原生模块，注意 Weex 模块需要以 @weex-module/ 开头 |
+
+其他 API
+
+| API | 描述 |
+| -- | -- |
+| `__weex_document__` | createInstanceContext 过程中创建的 Document 实例 |
+| `__weex_module_supports__` | weex.isRegisteredModule |
+| `__weex_tag_supports__` | weex.isRegisteredComponent |
+| `__weex_define__` | 组件定义 |
+| `__weex_require__` | 组件依赖，支持 Rax 组件与 Weex 原生模块，注意 Weex 模块需要以 |@weex-module/ 开头
+| `__weex_downgrade__` | 页面降级方法，依赖 @weex-module/instanceWrap |
+| `__weex_env__` | WXEnvironment |
+| `__weex_options__` | 创建 Instance 所传递的参数 |
+| `__weex_data__` | 创建 Instance 所传递的数据 |
+| `__weex_config__` | 同 __weex_options__ |
+
+## 样式支持
+
+Rax 样式在 Weex 端与 Weex 所提供能力相同，并无额外扩展样式。
+
+## 使用组件
+
+Rax 的基础组件内部实现抹平了各端的差异，在 Weex 端的实现是Weex 提供的基础组件。例如 rax-view 的实现是 div，rax-text 的实现是 text。
+
+Rax 基础组件会将所有属性向下透传，并对核心逻辑进行多端的兼容。
+示例：
+
+```jsx
+<list loadmoreoffset={...}>
+ ...
+</list>
+```
+
+Weex 组件与 Rax 混用
+
+```jsx
+<View>
+ <text>Hello Rax</text>
+</View>
+```
+
+## 使用 Weex 模块
+
+Rax 提供了多端兼容的 API [universal-api](https://rax.js.org/docs/api/introduce)。
+但在某些特殊场景下，如果向自己引用原生模块的方法，可以按照如下方式使用
+
+以 Weex Dom 模块为例
+
+```jsx
+let dom = require('@weex-module/dom');
+dom.scrollToElement(someNode, {
+ offset: 20,
+});
+```
+
+或
+
+```jsx
+let dom = __weex_require__('@weex-module/dom');
+dom.scrollToElement(someNode, {
+ offset: 20,
+});
+```
+
+## 页面降级
+
+Rax 页面降级可以使用 Weex Module @weex-module/instanceWrap，
+也可以使用更方便的辅助工具 @weex-project/downgrade
+
+Rax Framework 中也提供了全局的降级方法 `__weex_downgrade__` 方便开发者使用
+
+## 事件
+
+组件通用事件与 Weex 通用事件相同，Rax 中需要以 on 开头驼峰方式命名
+
+```jsx
+<View onClick={() => {}}>
+ ...
+</View>
+```
+
+页面事件，需要通过 setNativeProps API 手动向 body 节点绑定
+
+```jsx
+let bodyProps = {
+ onViewAppear: () => {},
+ onViewDisAppear: () => {}
+};
+let weexDocument = typeof __weex_document__ === 'object' ? __weex_document__ : typeof document === 'object' ? document : {};
+if (weexDocument && weexDocument.body) {
+ setNativeProps(findDOMNode(weexDocument.body), bodyProps);
+}
+```
+
+事件冒泡
+
+```jsx
+let bodyProps = {
+ bubble: true,
+};
+let weexDocument = typeof __weex_document__ === 'object' ? __weex_document__ : typeof document === 'object' ? document : {};
+if (weexDocument && weexDocument.body) {
+ setNativeProps(findDOMNode(weexDocument.body), bodyProps);
+}
+```
+
+阻止冒泡
+
+```jsx
+<View onClick={(event) => {
+ event.stopPropagation();
+}}>
+ ...
+</View>
+```
+
+## 事件通信
+
+Weex 提供了页面间通信的能力 BroadcastChannel（weex v0.9+）, Rax 页面中可以通过 Window 的全局方法进行通信。
+
+### 页面间通信
+
+页面 A 发送消息
+
+```jsx
+window.postMessage('{hello:1}', '*');
+```
+
+页面 B 接收消息
+
+```jsx
+window.addEventListener('message', (e) => {
+ console.log('data is', e.data);
+});
+```
+
+### 页面内消息广播
+
+页面内发送消息
+
+```jsx
+window.dispatchEvent(new CustomEvent('eventName', { detail: 1 }));
+```
+
+页面内接收消息
+
+```jsx
+window.addEventListener('eventName', (event) => {
+ const {detail} = event;
+ // 业务逻辑
+});
+```