Merge pull request #274 from alibaba/doc

Doc
alibaba · May 16, 2016 · 7a9bb14 · 7a9bb14
2 parents aad8d9e + 07848b1
commit 7a9bb14
Show file tree

Hide file tree

Showing 17 changed files with 444 additions and 81 deletions.
diff --git a/doc/README.md b/doc/README.md
@@ -4,6 +4,6 @@ Table of Contents
 * [Tutorial](./tutorial.md)
 * [Guide](./guide.md)
 * [References](./references/main.md)
-* [Samples](./demo/main.md)
+* [Examples](./demo/main.md)
 * [Service & Tools](./tools/main.md)
 
diff --git a/doc/SUMMARY.md b/doc/SUMMARY.md
@@ -29,6 +29,7 @@
     * [Built-in Components](/components/main.md)
         * [Common Attributes](/references/common-attrs.md)
         * [Common Style](/references/common-style.md)
+            * [Text Style](/references/text-style.md)
         * [Common Event](/references/common-event.md)
         * [Special Element](/components/special-element.md)
         * [&lt;div&gt;](/components/div.md)
@@ -42,22 +43,26 @@
         * [&lt;slider&gt;](/components/slider.md)
             * [&lt;indicator&gt;](/components/indicator.md)
         * [&lt;video&gt;](/components/video.md)
+        * [&lt;a&gt;](/components/a.md)
+        * [&lt;web&gt;](/components/web.md)
+        * [&lt;wxc-tabbar&gt;](/components/wxc-tabbar.md)
     * [Built-in Modules](/modules/README.md)
         * [dom](/modules/dom.md)
         * [steam](/modules/stream.md)
         * [modal](/modules/modal.md)
         * [animation](/modules/animation.md)
+        * [webview](/modules/webview.md)
     * Low-level Specs
         * [JS Bundle Format](/specs/js-bundle-format.md)
         * [JS Framework APIs](/specs/js-framework-apis.md)
         * [Virtual DOM APIs](/specs/virtual-dom-apis.md)
-* Demo
+* [Examples](demo/main.md)
     * [Hello World](demo/hello-world.md)
     * [Modal](demo/modal.md)
     * [List](demo/list.md)
     * [Slider](demo/slider.md)
     * [Animation](demo/animation.md)
