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: 文档修复
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
--- a/docs/.vuepress/public/vue-rax.png
+++ b/docs/.vuepress/public/vue-rax.png
Binary files 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 @@
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 @@
```
[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 @@
* **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 @@
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 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 @@
* 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 @@
- [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 @@
[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 @@
</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 @@
* 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 @@
-## 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 @@
* 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 @@
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 @@
```
[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 @@
* **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 @@
* [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 @@
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 @@
* @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 @@
* [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 @@
* **finish** Triggered when playback state is Finished.
* **fail** Triggered when playback state is Failed.
-# Example
+# Vue Example
```html
<template>
@@ -81,3 +81,26 @@
* [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 @@
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 @@
- `<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 @@
## 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
--- a/docs/guide/images/vue-rax.png
+++ b/docs/guide/images/vue-rax.png
Binary files 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 @@
## 属性
-* **keep-scroll-position** boolean. 控制当 Cell 被添加到列表中时，列表的滚动位置是否要保持不变。
* **insert-animation** string, cell 的插入动画。当前只支持 `none` 和 `default`。
* **delete-animation** string, cell 的删除动画。当前只支持 `none` 和 `default`。
@@ -30,8 +29,23 @@
* **通用事件**. 参见[通用事件](../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 @@
参见[完整示例](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 @@
目前不支持 this.$el(id).value = '' 这种方式改写 input value。只支持在 `<input>` 组件的 input、change 事件中改写。
:::
-## 示例
+## Vue 示例
- [input标签使用及事件处理 demo](http://dotwe.org/vue/c2c9a853e5184d8ade57d1d93432f31f)
@@ -138,3 +138,24 @@
* [其他示例集合](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 @@
* **change** 当轮播索引改变时，触发该事件。该事件给前端的参数中含有 `index`表示当前切换到的序号。
* **scroll** 列表发生滚动时将会触发该事件。在参数中有 `offsetXRatio`，它表示当前图片偏移的比率，取值范围是 [-1, 1]。负值表示当前图片向左滑，正值表示向右划。比如 -0.2 表示当前图片向左滑，并且有 20% 的区域超出了容器边缘。
-## 示例
+## Vue 示例
```html
<template>
<div>
@@ -81,3 +81,48 @@
* [滚动事件示例](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 @@
开发者可通过在意外换行处添加 `\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 @@
* **finish** 当 playback 的状态是 Finished 时触发。
* **fail** 当 playback 状态是 Failed 时触发。
-# 示例
+# Vue 示例
```html
<template>
@@ -80,4 +80,27 @@
```
* [示例](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 @@
## 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
--- a/docs/zh/guide/images/vue-rax.png
+++ b/docs/zh/guide/images/vue-rax.png
Binary files 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 其实非常简单。
* 安装 [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;
+ // 业务逻辑
+});
+```
