http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/component-defs.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/component-defs.md b/doc/source/v-0.10/references/component-defs.md deleted file mode 100644 index baa6584..0000000 --- a/doc/source/v-0.10/references/component-defs.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Component Definition -type: references -order: 1.2 -version: 0.10 ---- - -# Component Definition - -A component definition is a set of options to describe a component. It's always assigned to `module.exports` in `<script>`. - -```javascript -module.exports = { - // a set of options here -} -``` - -## Data & Methods options - -```javascript -module.exports = { - data: function () { - return {x: 1, y: 2} - }, - methods: { - doThis: function () {...}, - doThat: function () {...} - }, - ... -} -``` - -The `data` option is a function that return a observable data object for this ViewModel. -The `methods` option is a map which contains all ViewModel methods. - -Each `data` or `methods` property will be proxied to the ViewModel instance. So you can read and write data with `this.x`, also you can call methods with `this.doThis(...)`. - -A whole example: - -```html -<template> - <div style="width: {{w}}; height: {{h}}; background-color: red;" onclick="update"></div> -</template> -<script> - module.exports = { - data: function () { - return {w: 750, h: 200} - }, - methods: { - update: function (e) { - this.h += 200 - } - } - } -</script> -``` - -## Events options - -```javascript -module.exports = { - data: ..., - methods: { - foo: function () { - ... - this.$emit('customtype1', data) - } - }, - events: { - customtype1: function (e) { - console.log(e.type, e.detail) - } - }, - ... -} -``` - -The `events` options could allow you to add custom event listeners when ViewModel created. Then it will listen these type of events and handle them by the function-type value. - -The first argument is a event object which contains event data in `e.detail`. - -## Lifecycle options - -```javascript -module.exports = { - data: ..., - methods: ..., - init: function () { - console.log('ViewModel constructor begins') - }, - created: function () { - console.log('Data observation finished') - }, - ready: function () { - console.log('Virtual DOM finished') - }, - ... -} -``` - -Weex ViewModel now supports these lifecycle hook functions which could be write as component options: - -* `init`: fired at the beginning of a ViewModel constructor call. -* `created`: fired when ViewModel observes default data but not compile the template. -* `ready`: fired when ViewModel observes default data and compiles the template to generate virtual DOM finally. - -**Note: If you want to use the function in `methods`, `events` or lifecycle options as a parameter, please make sure the context is correct as expect. For example:** - -```javascript -module.exports = { - data: function () { - return {x: 1, y: 2} - }, - ready: function () { - // `undefined` - // because the context changed - this.foo(this.bar) - // `1` - // because the context bound correct - this.foo(this.bar.bind(this)) - }, - methods: { - foo: function (fn) { - return fn() - }, - bar: function () { - return this.x - } - } -} -```
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/a.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/a.md b/doc/source/v-0.10/references/components/a.md deleted file mode 100644 index e1677bf..0000000 --- a/doc/source/v-0.10/references/components/a.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: <a> -type: references -order: 2.1 -version: 0.10 ---- - -# <a> - -`a` defines a hyperlink to a page in the web. Its purpose and syntax is very similar to [<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) in HTML5. - -## Child Components - -This type of component supports all kinds of weex component as it's child components except for its own kind. - -## Attributes - -* href: href attributes defines the URL of the hyperlink. - -## Styles: - -### common styles - -Check out the [common styles](../common-style.html) - -## Events - -### common events - -Check out the [common events](../common-event.html) - -### Notes - -We can't guarantee the order of execution between onclick function and href. we recommend that do not use the click event in `a`. - -## Examples - -```html -<template> - <div> - <a href="http://h5.m.taobao.com";> - <text>Click me to see how 'A' element opens a new world.</text> - </a> - </div> -</template> -``` - -[Try it](http://dotwe.org/d99f6eb55aa501c836a195ec824cada0) - -Use [Weex Playground](https://alibaba.github.io/weex/download.html) App to Scan the QR image and view the example for  'a'. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/cell.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/cell.md b/doc/source/v-0.10/references/components/cell.md deleted file mode 100644 index 34d1703..0000000 --- a/doc/source/v-0.10/references/components/cell.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: <cell> -type: references -order: 2.6 -version: 0.10 ---- - -# <cell> - -### Summary - -This component must be used as a subcomponent of a [`list`](./list.html) component, which is for the performance optimizing during scrolling. - -### Child Components - -This type of component supports all kinds of weex component as its child components. - -### Attributes - -There is no specific attribute for this component other than the [common attributes](../common-attrs.html). - -**Notes:** you can't give `<cell>` a `flex` value. Width of `<cell>` is equal to the width of its parent component `<list>`, and you don't need to specify its height. - -### Styles - -**common styles**: check out the [common styles](../common-attrs.html) - -- support flexbox related styles -- support box model related styles -- support ``position`` related styles -- support ``opacity``, ``background-color`` etc. - -### Events - -**common events**: check out the [common events](../common-event.html) - -- support `click` event. Check out [common events](../common-event.html) -- support `appear` / `disappear` event. Check out [common events](../common-event.html) - -### Example - -please refer to [List](./list.html) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/div.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/div.md b/doc/source/v-0.10/references/components/div.md deleted file mode 100644 index 1e75523..0000000 --- a/doc/source/v-0.10/references/components/div.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: <div> -type: references -order: 2.2 -version: 0.10 ---- - -# <div> - -### Summary - -The most fundamental component which is a contianer to wrap any other components. It supports all the common styles, attributes and layout of flexbox. - -alias: `<container>` (deprecated) - -### Child Components - -This type of component supports all kinds of weex component as its child components including its own kind. - -### Attributes - -There is no specific attribute for this component other than the [common attributes](../common-attrs.html). - -### Styles - -**common styles**: check out the [common styles](../common-attrs.html) - -- support flexbox related styles -- support box model related styles -- support ``position`` related styles -- support ``opacity``, ``background-color`` etc. - -### Events - -**common events**: check out the [common events](../common-event.html) - -- support `click` event. Check out [common events](../common-event.html) -- support `appear` / `disappear` event. Check out [common events](../common-event.html) - -### Examples - -```html -<div> - <image src="..."></image> - <text>...</text> -</div> -``` - http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/image.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/image.md b/doc/source/v-0.10/references/components/image.md deleted file mode 100644 index 3eae206..0000000 --- a/doc/source/v-0.10/references/components/image.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: <image> -type: references -order: 2.3 -version: 0.10 ---- - -# <image> - -### Summary - -`image` tag is used to render a specified picture, and it shouldn't contain any child component. You can use `img` as alias. - -**Notes:** the styles of `width` and `height` should be specified, otherwise it won't work. - -alias: `<img>` - -### Child Components - -This component supports no child components. - -### Attributes - -- `src`: <string> image source url -- `resize`: <span class="api-version">v0.5+</span> <string> the 'ScaleType' of the component. The default value is ``stretch``, if this attribute is not specified. Possible values are ``cover``, ``contain``, each of which has the same meaning with w3c standard. - -Other attributes please check out the [common attributes](../common-attrs.html). - -### Styles - -- `width`: <length> the width of the component. This style should be specified. -- `height`: <length> the height of the component. This style should be specifed. - -**common styles**: check out the [common styles](../common-attrs.html) - -- support flexbox related styles -- support box model related styles -- support ``position`` related styles -- support ``opacity``, ``background-color`` etc. - -### Events - -**common events**: check out the [common events](../common-event.html) - -- support `click` event. Check out [common events](../common-event.html) -- support `appear` / `disappear` event. Check out [common events](../common-event.html) - -### Examples - -```html -<div> - <image src="..." ></image> - <text>...</text> -</div> -``` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/index.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/index.md b/doc/source/v-0.10/references/components/index.md deleted file mode 100644 index 66e211c..0000000 --- a/doc/source/v-0.10/references/components/index.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Build-in Components -type: references -order: 2 -version: 0.10 ---- - -# Build-in Components - -- [<a>](./a.html) -- [<indicator>](./indicator.html) -- [<switch>](./switch.html) -- [<text>](./text.html) -- [<textarea>](./textarea.html) -- [<video>](./video.html) -- [<web>](./web.html) -- [<div>](./div.html) -- [<image>](./image.html) -- [<input>](./input.html) -- [<list>](./list.html) -- [<cell>](./cell.html) -- [<refresh> & <loading>](./refresh.html) -- [<scroller>](./scroller.html) -- [<slider>](./slider.html) \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/indicator.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/indicator.md b/doc/source/v-0.10/references/components/indicator.md deleted file mode 100644 index b06dc95..0000000 --- a/doc/source/v-0.10/references/components/indicator.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: <indicator> -type: references -order: 2.10 -version: 0.10 ---- - -# <indicator> - -### Summary - -This component must be used as a subcomponent of a [`slider`](./slider.html) component. - -### Child Components - -This component supports no child components. - -### Attributes - -There is no specific attribute for this component other than the [common attributes](../common-attrs.html). - -### Styles - -- `item-color`: <colors> This style attribute sets the normal item color using either a named color or a color specified in the hexadecimal #RRGGBB format. -- `item-selectedColor`: <colors> This style attribute sets the selected item color using either a named color or a color specified in the hexadecimal #RRGGBB format. -- `item-size`: <length> The size of the indicator elements, which is an float attribute. - -**common styles**: check out the [common styles](../common-attrs.html) - -- support flexbox related styles -- support box model related styles -- support ``position`` related styles - -**Note:** There are some specific details about the style `width` and `height` on this component: the position of indicator will not only depend on the `top`, `left`, `bottom` and `right`, but also depend on the value of `width` and `height`. Imagine there is a virtual container outside the indicator, and it inherit the `width` and `height` of the indicator. The `top`, `left`, `right` and `bottom` will always take effect on this container, not the indicator points themselves, and the indicator points will be positioned in the center of it. And also you should know the default `width` and `height` is the parent slider's `width` and `height`. - -**Note:** `background-color` is not recommended to apply on this component, and you should use `item-color` and `item-selectedColor` instead. - -### Events - -**common events**: check out the [common events](../common-event.html) - -- support `click` event. Check out [common events](../common-event.html) -- support `appear` / `disappear` event. Check out [common events](../common-event.html) - -### Example - -```html -<template> - <div> - <slider class="slider"> - <div class="slider-pages" repeat="{{itemList}}"> - <image class="img" src="{{pictureUrl}}"></image> - <text class="title">{{title}}</text> - </div> - - <indicator class="indicator"></indicator> - </slider> - </div> -</template> - -<style> - .img {width: 150; height: 150;} - .title {flex: 1; color: #ff0000; font-size: 48; font-weight: bold; background-color: #eeeeee;} - .slider { - flex-direction: row; - margin: 18; - width: 714; - height: 230; - } - .slider-pages { - flex-direction: row; - width: 714; - height: 200; - } - .indicator { - width:714; - height:200; - position:absolute; - top:1; - left:1; - item-color: red; - item-selectedColor: blue; - item-size: 20; - } -</style> - -<script> - module.exports = { - data: { - itemList: [ - {itemId: '520421163634', title: 'item1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'}, - {itemId: '522076777462', title: 'item2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'}, - {itemId: '522076777462', title: 'iten3', pictureUrl: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'} - ] - } - } -</script> -``` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/input.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/input.md b/doc/source/v-0.10/references/components/input.md deleted file mode 100644 index feaac53..0000000 --- a/doc/source/v-0.10/references/components/input.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: <input> -type: references -order: 2.4 -version: 0.10 ---- - -# input - -The weex builtin component `input` is used to create input controls to receive the user's input characters. How a `input` component works varies considerably depending on the value of its `type` attribute, such as `text`, `password`, `url`, `email`, `tel` etc. - -**Notes:** does not support the common-event `click`. Please listen to the `input` or `change` event instead. - -## Child Components - -This component supports no child components. - -## Attributes - -* `type`: the type of controls to display. The default value is `text`, if this attribute is not specified. Possible values are `text`, `password`, `tel`, `email`, `url` etc. each of which has the same meaning with W3C standard. - -* `value`: the value(text) of the control. - -* `placeholder`: a hint to the user of which can be entered to the control. The placeholder text must have no carriage returns or line-feeds. - -* `disabled`: a boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. - -* `autofocus`: a boolean attribute lets you specify that a form control should have input focus when the page loads. - -* `maxlength`: <span class="api-version">v0.7+</span> a number value to specify maxlength of input. - -Other attributes please check out the [common attributes](../common-attrs.html). - -## Styles - -* placeholder-color: the color of placeholder. Default value is '#999999'. - -* text styles: checkout [text styles](../text-style.html) - - * support 'color' style. - * support 'font-size' style. - * support 'font-style' style. - * support 'font-weight' style. - * support 'text-align' style. - -### common styles -check out [common styles for components](../common-style.html) - -* support flexbox related styles. -* support box model related styles. -* support 'position' related styles. -* support 'opacity', 'background-color' etc. - -## Events - -* input: the value of an input character changes. -* change: the change event is fired when a change to the component's value is commited by the user. It always come after a 'blur' event. -* focus: a component has received focus. -* blur: a component has lost focus. - -### common events -check out [common events](../common-event.html) - -* support 'appear' / 'disappear' event. - -### Notes -does not support the common-event 'click'. Please listen to the 'input' or 'change' event instead. - -### Parameters of events' object - -* for 'input' and 'change' events:'value': the value of the component who dispatched this event.'timestamp': the time stamp of the event. -* for 'focus' and 'blur' events:'timestamp': the time stamp of the event. - -## Example - -```html -<template> - <div> - <input - type="text" - placeholder="Input Something" - class="input" - autofocus="true" - value="" - onchange="onchange" - oninput="oninput" - /> - <text>oninput: {{txtInput}}</text> - <text>onchange: {{txtChange}}</text> - </div> -</template> - -<style> - .input { - font-size: 60; - height: 80; - width: 400; - } -</style> - -<script> - require('weex-components'); - module.exports = { - data: { - txtInput: '', - txtChange: '' - }, - methods: { - onchange: function(event) { - this.txtChange = event.value; - console.log('onchange', event.value); - }, - oninput: function(event) { - this.txtInput = event.value; - console.log('oninput', event.value); - } - } - }; -</script> -``` - -[Try it](http://dotwe.org/e1b18eb89facb4e2a5467ee4bebd9be6) - -Use [Weex Playground](https://alibaba.github.io/weex/download.html) App to Scan the QR image and view the example for  'input'. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/list.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/list.md b/doc/source/v-0.10/references/components/list.md deleted file mode 100644 index 3b4745e..0000000 --- a/doc/source/v-0.10/references/components/list.md +++ /dev/null @@ -1,292 +0,0 @@ ---- -title: <list> -type: references -order: 2.5 -version: 0.10 ---- - -# List - -<span class="weex-version">v0.6.1+</span> - -The List component, which inherits from Scroller component, is a core component, and it provides the most popular features for using a list of items. - -It can provide excellent experience and performance while still maintaining smooth scroll and low memory usage. - -**example** - -```html -<template> - <list> - <cell onappear="onappear($event, $index)" ondisappear="ondisappear($event, $index)" class="row" repeat="{{staffs}}" index="{{$index}}"> - <div class="item"> - <text>{{name}}</text> - </div> - </cell> - </list> -</template> - -<style> - .row { - width: 750; - } - .item { - justify-content: center; - border-bottom-width: 2; - border-bottom-color: #c0c0c0; - height: 100; - padding:20; - } -</style> - -<script> - module.exports = { - data: { - staffs:[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}] - }, - methods:{ - onappear: function (e, index) { - console.log('+++++', index) - console.log(this.staffs[index].name + ' is appearing...'); - }, - ondisappear:function (e, index) { - console.log('+++++', index) - } - } - } -</script> - -``` - -[try it](http://dotwe.org/15d58cfbca9b6a72c89c9a13ad1f6155) - -### Child Components - -Notes: The list now supports the following child components: cell, header, refresh, loading and fixed-position components. Other kinds of components will not be guaranteed to be displayed correctly. - -* cell 0.6.1 defines the attributes and behavior of the cells that appear in list. -* header 0.6.1 sticks to the top when it reaches the top of the screen. -* refresh 0.6.1 used inside list to add pull-down-to-refresh functionality. -* loading 0.6.1 used inside list to add pull-up-to-load-more functionality. - - -### Attributes - -* show-scrollbar: true/false whether show the scroll bar or not, default value is true -* scroll-direction: <string> define scroll direction of component, horizontal or vertical -* loadmoreoffset : <number> default value is 0. The loadmore event will be triggered when the list is loadmoreoffset left to reach the bottom of the list view. e.g. a list has total content length of 1000, and the loadmoreoffset is set to 400, the loadmore event will be triggered when 600 has beed scrolled and there is less than 400 left. -* loadmoreretry : <number> default value 0ï¼whether to reset loadmore related UI when loadmore failed, will be deprecated in further release. - -Please checkout [Scroller Component Attributes](./scroller.html) to have a look at the inherited attributes from direct parent. - -Other attributes please check out the [common attributes](../common-attrs.html). - -### Styles - -common styles: check out [common styles for components](../common-style.html) - -* support flexbox related styles -* support box model related styles -* support position related styles -* support opacity, background-color etc. - -### Events - -onloadmore 0.5 used with loadmoreoffset attribute. if the view has less than loadmoreoffset to scroll down, the onloadmore event will be triggered. - -common events: check out the [common events](../common-event.html) - -* support onclick event. Check out [common events](../common-event.html) -* support onappear / ondisappear event. Check out [common events](../common-event.html) - - -### API - -All cells or cell's subcomponents in list support the scrollToElement API in [dom module](../modules/dom.html) - -#### Difference between loading child component and onloadmore event - -loading is a child component that can response to the onloading event, and this event can only be triggered when the scroller/list has been scrolled down to the bottom. -onloadmore is an event that will be triggered when the rest of the scroller/list is less than loadmoreoffset long. - - -* [scroller example](http://dotwe.org/85fd3988eefa24f058b7da7966e56203) -* [list example](http://dotwe.org/62f895249014dde26cc0725c8005e42c) - -### Restrictions - -Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions. -For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal. - -### Example - -```html -<template> - <div class="wrapper"> - <list class="list"> - <header class="header"> - <text class="title">Search Results</text> - </header> - <refresh style="width: 750; padding: 30;" onrefresh="refreshData" display="{{refreshDisplay}}"> - <text class="text"> â Pull to refresh </text> - <loading-indicator class="indicator"></loading-indicator> - </refresh> - <cell class="row" repeat="item in items" id="item-{{$index}}"> - <div> - <text class="item">Repo name: {{item.full_name}}</text> - </div> - <div> - <text class="item">Repo star: {{item.stargazers_count}}</text> - </div> - </cell> - <loading onloading="loadingData" style="width: 750; padding: 30;" display="{{loadingDisplay}}"> - <text class="text">{{loadingText}}</text> - </loading> - </list> - <div class="up" onclick="goToTop"> - <img class="img" src="https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png";></img> - </div> - </div> -</template> - -<style> -.wrapper { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} -.list{ - background-color: #ffffff; - flex: 1; -} -.header { - height: 80; - align-items: center; - justify-content: center; - background-color: #efefef; - border-bottom-color: #eeeeee; - border-bottom-width: 2; - border-bottom-style: solid; -} -.title { - text-align: center; -} -.text { - text-align: center; -} -.row { - padding: 20; - border-bottom-color: #eeeeee; - border-bottom-width: 2; - border-bottom-style: solid; -} -.up { - width: 70; - height: 70; - position: fixed; - right: 20; - bottom: 20; -} -.img { - width: 70; - height: 70; -} -</style> - -<script> -var dom = require('@weex-module/dom') || {} -var stream = require('@weex-module/stream') || {} -var modal = require('@weex-module/modal') || {} - -var SEARCH_URL = 'https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc' - -module.exports = { - data: { - isLoaded: true, - page: 1, - loadingDisplay: 'hide', - refreshDisplay: 'hide', - loadingText: 'Loading...', - items:[] - }, - created: function () { - var url = SEARCH_URL + '&page=' + this.page - - this.renderData(url) - - this.page++ - }, - methods: { - renderData: function (url) { - var self = this - - stream.fetch({ - method: 'GET', - url: url, - type:'json' - }, function(res) { - self.refreshDisplay = 'hide' - self.loadingDisplay = 'hide' - - try { - var results = res.data.items || [] - - if (Array.isArray(results)) { - for(var i = 0; i < results.length; i++) { - self.items.push(results[i]) - } - } - - self.isLoaded = true - } catch(e) {} - },function(res){ - - }) - }, - loadingData: function (e) { - var url = SEARCH_URL + '&page=' + this.page - var self = this - - if (self.isLoaded === false) return - - self.loadingDisplay = 'show' - - if (self.page <=10 ) { - self.renderData(url) - self.page++ - } else { - self.loadingDisplay = 'hide' - self.loadingText = 'NO MORE!' - } - }, - goToTop: function (e) { - dom.scrollToElement(this.$el('item-0'), { - offset: -100 - }) - }, - refreshData: function (e) { - var url = SEARCH_URL + '&page=1' - - if (this.isLoaded === false) return - - this.refreshDisplay = 'show' - - modal.toast({ - 'message': 'Refreshing...', - 'duration': 1 - }) - - this.items = [] - this.page = 1 - this.renderData(url) - - this.refreshDisplay = 'hide' - } - } -} -</script> -``` - -[Try it](http://dotwe.org/ed524ade679b0fa96e980600c53ea5ce) \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/refresh-loading.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/refresh-loading.md b/doc/source/v-0.10/references/components/refresh-loading.md deleted file mode 100644 index 8b1d610..0000000 --- a/doc/source/v-0.10/references/components/refresh-loading.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: <refresh> & <loading> -type: references -order: 2.7 -version: 0.10 ---- - -# refresh & loading - -<span class="weex-version">v0.6.1+</span> - -## Loading Components - -To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component. - - -**example** - -```html -`<template> - <list> - <header> - <div class="center"> - <text style="text-align:center">I am the header</text> - </div> - </header> - <loading onloading="onloading" display="{{loadingDisplay}}" style="width:750;flex-direction: row;justify-content: center;"> - <loading-indicator style="height:160;width:160;color:#3192e1"></loading-indicator> - </loading> - <cell onappear="onappear($event, $index)" ondisappear="ondisappear($event, $index)" class="row" repeat="{{staffs}}" index="{{$index}}"> - <div class="item"> - <text>{{name}}</text> - </div> - </cell> - </list> -</template> - -<style> - .row { - width: 750; - } - .item { - justify-content: center; - border-bottom-width: 2; - border-bottom-color: #c0c0c0; - height: 100; - padding:20; - } - .center { - border-bottom-width: 2; - border-bottom-color: #cccccc; - height: 100; - padding:20; - background-color:#FFFFFF; - justify-content: center; - } -</style> - -<script> - module.exports = { - data: { - staffs:[], - loadingDisplay: 'show', - loadingText: 'pull up to load more', - refreshText: 'pull down to refresh' - }, - created:function() { - this.refreshDisplay='show' - this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}]; - }, - methods:{ - onappear: function (e, index) { - // console.log('+++++', index); - // console.log(this.staffs[index].name + ' is appearing...'); - }, - ondisappear:function (e, index) { - // console.log('+++++', index); - }, - onloading:function(e){ - console.log('onloading...'); - this.staffs.push({name:'onloading'}) - } - } - } -</script> - -``` - -[try it](http://weex.alibaba-inc.com/raw/html5/a34523fee395aa68018d65f0fb622310.js) - -### Child Components - -Any other components, like the text and img components, can be put inside the refresh component. And there is a special component named loading-indicator used only inside the refresh or the loading components. - -* loading-indicator is a child component implemented with default animation effect for the refresh component. -[example](http://weex.alibaba-inc.com/playground/a34523fee395aa68018d65f0fb622310) - -### Attributes - -* display has value of show or hide. - -Other attributes please check out the [common attributes](../common-attrs.html). - - -### Styles -common styles: check out [common styles for components](../common-style.html) - -### Events - -* onloading triggered when loading - - -#### Restrictions -* refresh/loading does not support remove action, Weex 0.9 will fix it. -* refresh/loading despite setting with display='hide', the refresh/loading view will still appear when scrolling due to known issues. it can be fixed with a another display='hide' when the refresh/loading should be hidden. -* refresh/loading can only be hidden or displayed with an attribute display with value of show or hide. And there should be a statement of display='hide' when display='show' shows up in an event function, or your scroller may not response to user inputs. - -## Refresh Components - -To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component. - -```html -<template> - <scroller onloadmore="onloadmore" loadmoreoffset="1000"> - <refresh onrefresh="onrefresh" display="{{refreshDisplay}}"> - <text id="refreshText">{{refreshText}}</text> - </refresh> - <div repeat="{{v in items}}"> - <text style="font-size: 40; color: #000000">{{v.item}}</text> - </div> - <loading onloading="onloading" display="{{loadingDisplay}}"> - <text id="loadingText">{{loadingText}}</text> - </loading> - </scroller> -</template> -<script> - module.exports = { - data: { - refreshDisplay: 'show', - loadingDisplay: 'show', - loadingText: 'pull up to load more', - refreshText: 'pull down to refresh', - items: [] - }, - created: function () { - for (var i = 0; i < 30; i++) { - this.items.push({'item': 'test data' + i}); - } - }, - methods: { - onrefresh: function () { - var vm = this; - vm.refreshDisplay = 'show' - if (vm.items.length > 50) { - vm.refreshText = "no more data!" - vm.refreshDisplay = 'hide' - return; - } - var len = vm.items.length; - for (var i = len; i < (len + 20); i++) { - vm.items.unshift({'item': 'test data ' + i}); - } - vm.refreshDisplay = 'hide' - }, - onloading: function () { - var vm = this; - vm.loadingDisplay = 'show' - if (vm.items.length > 30) { - vm.loadingText = "no more data!" - vm.loadingDisplay = 'hide' - return; - } - - var len = vm.items.length; - for (var i = len; i < (len + 20); i++) { - vm.items.push({'item': 'test data ' + i}); - } - vm.loadingDisplay = 'hide' - }, - onloadmore:function(){ - console.log("into--[onloadmore]") - } - } - } -</script> -``` - -[try it](http://dotwe.org/242add915e41d307f2fa6f423278425a) - -### Child Components - -Any other components, like the text and img components, can be put inside the refresh component. And there is a special component named loading-indicator used only inside the refresh or the loading components. - -* loading-indicator is a child component implemented with default animation effect for the refresh component. -[example](http://dotwe.org/e65a2cb0abfcdbbabda6778064837a92) - -### Attributes -* display has value of show or hide, default value is show. - -Other attributes please check out the [common attributes](../common-attrs.html). - - -### Styles -common styles: check out [common styles for components](../common-style.html) - -### Events -* onrefresh triggered when the scroller has been pulled down -* onpullingdown available on Android. triggered when the scroller has been pulled down. you can get dy, headerHeight, maxHeight from onpullingdowns event object. [example](http://dotwe.org/10ee6bd59ebe173f0f578a4eb8bac6f1) - -**example** - -```html -<template> - <list> - <header> - <div class="center"> - <text style="text-align:center">I am the header</text> - </div> - </header> - <refresh onpullingdown='onpullingdown' onrefresh="onrefresh" display="{{refreshDisplay}}" style="width:750;flex-direction: row;justify-content: center;"> - <loading-indicator style="height:160;width:160;color:#3192e1"></loading-indicator> - </refresh> - <cell onappear="onappear" ondisappear="ondisappear" class="row" repeat="{{staffs}}" index="{{$index}}"> - <div class="item"> - <text>{{name}}</text> - </div> - </cell> - </list> -</template> - -<style> - .row { - width: 750; - } - .item { - justify-content: center; - border-bottom-width: 2; - border-bottom-color: #c0c0c0; - height: 100; - padding:20; - } - .center { - border-bottom-width: 2; - border-bottom-color: #cccccc; - height: 100; - padding:20; - background-color:#FFFFFF; - justify-content: center; - } -</style> - -<script> - module.exports = { - data: { - staffs:[], - refreshDisplay: 'show', - loadingDisplay: 'show', - loadingText: 'pull up to load more', - refreshText: 'pull down to refresh' - }, - created:function() { - this.refreshDisplay='show' - this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}]; - }, - methods:{ - onappear: function (e) { - var index = e.target.attr.index - // console.log(this.staffs[index].name + ' is appearing...'); - }, - ondisappear:function (e) { - }, - onrefresh:function(e){ - this.refreshDisplay='show'; - // this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'}]; - this.refreshDisplay='hide' - // console.log(this.refreshDisplay); - }, - onpullingdown:function(e){ - console.log('onpullingdown triggered.'); - console.log('dy:'+e.dy); - console.log('headerHeight:'+e.headerHeight); - console.log('maxHeight:'+e.maxHeight); - } - } - } -</script> - -``` - -[try it ](http://dotwe.org/10ee6bd59ebe173f0f578a4eb8bac6f1) - - -### Restrictions - -* refresh/loading does not support remove action, may support in Weex 0.9. -* refresh/loading despite setting with display='hide', the refresh/loading view will still appear when scrolling due to known issues. it can be fixed with a another display='hide' when the refresh/loading should be hidden. -* refresh/loading can only be hidden or displayed with an attribute display with value of show or hide. And there should be a statement of display='hide' when display='show' shows up in an event function, or your scroller may not response to user inputs. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/scroller.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/scroller.md b/doc/source/v-0.10/references/components/scroller.md deleted file mode 100644 index 3197ab8..0000000 --- a/doc/source/v-0.10/references/components/scroller.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: <scroller> -type: references -order: 2.8 -version: 0.10 ---- - -# <scroller> -<span class="weex-version">v0.6.1+</span> - -A scroller is a component in vertical direction which can have multiple child components in one column. If total height of its child components exceed the height of the scroller, the whole child components will be scrollable. - -Notes: A <scroller> can be used as a root element or a embed element. The scroll direction of this component is column, and it can't be changed. - - -**example** - -```html -<template> - <scroller onloadmore="onloadmore" loadmoreoffset="100"> - <div repeat="{{v in items}}"> - <text style="font-size: 40; color: #000000">{{v.item}}</text> - </div> - </scroller> -</template> -<script> - module.exports = { - data: { - items: [], - triggered:false - }, - created: function () { - for (var i = 0; i < 50; i++) { - this.items.push({'item': 'test data' + i}); - } - }, - methods: { - onloadmore:function(){ - if(!this.triggered){ - for (var i = 100; i >= 50; i--) { - this.items.push({'item':'onloadmore triggered' + i}); - } - } - this.triggered=true; - } - } - } -</script> -``` - -[try it](http://dotwe.org/acf155122b9457211165680b01fae1c2) - -## Child Components - -Scroller supports all kinds of components, such as div, text, etc. -And there are two special components that can only be used inside scroller component. - -* refresh 0.6.1 used inside list to add pull-down-to-refresh functionality. -* loading 0.6.1 used inside list to add pull-up-to-load-more functionality. - - -## Attributes - -* show-scrollbar: true/false whether show the scroll bar or not, default value is true -* scroll-direction: <string> define scroll direction of component, horizontal or vertical -* loadmoreoffset : <number> default value is 0. The loadmore event will be triggered when the list is loadmoreoffset left to reach the bottom of the list view. e.g. a list has total content length of 1000, and the loadmoreoffset is set to 400, the loadmore event will be triggered when 600 has beed scrolled and there is less than 400 left. -* loadmoreretry : <number> default value 0ï¼whether to reset loadmore related UI when loadmore failed, will be deprecated in further release. - -**example** - -```html -<template> - <scroller onloadmore="onloadmore" loadmoreoffset="100"> - <div repeat="{{v in items}}"> - <text style="font-size: 40; color: #000000">{{v.item}}</text> - </div> - </scroller> -</template> -<script> -module.exports = { - data: { - items: [], - triggered:false - }, - created: function () { - for (var i = 0; i < 50; i++) { - this.items.push({'item': 'test data' + i}); - } - }, - methods: { - onloadmore:function(){ - if(!this.triggered){ - for (var i = 100; i >= 50; i--) { - this.items.push({'item':'onloadmore triggered' + i}); - } - } - this.triggered=true; - } - } -} -</script> -``` - -[try it](http://dotwe.org/acf155122b9457211165680b01fae1c2) - - -Please checkout [Scroller Component Attributes]() to have a look at the inherited attributes from direct parent. - -Other attributes please check out the [common attributes](../common-attrs.html). - -## Styles - -common styles: check out [common styles for components](../common-style.html) - -* support flexbox related styles -* support box model related styles -* support position related styles -* support opacity, background-color etc. - - -## Events - -onloadmore used with loadmoreoffset attribute. if the view has less than loadmoreoffset to scroll down, the onloadmore event will be triggered. - -common events: check out the [common events](../common-event.html) - -* support onclick event. Check out [common events](../common-event.html) -* support onappear / ondisappear event. Check out [common events](../common-event.html) - - - -## Restrictions - -Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions. -For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal. - http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/slider.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/slider.md b/doc/source/v-0.10/references/components/slider.md deleted file mode 100644 index b1a537f..0000000 --- a/doc/source/v-0.10/references/components/slider.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: <slider> -type: references -order: 2.9 -version: 0.10 ---- - -# <slider> - -## Summary - -A slide's player to show slides (mostly as pictures) one page by another. The default interval between two slides is 3 seconds. - -## Child Components - -It supports all kinds of weex components as its slides, especially the `indicator` component which can be used only as a child component of `slider`. - -## Attributes - -- `auto-play`: <boolean> `true` | `false`. This value determines whether the slides plays automatically after the page rendering finished. The default value is `false`. -- `interval`: <number> millisecond. This value determines time interval for each page displayed in slider. -- `index`: <number> . This value determines the index of current shown slide. The default value is `0`. - -Other attributes please check out the [common attributes](../references/common-attrs.html). - -## Styles - -**common styles**: check out [common styles for components](../references/common-style.html) - -- support flexbox related styles -- support box model related styles -- support ``position`` related styles -- support ``opacity``, ``background-color`` etc. - -## Events - -- `change`: triggerd when the slide's index is changed. The event object contains the attribute of `index`, which is the index number of the currently shown slide. - -**common events**: check out the [common events](../references/common-event.html) - -- support `click` event. Check out [common events](../references/common-event.html) -- support `appear` / `disappear` event. Check out [common events](../references/common-event.html) - -### Example - -```html -<template> - <div> - <slider class="slider" interval="3000" auto-play="true"> - <div class="slider-pages" repeat="item in itemList"> - <image class="img" src="{{item.pictureUrl}}"></image> - <text class="title">{{item.title}}</text> - </div> - <indicator class="indicator"></indicator> - </slider> - </div> -</template> - -<style> - .img { - width: 714; - height: 150; - } - .title { - position: absolute; - top: 20; - left: 20; - color: #ff0000; - font-size: 48; - font-weight: bold; - background-color: #eeeeee; - } - .slider { - flex-direction: row; - margin: 18; - width: 714; - height: 230; - } - .slider-pages { - flex-direction: row; - width: 714; - height: 200; - } - .indicator { - width:714; - height:200; - position:absolute; - top:1; - left:1; - item-color: red; - item-selectedColor: blue; - item-size: 20; - } -</style> - -<script> - module.exports = { - data: { - itemList: [ - {itemId: '520421163634', title: 'item1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'}, - {itemId: '522076777462', title: 'item2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'}, - {itemId: '522076777462', title: 'iten3', pictureUrl: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'} - ] - } - } -</script> -``` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/switch.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/switch.md b/doc/source/v-0.10/references/components/switch.md deleted file mode 100644 index 441da7b..0000000 --- a/doc/source/v-0.10/references/components/switch.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: <switch> -type: references -order: 2.11 -version: 0.10 ---- - -# <switch> - -<span class="weex-version">v0.6.1+</span> - -The weex builtin component switch is used to create and manage an IOS styled On/Off buttons, for example, the Airplane mode button in the Settings app is a switch button. - -**example** - -```html -<template> - <div> - <text>muted:</text> - <switch checked="true" onclick='onclick' onchange='onchange' ondisappear='ondisappear' onappear='onappear'></switch> -</div> -</template> - -<script> - module.exports ={ - methods:{ - onclick:function(e){ - console.log('onclick:' + e.timestamp); - }, - onchange:function(e){ - console.log('onchage, value:' + e.value); - }, - ondisappear:function(e){ - console.log('ondisappear, value:' + e.value); - }, - onappear:function(e){ - console.log('onappear, value:' + e.value); - }, - } - } -</script> -``` - -[try it](http://dotwe.org/7306d24f4f677b6d9935dbd00e3aa981) - -## Child Components - -There are no child components for the switch component. - -## Attributes - -* checked <boolean> true|false, default value is false, indicating whether the button is on or not. -* disabled <boolean> true|false, default value is false, indicating whether the button is enable or not. - -Other attributes please check out the [common attributes](../common-attrs.html). - -## Styles -Notes: There are several style properties that you mustn't use on this component. And here are all the invalid properties: - -* width -* height -* min-width -* min-height -* margin and margin-xxs -* padding and padding-xxs -* border and border-xxs - -Notes: Specially the width and height related properties is not configurable and the size of this component is fixed to 100x60 (for the design width 750px). - -common styles: check out [common styles for components](../common-style.html) - -## Events - -* onappear / ondisappear event. check out [common events](../common-event.html) -* onclick: check out [common events](../common-event.html) -* onchange: check out [common events](../common-event.html) - -## Parameters of events' object for onchange event: - -* value: the value of the component who dispatched this event, which is the boolean value true or false. -* timestamp: the time stamp of the event. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/text.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/text.md b/doc/source/v-0.10/references/components/text.md deleted file mode 100644 index 308fd4a..0000000 --- a/doc/source/v-0.10/references/components/text.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: <text> -type: references -order: 2.12 -version: 0.10 ---- - -# <text> - -The weex builtin component 'text' is used to render text with specified style rule. <text> tag can contain text value only. You can use variable interpolation in the text content with the mark `{% raw %}{{}}{% endraw %}`. - -## Child Components - -This component supports no child components. - -## Attributes - -* value(string): text value of this component. This is equal to the content of 'text'. - -### example - -``` -var textComponent = this.$el("textid"); -this.text = textComponent.attr.value; -``` - -## Styles - -* lines: specify the text lines. Default value is `0` for unlimited. -* text styles: check out [text styles](../text-style.html) - - * support 'color' style. - * support 'font-size' style. iOS: default vlaue `32`. Android: platform specify. HTML5: default value `32`. - * support 'font-style' style. - * support 'font-weight' style. - * support 'text-align' style. - * support 'text-decoration' style. - * support 'text-overflow' style. - * support 'line-height'(available from v0.6.1) style. line-height in iOS is different from h5 and Android, text value will be placed at bottom of line box. - * not support 'flex-direction, 'justify-content', 'align-items' which is active for child nodes, and text has no child nodes. - -### common styles -check out [common styles for components](../common-style.html) - -* support flexbox related styles. -* support box model related styles. -* support 'position' related styles. -* support 'opacity', 'background-color' etc. - -## Events - -### common events -check out [common events](../common-event.html) - -* support 'click' event. -* support 'appear' / 'disappear' event. - -## Example - -```html -<template> - <div> - <text>this is text content</text> - <text value="this is text value"></text> - <text style="text">{{price1}}</text> - <text id="textid" onclick={{showtext}}>this is gettext content</text> - <text value="{{text}}"></text> - </div> -</template> - -<style> - .text { - font-size: 24; - text-decoration: underline; - } -</style> - -<script> - module.exports = { - data: { - price1: '99.99', - price2: '88.88', - text:'' - }, - methods: { - showtext: function(event) { - var textComponent = this.$el("textid"); - this.text = textComponent.attr.value; - } - } - }; -</script> -``` -[Try it](http://dotwe.org/48f4d7c50245145c72c33161e2bb4325) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/textarea.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/textarea.md b/doc/source/v-0.10/references/components/textarea.md deleted file mode 100644 index 2645385..0000000 --- a/doc/source/v-0.10/references/components/textarea.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: <textarea> -type: references -order: 2.13 -version: 0.10 ---- - -# <textarea> -<span class="weex-version">v0.8+</span> - - -### Summary - -The weex builtin component `textarea` is used to create interactive controls to accept data from users. It can be a multi-line [input](./input.html). - -**Notes:** `<textarea>` support all event which `<input>` had. - -### Child Components - -This component supports no child components. - -### attributes - -- `value`: <string> the value of the control. -- `placeholder`: <string> a hint to the user of which can be entered to the control. The placeholder text must have no carriage returns or line-feeds. -- `disabled`: <boolean> a boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. -- `autofocus`: <boolean> a boolean attribute lets you specify that a form control should have input focus when the page loads. -- `rows:`<number> a number which can specify the height of textarea, default is `2`. - -Other attributes please check out the [common attributes](../common-attrs.html). - -### Styles - -**text styles**: checkout [text styles](../text-style.html) - -- support `color` style. -- support `font-size` style. -- support `font-style` style. -- support `font-weight` style. -- support `text-align` style. - - -**common styles**: check out [common styles for components](../common-style.html) - -- support flexbox related styles. -- support box model related styles. -- support ``position`` related styles. -- support ``opacity``, ``background-color`` etc. - -### Events - -- `input`: the value of an element changes. -- `change`: the change event is fired when a change to the component's value is commited by the user. It always come after a ``blur`` event. -- `focus`: a component has received focus. -- `blur`: a component has lost focus. - -**common events**: check out the [common events](../common-event.html) - -- support `appear` / `disappear` event. Check out [common events](../common-event.html). - -**Notes:** `<textarea>` does not support the common-event `click`. Please listen to the `input` or `change` event instead. - -### Parameters of events' object - -- for ``input`` and ``change`` events: - - `value`: the value of the component who dispatched this event. - - `timestamp`: the time stamp of the event. -- for ``focus`` and ``blur`` events: - - `timestamp`: the time stamp of the event. - -### Example - -```html -<div> - <textarea - autofocus="true" - placeholder="..." - value="I am a multiple input"> - </textarea> -</div> -``` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/video.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/video.md b/doc/source/v-0.10/references/components/video.md deleted file mode 100644 index fa4384e..0000000 --- a/doc/source/v-0.10/references/components/video.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: <video> -type: references -order: 2.14 -version: 0.10 ---- - -# <video> -<span class="weex-version">v0.6.1+</span> - -The video component can be used to embed video content in a weex page. - -**example** - -```html -<template> - <div> - <text>Big Eater!</text> - <video onstart='onstart' onpause='onpause' onfinish='onfinish' onfail='onfail' - auto-play="false" play-status="pause" src="{{src}}" style="width:750;height:500;"></video> -</div> - - </div> -</template> - -<script> - module.exports ={ - data: { - src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4' - }, - methods:{ - onstart:function(e){ - console.log('onstart'); - console.log(e); - }, - onpause:function(e){ - console.log('onpause'); - }, - onfinish:function(e){ - console.log('onfinish'); - }, - onfail:function(e){ - console.log('onfail'); - }, - } - } -</script> -``` - -[try it](http://dotwe.org/97938570cddf76c792a1a5f9542253b1) - -## Child Components -* text is the only valid type of child component. - -## Attributes - -* src: <string> The URL of the video to embed. -* play-status: <boolean> play | pause. Use it to control video's play/pause status. Default value is pause. -* auto-play: <boolean> true | false. Use it to control whether it is playing when the page initialization finished. Defalut value is false. - -Other attributes please check out the [common attributes](../common-attrs.html). - -## Styles -common styles: check out [common styles for components](../common-style.html) - -* support flexbox related styles -* support box model related styles -* support position related styles -* support opacity, background-color etc. - -## Events -* onstart: triggered when playback state is Playing. -* onpause: triggered when playback state is Paused. -* onfinish: triggered when playback state is Finished. -* onfail: triggered when playback state is Failed. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/web.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/web.md b/doc/source/v-0.10/references/components/web.md deleted file mode 100644 index 89d47c7..0000000 --- a/doc/source/v-0.10/references/components/web.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: <web> -type: references -order: 2.15 -version: 0.10 ---- - -# <web> -<span class="weex-version">v0.5+</span> - -Use web component to display any web content in the weex page. The `src`attribute is used to specify a special source. You also can use `webview` module to control some web operation such as goBack,goForward and reload. see [webview module](https://alibaba.github.io/weex/doc/modules/webview.html).For example,You can use web component and webview module to assemble a browser. - -## Child Components - -This component supports no child components. - -## Attributes - -**src**(string): this attribute specifies the page source to load. - -Other attributes please check out the [common attributes](../common-attrs.html). - -## Styles - -**width**(float): the width of the component, default value is 0. This style must be specified. - -**height**(float): the height of the component, default value is 0. This style must be specifed. - - -### common styles - -check out the [common styles](../common-attrs.html). - -support flexbox related styles -support box model related styles -support `position` related styles - -## Events - -**pagestart**: sent after the web component starts loading a page. -**pagefinish**: sent after the web component finishes loading a page. -**error**: sent if the web component failed to load a page. - -### common events - -support `appear` / `disappear` event. - -Check out [common events](../common-event.html) - -### Notes -not support `click` event. - -## Example - -We use a simple Browser Demo to show how to use web component and webview module. Check out [webview module](../modules/webview.html). - - -```html -<template> - <div class="browserStyle"> - <div style="flex-direction: row"> - <input id="urlInput" type="url" autofocus="false" placeholder="..." class="textStyle" value="{{input_text}}" oninput="input"> - </input> - </div> - <div style="flex-direction: row"> - <wxc-button value="LoadURL" class="buttonSytle" size="small" onclick="loadURL"></wxc-button> - <wxc-button value="Backward" class="buttonSytle" size="small" onclick="backforward"></wxc-button> - <wxc-button value="Forward" class="buttonSytle" size="small" onclick="forward"></wxc-button> - </div> - <div> - <web id="webview" src="{{src}}" class="webStyle"></web> - </div> - </div> -</template> - -<style> - - .browserStyle - { - width:600; - height: 825; - background-color:#778899 ; - } - - .textStyle - { - width:600; - height: 50; - background-color: #D3D3D3; - } - - .buttonSytle - { - width:180; - height: 50; - font-size: 12; - background-color: #D3D3D3; - margin:10; - padding-left: 5; - padding-right: 5; - } - - .webStyle - { - width:600; - height: 700; - background-color: #8B0000; - } - -</style> - -<script> - - var web_module = require('@weex-module/webview'); - - module.exports = { - data: { - src : "https://h5.m.taobao.com";, - input_text:"https://www.tmall.com"; - }, - - methods: { - - loadURL: function (e) { - var web_element = this.$el('webview'); - var input = this.$el("urlInput"); - this.src = this.input_text; - web_module.reload(web_element); - }, - - backforward: function (e) { - var web_element = this.$el('webview'); - web_module.goBack(web_element); - this.input_text = web_element.attr.src; - }, - - forward: function (e) { - var web_element = this.$el('webview'); - web_module.goForward(web_element); - this.input_text = web_element.attr.src; - }, - input:function (e) { - var input = this.$el("urlInput"); - this.input_text = input.attr.value; - } - - } - } -</script> -``` - -[Try it](http://dotwe.org/103d472645206cc1564f49717585abb4) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/wxc-navpage.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/wxc-navpage.md b/doc/source/v-0.10/references/components/wxc-navpage.md deleted file mode 100644 index 0ae7eba..0000000 --- a/doc/source/v-0.10/references/components/wxc-navpage.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: <wxc-navpage> -type: references -order: 2.16 -version: 0.10 ---- - -# <wxc-navpage> - -### 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.html). - -### Child Components - -This type of component supports all kinds of weex component as its child components. - -### Attributes - -- `height`: <length> The height of the navbar. Default value is 88. -- `background-color`: <color>The backgroudColor of the navbar. Default value is `white`. -- `title`: <string> The title of the navbar. -- `title-color`: <color>The color of the navbar title. Default value is `black`. -- `left-item-title`: <string> The title of the leftItem. -- `left-item-color`: <color> The color of the leftItem title. Default value is `black`. -- `right-item-title`: <string> The title of the rightItem. -- `right-item-color`: <color> The color of the rightItem title. Default value is `black`. -- `left-item-src`: <string> The imageURL of the leftItem you want to set. -- `right-item-src`: <string> The imageURL of the rightItem you want to set. - -Other attributes please check out the [common attributes](../references/common-attrs.html). - -### Styles - -**common styles**: check out the [common styles](../references/common-attrs.html) - -- 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.html) - -- support `click` event. Check out [common events](../references/common-event.html) -- support `appear` / `disappear` event. Check out [common events](../references/common-event.html) - -### Example - -```html -<template> - <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> -``` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/components/wxc-tabbar.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/components/wxc-tabbar.md b/doc/source/v-0.10/references/components/wxc-tabbar.md deleted file mode 100644 index 944b06d..0000000 --- a/doc/source/v-0.10/references/components/wxc-tabbar.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: <wxc-tabbar> -type: references -order: 2.17 -version: 0.10 ---- - -# <wxc-tabbar> - -The `wxc-tabbar` is a custom component, which belongs to the `weex-components` node package, implements a specialized component that corresponds to the radio-style selection. It displays tabs at the bottom of the window for switching between different tab pages. - -Usage: You can use this component by a `require` statement, `require('weex-components');`, in the script tag. e.g. - -```html -<template> - <div style="flex-direction: column;"> - <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar> - </div> -</template> - -<script> - require('weex-components'); - // Other javascript statements. -</script> -``` - -Before requiring `weex-components'`, you need to specify `weex-components` dependency in your project's package.json file. e.g. - -```json -"dependencies": { - "weex-components": "^0.2.0" -} -``` - -## Child Components - -`wxc-tabbar` has no child components. - - -## Attributes - -* `selected-index` : <number> default value is 0 -* `selected-color`: <color> The color of the title when it is selected. Default is red color. -* `unselected-color`: <color> The color of the title when it is unselected. Default is black color. -* `tab-items` This attribute accepts an array of `tabitem` objects, each of which corresponds to the tab pages. And the order of the items equals to the order of the tab pages onscreen. You can configure the appearance of tabbar by setting the tabitem object's properties. Each tabitem properties are listed as below: - * `index`: <integer> This attribute is required, and it specifies the order of the item. - * `title`: <string> The itemâs title. and it is optional. The tile will not be displayed if empty or not provided. - * `titleColor`: <color>The itemâs titleColor. Default is black color. - * `image`: <string>The icon displayed when the tabitem is unselected. The image will not be displayed if empty or not provided. - * `selectedImage` : <string>The icon displayed when the tabitem is selected. The icon will not be displayed if empty or not provided. - * `src` : <string> The weex page for the tab page. - * `visibility`: <string>visible | hidden. This attribute specifies display status of the tab page. Default value is visible. - -Other attributes please check out the [common attributes](../common-attrs.html). - -## Styles -common styles: check out [common styles](../common-style.html) for components - -* 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. -e.g. - - -```html -<template> - <div style="flex-direction: column;"> - <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar> - </div> -</template> - -<script> - require('weex-components'); - module.exports = { - data: { - }, - methods: { - ready: function (e) { - var vm = this; - vm.$on('tabBar.onClick',function(e){ - var index = e.detail.index; - }); - }, - } - } -</script> -``` - -## Example -You should checkout the playground's `tabbar` example. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/gesture.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/gesture.md b/doc/source/v-0.10/references/gesture.md deleted file mode 100644 index fc41fd4..0000000 --- a/doc/source/v-0.10/references/gesture.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Gesture -type: references -order: 1.4 -version: 0.10 ---- - -# Gesture - -> Experiment Feature - -Weex encapsulates native touch events to provide a gesture system. Using gesture is similar to use event in Weex. Just set `on` attributes on a node to listen to gesture. - -## Type -For now, there are four types of gestures: - -* **Touch**. Touch gesture is fired when a touch point is placed, moved or removed from the touch surface. Touch gesture is accuracy as it will report every trivial event. As a result, listening to touch gesture may be slow, a great deal of events needs to be processed even a small move happened. There are three types of Touch gesture: - * `touchstart` will be fired when a touch point is placed on the touch surface. - * `touchmove` will be fired when a touch point is moved along the touch surface. - * `touchend` will be fired when a touch point is removed from the touch surface. -* **Pan**. Pan gesture also report motion of touch point on the touch surface, which is similar to touch gesture. But Pan gesture is sampled and faster than the touch event. As consequence, it is less accuracy than touch gesture. There are also three types of Pan gesture, and the meaning of these types is very close to types of Touch. - * `panstart` - * `panmove` - * `panend` -* **Swipe**. Swipe is fired when user swipe a touch point on the screen. A serial of motion will only trigger one Swipe gesture. -* **LongPress**. Swipe is fired when a touch point is held for 500 ms or more. - -The Touch gesture and Pan is very close to each other, with following features hold: - -* **Touch**. Not sampled, accuracy, but slow. -* **Pan**. Sampled, fast, less accuracy. - -Users may choose their gesture according to their situation. - -## Properties -The following properties can be used in gesture callback: - -* `direction`. Only exists for **Swipe** gesture. Indicate the direcion of the swipe, choose from `up`, `left`, `bottom`, `right`. -* `changedTouches`. An array of motion for every touch pointer that has contribute to the current gesture. - -### changedTouches - -`changedTouches` is an array, with the following properties in its children: - -* `identifier`. A unique identifier for a touch pointer. -* `pageX`. The X coordinate of the touch pointer relative to the left edge of the document. -* `pageY`. The Y coordinate of the touch pointer relative to the top of the document. -* `screenX`. The X coordinate of the touch point relative to the left edge of the screen. -* `screenY`. The Y coordinate of the touch point relative to the top edge of the screen. - -## Constrain -Currently, Weex Android do not support listening to gesture on `scroller`, `list` and `webview`, as it would lead a large amount of event conflicting. - -## How to use - -Example: - -```html -<template> - <div ontouchstart="handleTouchstart"></div> -</template> - -<script> -module.exports = { - methods: { - handleTouchstart: function(eventProperties) { - // handling with the Event Properties - } - } -} -</script> -``` - -With the code above, a `touchstart` event will be fired when a touch point is placed on the touch surface. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/images/css-boxmodel.png ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/images/css-boxmodel.png b/doc/source/v-0.10/references/images/css-boxmodel.png deleted file mode 100644 index a2063e2..0000000 Binary files a/doc/source/v-0.10/references/images/css-boxmodel.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/images/css-flexbox-align.jpg ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/images/css-flexbox-align.jpg b/doc/source/v-0.10/references/images/css-flexbox-align.jpg deleted file mode 100644 index 8a7f731..0000000 Binary files a/doc/source/v-0.10/references/images/css-flexbox-align.jpg and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/images/css-flexbox-justify.svg ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/images/css-flexbox-justify.svg b/doc/source/v-0.10/references/images/css-flexbox-justify.svg deleted file mode 100644 index 33e742b..0000000 --- a/doc/source/v-0.10/references/images/css-flexbox-justify.svg +++ /dev/null @@ -1,59 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg"; width='504' height='270' viewBox="0 0 504 270"> - <defs> - <pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'> - <rect x='0' y='0' width='10' height='10' fill='#eee' /> - <rect x='10' y='10' width='10' height='10' fill='#eee' /> - <rect x='0' y='10' width='10' height='10' fill='#ccc' /> - <rect x='10' y='0' width='10' height='10' fill='#ccc' /> - </pattern> - </defs> - <style> - text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; } - rect { stroke-width: 2px; stroke: #888; } - g > rect:nth-child(1) { fill: #888 } - g > rect:nth-child(2) { fill: #fcc; } - g > rect:nth-child(3) { fill: #cfc; } - g > rect:nth-child(4) { fill: #ccf; } - g > rect:nth-child(5) { fill: transparent; } - </style> - <g transform="translate(2,2)"> - <rect x='0' y='0' width='500' height='50' /> - <rect x='0' y='0' width='100' height='50' /> - <rect x='100' y='0' width='80' height='50' /> - <rect x='180' y='0' width='200' height='50' /> - <rect x='0' y='0' width='500' height='50' /> - <text x='250' y='38'>flex-start</text> - </g> - <g transform="translate(2,56)"> - <rect x='0' y='0' width='500' height='50' /> - <rect x='120' y='0' width='100' height='50' /> - <rect x='220' y='0' width='80' height='50' /> - <rect x='300' y='0' width='200' height='50' /> - <rect x='0' y='0' width='500' height='50' /> - <text x='250' y='38'>flex-end</text> - </g> - <g transform="translate(2,110)"> - <rect x='0' y='0' width='500' height='50' /> - <rect x='60' y='0' width='100' height='50' /> - <rect x='160' y='0' width='80' height='50' /> - <rect x='240' y='0' width='200' height='50' /> - <rect x='0' y='0' width='500' height='50' /> - <text x='250' y='38'>center</text> - </g> - <g transform="translate(2,164)"> - <rect x='0' y='0' width='500' height='50' /> - <rect x='0' y='0' width='100' height='50' /> - <rect x='160' y='0' width='80' height='50' /> - <rect x='300' y='0' width='200' height='50' /> - <rect x='0' y='0' width='500' height='50' /> - <text x='250' y='38'>space-between</text> - </g> - <g transform="translate(2,218)"> - <rect x='0' y='0' width='500' height='50' /> - <rect x='20' y='0' width='100' height='50' /> - <rect x='160' y='0' width='80' height='50' /> - <rect x='280' y='0' width='200' height='50' /> - <rect x='0' y='0' width='500' height='50' /> - <text x='250' y='38'>space-around</text> - </g> -</svg> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/images/css-flexbox-sample.png ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/images/css-flexbox-sample.png b/doc/source/v-0.10/references/images/css-flexbox-sample.png deleted file mode 100644 index 0f1236d..0000000 Binary files a/doc/source/v-0.10/references/images/css-flexbox-sample.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/images/nav.png ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/images/nav.png b/doc/source/v-0.10/references/images/nav.png deleted file mode 100644 index 7081ca7..0000000 Binary files a/doc/source/v-0.10/references/images/nav.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/index.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/index.md b/doc/source/v-0.10/references/index.md deleted file mode 100644 index d59d654..0000000 --- a/doc/source/v-0.10/references/index.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Bootstrap -type: references -order: 1 -has_chapter_content: false -chapter_title: Common Options -version: 0.10 ---- - -# Bootstrap - -Besides its default meaning, `<script>` tag supports two more configuration with its `type` property *in the top level component of a page*. - -* `type="data"`: For initial data configuration, the data defined here will overwrite the data definition in the `<script>`. -* `type="config"`: For configuration definition. - -```html -<script type="data"> - /* (optional) the definition of initial data */ -</script> - -<script type="config"> - /* (optional) the definition of configuration */ -</script> -``` - -## Initial data definition - -Sometimes, it is hard to maintain huge data structure in the default `<script>` tag. So Weex allows us to have a `<script type="data">` tag to define initial data. The data defined in here will totally replace the data defined in the default `<script>` tag. - -here is an example: - -```html -<script type="data"> -{ - title: 'Alibaba', - date: new Date().toLocaleString() -} -</script> -``` - -## script configuration - -Weex also allows us to do some configuration with a `<script type="config">`, So far, we only support the `downgrade` configs. - -- `downgrade.osVersion` -- `downgrade.appVersion` -- `downgrade.weexVersion` -- `downgrade.deviceModel` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/modules/animation.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/modules/animation.md b/doc/source/v-0.10/references/modules/animation.md deleted file mode 100644 index 4b46564..0000000 --- a/doc/source/v-0.10/references/modules/animation.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: animation -type: references -order: 3.1 -version: 0.10 ---- - -# animation - -Smooth and meaningful animation is very effective for enhancing the user experience of mobile application, you can use the `animation` module to perform animation on components. A animation can perform a series of simple transformations (position, size, rotation, background color, and opacity) on the component. So, if you have a `image` component, you can move, rotate, grow, or shrink it. - -## API -### transition(node, options, callback) - -[example](http://dotwe.org/5be74019d5e510fa95c5dedec24f7ce5) - -#### Arguments -##### node - -**type:** node - -**position:** An element that will be animated, normally you can get this by calling `this.$el(id)`. - -##### options - -**type:** object - -**position:** Transition options. -- `duration` (number): Specifies the number of milliseconds of animation execution, the default value is `0`, means that no animation will occur. -- `delay` (number): Specifies the amount of milliseconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. The default value is `0`. -- `timingFunction` (string): Used to describe how the intermediate values of the styles being affected by a transition effect are calculated, default value is `linear`, the allowed attributes are listed in the following table: - -|name|description|example| -|:--|:--|:--| -|`linear`|Specifies a transition effect with the same speed from start to end|[example](http://dotwe.org/d71491ded2bede32df3e8b44b53d5e4f)| -|`ease-in`|Specifies a transition effect with a slow start|[example](http://dotwe.org/23b104f833039f263957481f2e2c40c9)| -|`ease-out`|Specifies a transition effect with a slow end|[example](http://dotwe.org/04dab95e073a2c3a808e6b01fc20e996)| -|`ease-in-out`|Specifies a transition effect with a slow start and end|[example](http://dotwe.org/fc37ec17d215e786ce336a00457489e3)| -|`cubic-bezier(x1, y1, x2, y2)`|Define your own values in the cubic-bezier function. Possible values are parameter values from 0 to 1. More information about cubic-bezier please visit [cubic-bezier](http://cubic-bezier.com/) and [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve).|[example](http://dotwe.org/95d8f15d0014c31d3a1d15728313f2a5)| - -- `styles` (object): Specify the names and values of styles to which a transition effect should be applied. The allowed attributes are listed in the following table: - -| name | description | value type | default value |example| -| :--- | :--- | :--- | :--- |:---| -|width|The width applied to the component after the animation finished.|length|none|[example](http://dotwe.org/b599d273f996cfdcbeca7bd5c828ca90)| -|height|The height applied to the component after the animation finished.|length|none|[example](http://dotwe.org/d0b1ccadf386ba00960d0c8340c682e5)| -|backgroundColor|The background color applied to the component after the animation finished.|string|none|[example](http://dotwe.org/f4616ee18f6042b63a8fdcd2816b1712)| -|opacity|The opacity applied to the component after the animation finished.|number between 0 to 1|`1`|[example](http://dotwe.org/f94394173301db83ae6e66d1330a0d0b)| -|transformOrigin|The povit of transition. The possible values for `x-aris` are `left`/`center`/`right`/length or percent, and possible values of `y-axis` are `top`/`center`/`bottom`/ length or percent|`x-axis y-axis`|`center center`|[example](http://dotwe.org/de43f5a47de230dd531797458bf7fd3c)| -|transform|Transform function to be applied to the element. The properties in the following table are supported|object|none|[example](http://dotwe.org/cfc0388441f5a53a73335885006c13e7)| - -properties of `transform`: - -| name | description | value type | default value |example| -| :--- | :--- | :--- | :--- |:---| -|translate/translateX/translateY|Specifies the location of which the element will be translated.|pixel or percent|none|[example](http://dotwe.org/6638e66e296723bbef3e59c83b2b5003)| -|rotate|Specifies the angle of which the element will be rotated, the unit is degree.|number|none|[example](http://dotwe.org/ba9e9920594d9388744b2bd0d1b7695d)| -|scale/scaleX/scaleY|Stretch or shrink the element.|number|none|[example](http://dotwe.org/14b42dde6583ab222bd2b7ed08f241c8)| - -#### callback -**type:** function - -**position:** Callback which is called after the completion of transition. \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/modules/clipboard.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/modules/clipboard.md b/doc/source/v-0.10/references/modules/clipboard.md deleted file mode 100644 index d0f45e7..0000000 --- a/doc/source/v-0.10/references/modules/clipboard.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: clipboard -type: references -order: 3.2 -version: 0.10 ---- - -# clipboard -<span class="weex-version">v0.8+ (developing)</span> - -clipboard allows you to `getString()` or `setString()` from the system clipboard. - -Not long ago, We're still suffering from such a situation that we got a verification code sent by SMS, and we had no way to get the code from the SMS text but to typed it by our hands. How frustrated it is! But now you can enable your app to get the code from the system clipboard by calling `clipboard.getString()` . - -## Caution - -* only support text. -* only works on Android and iOS. NOT works for html5, for web security reason. - -## API - -### getString(callback) - -reads from clipboard. - -##### Arguments - -`callback(function)`: the callback function after executing this action. `data` is the return value. - -Example - -```js -var clipboard = require('@weex-module/clipboard'); -clipboard.getString(function(ret) { - // callback. 'ret' is an object that contains 'result' and 'data'. - // use 'ret.data' to fetch the value. - console.log("read from clipboard is " + ret.data); -}); - -``` -### setString(text) - -sets the text to clipboard, having the same effect as copying manually. - -##### Arguments - -`text(string)`: the text copied to clipboard. -Example - -```js -var clipboard = require('@weex-module/clipboard'); -clipboard.setString("SomeStringHere"); -```
![https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png"](https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png"){kind=link}