-    * [More examples](https://github.com/alibaba/weex/tree/master/examples)
+    * [More](https://github.com/alibaba/weex/tree/dev/examples)
 
 * [Service & Tools](/tools/main.md)
     * [CLI](/tools/cli.md)

diff --git a/doc/components/README.md b/doc/components/README.md
@@ -23,3 +23,6 @@ Before see all built-in components, let's have a look at the common things about
 * [&lt;slider&gt;](./slider.md)
     * [&lt;indicator&gt;](./indicator.md)
 * [&lt;video&gt;](./video.md)
+* [&lt;web&gt;](./web.md)
+* [&lt;wxc-navpage&gt;](./wxc-navpage.md)
+* [&lt;wxc-navbar&gt;](./wxc-navbar.md)
diff --git a/doc/components/a.md b/doc/components/a.md
@@ -0,0 +1,22 @@
+# &lt;a&gt;
+###Summary
+&lt;a&gt; defines a hyperlink to a page in the web. Its purpose and syntax is very simliar to [&lt;a&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) in HTML5.
+
+### Child Components
+
+This type of component supports all kinds of weex component as its child components except for its own kind.
+
+### Attributes
+##### href
+href attributes defines the URL of the hyperlink.
+
+### Styles
+**common styles**: check out the [common styles](../references/common-attrs.md)
+
+### Events
+**common events**: check out the [common events](../references/common-event.md)
+
+### Examples
+    <a href="http://g.tbcdn.cn/ali-wireless-h5/res/0.0.16/hello.js">
+       <text>Click me to see how 'A' element opens a new world.</text>
+    </a>
diff --git a/doc/components/image.md b/doc/components/image.md
@@ -22,6 +22,7 @@ Other attributes please check out the [common attributes](../references/common-a
 
 - `width`: &lt;length&gt; the width of the component. This style should be specified.
 - `height`: &lt;length&gt; the height of the component. This style should be specifed.
+- `resize`: &lt;string&gt; the 'ScaleType' of the component. The default value is ``stretch``, if this attribute is not specified. Possible values are ``cover``, ``contain``, each of which has the same meaning with w3c standard.
 
 **common styles**: check out the [common styles](../references/common-attrs.md)
 

diff --git a/doc/components/list.md b/doc/components/list.md
@@ -8,7 +8,9 @@ A fixed height container which has multiple child components (cells) arranged in
 
 ### Child Components
 
-`cell` is a available candidate to be used as a child component for `list`.
+* `cell` is a available candidate to be used as a child component for `list`.
+* `refresh` component can be used inside list to add pull to refresh functionality.
+* `loading` component can be used inside list to add loading view at the bottom of scroller.
 
 ### Attributes
 
@@ -28,36 +30,17 @@ Other attributes please check out the [common attributes](../references/common-a
 ### Events
 
 - `loadmore`: if the list scrolls to bottom, this event will be triggered immediately. You can load the next page of items in this event handler.
-- `onappear`: if the list's items scroll to visible area, this event will be triggered when list is stopped . You can do something in this event handler.
-- `ondisappear`: if the list's items scroll to invisible area, this event will be triggered when list is stopped . You can do something in this event handler.
+- `onappear`: if the list's cells scroll to visible area, this event will be triggered when list is stopped. You can do something in this event handler.
+- `ondisappear`: if the list's cells scroll to invisible area, this event will be triggered when list is stopped. You can do something in this event handler.
 
 
 **common events**: check out the [common events](../references/common-event.md)
 
 - support `click` event. Check out [common events](../references/common-event.md)
 - support `appear` / `disappear` event. Check out [common events](../references/common-event.md)
+- support `refresh` event .  If a refresh component is inside scroller, this event will be triggered when the scroller is swiping down.
+- support `loading` event .  If a loading component is inside scroller, this event will be triggered when user scrolling to the bottom.
 
 ### Example
 
-```
-<template>
-  <list>
-    <cell repeat="{{list}}">
-      <text>{{name}}: ${{price}}</text>
-    </cell>
-  </list>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      list: [
-        {name: '...', price: 100},
-        {name: '...', price: 500},
-        {name: '...', price: 1.5},
-        ...
-      ]
-    }
-  }
-</script>
-```
+see [list-basic demo](https://github.com/alibaba/weex/blob/example/examples/component/list/list-basic.we)
diff --git a/doc/components/web.md b/doc/components/web.md
@@ -0,0 +1,48 @@
+# &lt;web&gt;
+
+### Summary
+
+Use &lt;web&gt; component to display any web content in the weex page. The `src` attribute can be used to specify a special web source. You also could use `webview` module to control the operation of web such as goBack、goForward and reload, see [webview module](../modules/webview.md).
+
+
+### Child Components
+
+This component supports no child components.
+
+### Attributes
+
+- `src`: &lt;string&gt; the attribute value specifies a special website you want to display.
+
+Other attributes please check out the [common attributes](../references/common-attrs.md).
+
+### Styles
+
+- `width`: &lt;length&gt; the width of the component. This style should be specified.
+- `height`: &lt;length&gt; the height of the component. This style should be specifed.
+
+**common styles**: check out the [common styles](../references/common-attrs.md)
+
+- support flexbox related styles
+- support box model related styles
+- support ``position`` related styles
+
+### Events
+
+- `pagestart`: sent after the web component starts loading a frame. 
+- `pagefinish`: sent after the web component finishes loading a frame.
+- `error`: sent if the web component failed to load a frame. 
+
+
+*common events**: check out the [common events](../references/common-event.md)
+
+- support `click` event. Check out [common events](../references/common-event.md)
+- support `appear` / `disappear` event. Check out [common events](../references/common-event.md)
+
+### Example
+
+```js
+<div>
+  <web style="width=...; height=...;" src="..." 	onpagestart="pagestart" onpagefinish="pagefinish" 	onerror="error">
+  </web>
+</div>
+```
diff --git a/doc/components/wxc-navpage.md b/doc/components/wxc-navpage.md
@@ -0,0 +1,69 @@
+# &lt;wxc-navpage&gt;
+
+### Summary
+
+The "wxc-navpage" tag implements a specialized component that contains a navbar at the top of the window and an embed content page. You can customize the navbar as you like. In addition, you can use `navigator` module to control the page jump, see [navigator module](../modules/navigator.md).
+
+### Child Components
+
+This type of component supports all kinds of weex component as its child components.
+
+### Attributes
+
+- `height`: &lt;length&gt; The height of the navbar. Default value is 88. 
+- `background-color`: &lt;color&gt;The backgroudColor of the navbar. Default value is `white`.
+- `title`: &lt;string&gt; The title of the navbar. 
+- `title-color`: &lt;color&gt;The color of the navbar title. Default value is `black`.
+- `left-item-title`: &lt;string&gt; The title of the leftItem.
+-  `left-item-color`: &lt;color&gt; The color of the leftItem title. Default value is `black`.
+- `right-item-title`: &lt;string&gt; The title of the rightItem.
+-  `right-item-color`: &lt;color&gt; The color of the rightItem title. Default value is `black`. 
+- `left-item-src`: &lt;string&gt; The imageURL of the leftItem you want to set.
+- `right-item-src`: &lt;string&gt; The imageURL of the rightItem you want to set.
+
+Other attributes please check out the [common attributes](../references/common-attrs.md).
+
+### Styles
+
+**common styles**: check out the [common styles](../references/common-attrs.md)
+
+- support flexbox related styles
+- support box model related styles
+- support ``position`` related styles
+- support ``opacity``, ``background-color`` etc.
+
+### Events
+
+- `naviBar.leftItem.click`: triggered when the leftItem of navbar is clicked. You need to register the observer in ready or create block.
+- `naviBar.rightItem.click`: triggered when the rightItem of navbar is clicked. You need to register the observer in ready or create block.
+
+**common events**: check out the [common events](../references/common-event.md)
+
+- support `click` event. Check out [common events](../references/common-event.md)
+- support `appear` / `disappear` event. Check out [common events](../references/common-event.md)
+
+### Example
+
+```js
+<template>
+  <wxc-navpage height={{...}} background-color="..." title="..." title-color="..." left-item-title="..." left-item-color="..." right-item-src="...">
+      <content> ...</content>
+  </wxc-navpage>
+</template>
+<script>
+  require('weex-components');
+  module.exports = {
+    created: function() {
+        this.$on('naviBar.rightItem.click',function(e){
+           //handle your click event here.
+        });
+
+        this.$on('naviBar.leftItem.click',function(e){
+          //handle your click event here. 
+        });
+    }
+  }
+</script>
+```
+
+
diff --git a/doc/components/wxc-tabbar.md b/doc/components/wxc-tabbar.md
@@ -0,0 +1,86 @@
+# &lt;wxc-tabbar&gt;
+
+### Summary
+
+The "wxc-tabbar" tag implements a specialized component that corresponds to the radio-style selection. It displays tabs at the bottom of the window for selecting between the different modes and for displaying different weex pages for that mode.
+
+### Child Components
+
+This component supports no child components.
+
+### Attributes
+
+- `tab-items`: This attribute contains an array of tabitem objects, each of which corresponds to a tab displayed by the tabbar. The order of the items in this attribute corresponds to the order of the items onscreen. You can customize the appearance of tabbar by setting tabitem. The properties of each tabitem describe as follows.
+  + index: &lt;integer&gt; an integer that you can use to identify item objects.
+  + title: &lt;string&gt; The item’s title. If null, a title is not displayed.
+  + titleColor: &lt;color&gt;The item’s titleColor. Default is black color.  
+  + image: &lt;string&gt;The icon displayed when the tabitem is unselected. If null, the icon is not displayed.
+  + selectedImage:  &lt;string&gt;The icon displayed when the tabitem is selected. If null, the icon is not displayed.
+  + src: &lt;string&gt;The  custom weex page to display.
+  + icon: &lt;string&gt;This is a special attribute. Be careful, You need to set the property even if it is empty. 
+
+Other attributes please check out the [common attributes](../references/common-attrs.md).
+
+### Styles
+
+**common styles**: check out [common styles for components](../references/common-style.md)
+
+- support flexbox related styles
+- support box model related styles
+- support ``position`` related styles
+- support ``opacity``, ``background-color`` etc.
+
+### Events
+
+- `tabBar.onClick`: triggered when the tabitem is selected. You need to register the observer in ready or create block.
+
+### Example
+
+`require('weex-components')` should be used with webpack, see [example](https://github.com/alibaba/weex/blob/example/examples/component/tabbar/tabbar-demo.we) for more detail.
+
+```html
+<template>
+  <div style="flex-direction: column;">
+    <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar>
+  </div>
+</template>
+
+<script>
+  require('weex-components');
+  module.exports = {
+    data: {
+      tabItems: [
+        {
+          index: 0,
+          title: '...',
+          titleColor: '#000000',
+          icon: '',
+          image: '...',
+          selectedImage: '...',
+          src: '...',
+          visibility: 'visible',
+        },
+        {
+          index: 1,
+          title: '...',
+          titleColor: '#000000',
+          icon: '',
+          image: '...',
+          selectedImage: '...',
+          src: '...',
+          visibility: 'hidden',
+        }
+      ],
+    },
+    methods: {
+      ready: function (e) {
+        var vm = this;
+        vm.$on('tabBar.onClick',function(e){
+          var index = e.detail.index;
+       	  ....
+        });
+      },
+    }
+  }
+</script>
+```
diff --git a/doc/demo/main.md b/doc/demo/main.md
@@ -1,3 +1,3 @@
-# Samples
+# Examples
 
 * [Hello World](./hello-world.md)
diff --git a/doc/faq.md b/doc/faq.md
@@ -2,4 +2,10 @@
 
 ## Command errors in Windows
 
-Please install [Git for Windows](https://git-scm.com/download/win) and run commands in git-bash.
+Please install [Git for Windows](https://git-scm.com/download/win) first, see [For Windows](https://github.com/alibaba/weex/tree/dev#for-windows) for more information.
+
+
+## Gradle errors in Android Studio
+
+Downloading `license-gradle-plugin.jar` may trigger errors, like `Connection reset` or `peer not authenticated`.
+Maybe a network problem, try a proxy or VPN.