Skip to content

Commit 7a9bb14

Browse files
atomtongatomtong
committed
Merge pull request alibaba#274 from alibaba/doc
Doc
2 parents aad8d9e + 07848b1 commit 7a9bb14

17 files changed

+444
-81
lines changed

‎doc/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ Table of Contents
44
* [Tutorial](./tutorial.md)
55
* [Guide](./guide.md)
66
* [References](./references/main.md)
7-
* [Samples](./demo/main.md)
7+
* [Examples](./demo/main.md)
88
* [Service & Tools](./tools/main.md)
99

‎doc/SUMMARY.md

+7-2
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
* [Built-in Components](/components/main.md)
3030
* [Common Attributes](/references/common-attrs.md)
3131
* [Common Style](/references/common-style.md)
32+
* [Text Style](/references/text-style.md)
3233
* [Common Event](/references/common-event.md)
3334
* [Special Element](/components/special-element.md)
3435
* [<div>](/components/div.md)
@@ -42,22 +43,26 @@
4243
* [<slider>](/components/slider.md)
4344
* [<indicator>](/components/indicator.md)
4445
* [<video>](/components/video.md)
46+
* [<a>](/components/a.md)
47+
* [<web>](/components/web.md)
48+
* [<wxc-tabbar>](/components/wxc-tabbar.md)
4549
* [Built-in Modules](/modules/README.md)
4650
* [dom](/modules/dom.md)
4751
* [steam](/modules/stream.md)
4852
* [modal](/modules/modal.md)
4953
* [animation](/modules/animation.md)
54+
* [webview](/modules/webview.md)
5055
* Low-level Specs
5156
* [JS Bundle Format](/specs/js-bundle-format.md)
5257
* [JS Framework APIs](/specs/js-framework-apis.md)
5358
* [Virtual DOM APIs](/specs/virtual-dom-apis.md)
54-
* Demo
59+
* [Examples](demo/main.md)
5560
* [Hello World](demo/hello-world.md)
5661
* [Modal](demo/modal.md)
5762
* [List](demo/list.md)
5863
* [Slider](demo/slider.md)
5964
* [Animation](demo/animation.md)
60-
* [More examples](https://github.com/alibaba/weex/tree/master/examples)
65+
* [More](https://github.com/alibaba/weex/tree/dev/examples)
6166

6267
* [Service & Tools](/tools/main.md)
6368
* [CLI](/tools/cli.md)

‎doc/components/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,6 @@ Before see all built-in components, let's have a look at the common things about
2323
* [<slider>](./slider.md)
2424
* [<indicator>](./indicator.md)
2525
* [<video>](./video.md)
26+
* [<web>](./web.md)
27+
* [<wxc-navpage>](./wxc-navpage.md)
28+
* [<wxc-navbar>](./wxc-navbar.md)

‎doc/components/a.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# <a>
2+
###Summary
3+
<a> defines a hyperlink to a page in the web. Its purpose and syntax is very simliar to [<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) in HTML5.
4+
5+
### Child Components
6+
7+
This type of component supports all kinds of weex component as its child components except for its own kind.
8+
9+
### Attributes
10+
##### href
11+
href attributes defines the URL of the hyperlink.
12+
13+
### Styles
14+
**common styles**: check out the [common styles](../references/common-attrs.md)
15+
16+
### Events
17+
**common events**: check out the [common events](../references/common-event.md)
18+
19+
### Examples
20+
<a href="http://g.tbcdn.cn/ali-wireless-h5/res/0.0.16/hello.js">
21+
<text>Click me to see how 'A' element opens a new world.</text>
22+
</a>

‎doc/components/image.md

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ Other attributes please check out the [common attributes](../references/common-a
2222

2323
- `width`: &lt;length&gt; the width of the component. This style should be specified.
2424
- `height`: &lt;length&gt; the height of the component. This style should be specifed.
25+
- `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.
2526

2627
**common styles**: check out the [common styles](../references/common-attrs.md)
2728

‎doc/components/list.md

+8-25
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ A fixed height container which has multiple child components (cells) arranged in
88

99
### Child Components
1010

11-
`cell` is a available candidate to be used as a child component for `list`.
11+
* `cell` is a available candidate to be used as a child component for `list`.
12+
* `refresh` component can be used inside list to add pull to refresh functionality.
13+
* `loading` component can be used inside list to add loading view at the bottom of scroller.
1214

1315
### Attributes
1416

@@ -28,36 +30,17 @@ Other attributes please check out the [common attributes](../references/common-a
2830
### Events
2931

3032
- `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.
31-
- `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.
32-
- `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.
33+
- `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.
34+
- `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.
3335

3436

3537
**common events**: check out the [common events](../references/common-event.md)
3638

3739
- support `click` event. Check out [common events](../references/common-event.md)
3840
- support `appear` / `disappear` event. Check out [common events](../references/common-event.md)
41+
- support `refresh` event . If a refresh component is inside scroller, this event will be triggered when the scroller is swiping down.
42+
- support `loading` event . If a loading component is inside scroller, this event will be triggered when user scrolling to the bottom.
3943

4044
### Example
4145

42-
```
43-
<template>
44-
<list>
45-
<cell repeat="{{list}}">
46-
<text>{{name}}: ${{price}}</text>
47-
</cell>
48-
</list>
49-
</template>
50-
51-
<script>
52-
module.exports = {
53-
data: {
54-
list: [
55-
{name: '...', price: 100},
56-
{name: '...', price: 500},
57-
{name: '...', price: 1.5},
58-
...
59-
]
60-
}
61-
}
62-
</script>
63-
```
46+
see [list-basic demo](https://github.com/alibaba/weex/blob/example/examples/component/list/list-basic.we)

‎doc/components/web.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# &lt;web&gt;
2+
3+
### Summary
4+
5+
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).
6+
7+
8+
### Child Components
9+
10+
This component supports no child components.
11+
12+
### Attributes
13+
14+
- `src`: &lt;string&gt; the attribute value specifies a special website you want to display.
15+
16+
Other attributes please check out the [common attributes](../references/common-attrs.md).
17+
18+
### Styles
19+
20+
- `width`: &lt;length&gt; the width of the component. This style should be specified.
21+
- `height`: &lt;length&gt; the height of the component. This style should be specifed.
22+
23+
**common styles**: check out the [common styles](../references/common-attrs.md)
24+
25+
- support flexbox related styles
26+
- support box model related styles
27+
- support ``position`` related styles
28+
29+
### Events
30+
31+
- `pagestart`: sent after the web component starts loading a frame.
32+
- `pagefinish`: sent after the web component finishes loading a frame.
33+
- `error`: sent if the web component failed to load a frame.
34+
35+
36+
*common events**: check out the [common events](../references/common-event.md)
37+
38+
- support `click` event. Check out [common events](../references/common-event.md)
39+
- support `appear` / `disappear` event. Check out [common events](../references/common-event.md)
40+
41+
### Example
42+
43+
```js
44+
<div>
45+
<web style="width=...; height=...;" src="..." onpagestart="pagestart" onpagefinish="pagefinish" onerror="error">
46+
</web>
47+
</div>
48+
```

‎doc/components/wxc-navpage.md

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# &lt;wxc-navpage&gt;
2+
3+
### Summary
4+
5+
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).
6+
7+
### Child Components
8+
9+
This type of component supports all kinds of weex component as its child components.
10+
11+
### Attributes
12+
13+
- `height`: &lt;length&gt; The height of the navbar. Default value is 88.
14+
- `background-color`: &lt;color&gt;The backgroudColor of the navbar. Default value is `white`.
15+
- `title`: &lt;string&gt; The title of the navbar.
16+
- `title-color`: &lt;color&gt;The color of the navbar title. Default value is `black`.
17+
- `left-item-title`: &lt;string&gt; The title of the leftItem.
18+
- `left-item-color`: &lt;color&gt; The color of the leftItem title. Default value is `black`.
19+
- `right-item-title`: &lt;string&gt; The title of the rightItem.
20+
- `right-item-color`: &lt;color&gt; The color of the rightItem title. Default value is `black`.
21+
- `left-item-src`: &lt;string&gt; The imageURL of the leftItem you want to set.
22+
- `right-item-src`: &lt;string&gt; The imageURL of the rightItem you want to set.
23+
24+
Other attributes please check out the [common attributes](../references/common-attrs.md).
25+
26+
### Styles
27+
28+
**common styles**: check out the [common styles](../references/common-attrs.md)
29+
30+
- support flexbox related styles
31+
- support box model related styles
32+
- support ``position`` related styles
33+
- support ``opacity``, ``background-color`` etc.
34+
35+
### Events
36+
37+
- `naviBar.leftItem.click`: triggered when the leftItem of navbar is clicked. You need to register the observer in ready or create block.
38+
- `naviBar.rightItem.click`: triggered when the rightItem of navbar is clicked. You need to register the observer in ready or create block.
39+
40+
**common events**: check out the [common events](../references/common-event.md)
41+
42+
- support `click` event. Check out [common events](../references/common-event.md)
43+
- support `appear` / `disappear` event. Check out [common events](../references/common-event.md)
44+
45+
### Example
46+
47+
```js
48+
<template>
49+
<wxc-navpage height={{...}} background-color="..." title="..." title-color="..." left-item-title="..." left-item-color="..." right-item-src="...">
50+
<content> ...</content>
51+
</wxc-navpage>
52+
</template>
53+
<script>
54+
require('weex-components');
55+
module.exports = {
56+
created: function() {
57+
this.$on('naviBar.rightItem.click',function(e){
58+
//handle your click event here.
59+
});
60+
61+
this.$on('naviBar.leftItem.click',function(e){
62+
//handle your click event here.
63+
});
64+
}
65+
}
66+
</script>
67+
```
68+
69+

‎doc/components/wxc-tabbar.md

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# &lt;wxc-tabbar&gt;
2+
3+
### Summary
4+
5+
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.
6+
7+
### Child Components
8+
9+
This component supports no child components.
10+
11+
### Attributes
12+
13+
- `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.
14+
+ index: &lt;integer&gt; an integer that you can use to identify item objects.
15+
+ title: &lt;string&gt; The item’s title. If null, a title is not displayed.
16+
+ titleColor: &lt;color&gt;The item’s titleColor. Default is black color.
17+
+ image: &lt;string&gt;The icon displayed when the tabitem is unselected. If null, the icon is not displayed.
18+
+ selectedImage: &lt;string&gt;The icon displayed when the tabitem is selected. If null, the icon is not displayed.
19+
+ src: &lt;string&gt;The custom weex page to display.
20+
+ icon: &lt;string&gt;This is a special attribute. Be careful, You need to set the property even if it is empty.
21+
22+
Other attributes please check out the [common attributes](../references/common-attrs.md).
23+
24+
### Styles
25+
26+
**common styles**: check out [common styles for components](../references/common-style.md)
27+
28+
- support flexbox related styles
29+
- support box model related styles
30+
- support ``position`` related styles
31+
- support ``opacity``, ``background-color`` etc.
32+
33+
### Events
34+
35+
- `tabBar.onClick`: triggered when the tabitem is selected. You need to register the observer in ready or create block.
36+
37+
### Example
38+
39+
`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.
40+
41+
```html
42+
<template>
43+
<div style="flex-direction: column;">
44+
<wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar>
45+
</div>
46+
</template>
47+
48+
<script>
49+
require('weex-components');
50+
module.exports = {
51+
data: {
52+
tabItems: [
53+
{
54+
index: 0,
55+
title: '...',
56+
titleColor: '#000000',
57+
icon: '',
58+
image: '...',
59+
selectedImage: '...',
60+
src: '...',
61+
visibility: 'visible',
62+
},
63+
{
64+
index: 1,
65+
title: '...',
66+
titleColor: '#000000',
67+
icon: '',
68+
image: '...',
69+
selectedImage: '...',
70+
src: '...',
71+
visibility: 'hidden',
72+
}
73+
],
74+
},
75+
methods: {
76+
ready: function (e) {
77+
var vm = this;
78+
vm.$on('tabBar.onClick',function(e){
79+
var index = e.detail.index;
80+
....
81+
});
82+
},
83+
}
84+
}
85+
</script>
86+
```

‎doc/demo/main.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
# Samples
1+
# Examples
22

33
* [Hello World](./hello-world.md)

‎doc/faq.md

+7-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,10 @@
22

33
## Command errors in Windows
44

5-
Please install [Git for Windows](https://git-scm.com/download/win) and run commands in git-bash.
5+
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.
6+
7+
8+
## Gradle errors in Android Studio
9+
10+
Downloading `license-gradle-plugin.jar` may trigger errors, like `Connection reset` or `peer not authenticated`.
11+
Maybe a network problem, try a proxy or VPN.

0 commit comments

Comments
 (0)