[WEEX-455] Add examples page to the website (#166)
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/749cf999 Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/749cf999 Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/749cf999 Branch: refs/heads/master Commit: 749cf9995d9148746a7b29df28df7a25fa8ced6d Parents: 820a660 Author: é¨æ³ <[email protected]> Authored: Fri Jun 15 11:15:35 2018 +0800 Committer: é¨æ³ <[email protected]> Committed: Fri Jun 15 11:40:13 2018 +0800 ---------------------------------------------------------------------- examples/README.md | 73 + examples/cases.js | 124 + examples/components.js | 484 + examples/draft.js | 49 + examples/index.js | 58 + examples/modules.js | 248 + examples/others.js | 174 + examples/styles.js | 124 + examples/syntax.js | 363 + examples/website/ExampleList.vue | 50 + examples/website/IndexPage.vue | 63 + examples/website/entry.js | 56 + examples/website/webpack.config.js | 28 + package-lock.json | 10337 ++++++++++++----- package.json | 14 +- source/cn/examples.ejs | 3 + source/examples.ejs | 3 + themes/weex/layout/_partial/header.ejs | 2 +- themes/weex/layout/example.ejs | 40 - themes/weex/layout/examples.ejs | 19 + themes/weex/source/css/example.scss | 103 - themes/weex/source/css/examples.scss | 136 + themes/weex/source/css/style.scss | 1 - themes/weex/source/js/example.js | 37 - themes/weex/source/js/examples.min.js | 1 + themes/weex/source/js/examples/a.web.js | 528 - themes/weex/source/js/examples/a.weex.js | 198 - themes/weex/source/js/examples/animation.web.js | 569 - .../weex/source/js/examples/animation.weex.js | 224 - themes/weex/source/js/examples/clipboard.web.js | 583 - .../weex/source/js/examples/clipboard.weex.js | 249 - themes/weex/source/js/examples/div.web.js | 523 - themes/weex/source/js/examples/div.weex.js | 183 - themes/weex/source/js/examples/dom-rect.web.js | 589 - themes/weex/source/js/examples/dom-rect.weex.js | 254 - .../weex/source/js/examples/dom-scroll.web.js | 598 - .../weex/source/js/examples/dom-scroll.weex.js | 288 - themes/weex/source/js/examples/image.web.js | 542 - themes/weex/source/js/examples/image.weex.js | 225 - themes/weex/source/js/examples/indicator.web.js | 618 - .../weex/source/js/examples/indicator.weex.js | 307 - themes/weex/source/js/examples/input.web.js | 586 - themes/weex/source/js/examples/input.weex.js | 251 - themes/weex/source/js/examples/list.web.js | 584 - themes/weex/source/js/examples/list.weex.js | 252 - themes/weex/source/js/examples/modal.web.js | 604 - themes/weex/source/js/examples/modal.weex.js | 272 - themes/weex/source/js/examples/navigator.web.js | 562 - .../weex/source/js/examples/navigator.weex.js | 230 - themes/weex/source/js/examples/refresh.web.js | 594 - themes/weex/source/js/examples/refresh.weex.js | 267 - themes/weex/source/js/examples/scroller.web.js | 598 - themes/weex/source/js/examples/scroller.weex.js | 288 - themes/weex/source/js/examples/slider.web.js | 587 - themes/weex/source/js/examples/slider.weex.js | 255 - themes/weex/source/js/examples/storage.web.js | 634 - themes/weex/source/js/examples/storage.weex.js | 317 - themes/weex/source/js/examples/stream.web.js | 590 - themes/weex/source/js/examples/stream.weex.js | 259 - themes/weex/source/js/examples/switch.web.js | 605 - themes/weex/source/js/examples/switch.weex.js | 280 - themes/weex/source/js/examples/text.web.js | 535 - themes/weex/source/js/examples/text.weex.js | 208 - themes/weex/source/js/examples/textarea.web.js | 582 - themes/weex/source/js/examples/textarea.weex.js | 247 - themes/weex/source/js/examples/video.web.js | 593 - themes/weex/source/js/examples/video.weex.js | 254 - themes/weex/source/js/examples/web.web.js | 923 -- themes/weex/source/js/examples/web.weex.js | 600 - themes/weex/source/js/vue.min.js | 6 + 70 files changed, 9399 insertions(+), 22232 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/749cf999/examples/README.md ---------------------------------------------------------------------- diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..077e216 --- /dev/null +++ b/examples/README.md @@ -0,0 +1,73 @@ +# Weex Vue Examples + +Simple examples of using [Weex](http://weex.apache.org/) and [Vue.js](https://vuejs.org/). + ++ **[The Examples Website](http://weex.apache.org/examples.html)** ([Mirror at Alibaba Cloud](http://weex-project.io/examples.html)) ++ [Weex Online Playground](http://dotwe.org/vue) ++ [Weex Playground App](https://weex-project.io/playground.html) + +## How to Add Examples + +1. Write an example on the [online playground](http://dotwe.org/vue). +2. Clone this project and add the example description to the corresponding file within this folder. +3. Send a pull request to [apache/incubator-weex-site](https://github.com/apache/incubator-weex-site). + +### Examples Category + ++ `components.js`: [Built-in components of Weex](http://weex.apache.org/references/components/index.html). ++ `modules.js`: [Built-in modules of Weex](http://weex.apache.org/references/modules/index.html). ++ `syntax.js`: The syntax of Weex DSL framework (Vue.js). ++ `styles.js`: Supported CSS styles of Weex. ++ `cases.js`: Common usage cases of Weex. ++ `others.js`: Misc examples, those who don't know where to put it. + +### Examples Description + ++ **`hash`**: **[Required]** The md5 hash in the [online playground](http://dotwe.org/vue) example's link address. ++ **`title`**: **[Required]** A brief title of the example. It's better to have both Chinese and English titles. ++ **`screenshot`**: [Optional] The screen shot of the example. In order to be consistent, the image size should be 540x844 or larger. It's better to upload the image to a CDN and just offer an address. + +> For the screen shot of examples, if you find it hard to satisfy the requirement, you can use this placeholder image instead: https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png + +```js +examples: [{ + hash: '44e635d920aaac5e3bbcbe293b6f0b81', + // title: 'Need Screenshot', // use the same title for all languages + title: { zh: '缺æªå¾', en: 'Need Screenshot' }, // set titles for different languages + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' +}] +``` + +<hr> + +## å¦ä½æ·»å ä¾å + +1. å¨ [online playground](http://dotwe.org/vue) åä¾åã +2. å éå½å项ç®ï¼æä¾åçæè¿°æ·»å å°å½åç®å½éç¸åºçæ件ä¸ã +3. ç» [apache/incubator-weex-site](https://github.com/apache/incubator-weex-site) æ PRã + +### ä¾ååç±» + ++ `components.js`: [Weex çå ç½®ç»ä»¶](http://weex-project.io/cn/references/components/index.html). ++ `modules.js`: [Weex çå 置模å](http://weex-project.io/cn/references/modules/index.html). ++ `syntax.js`: 使ç¨äº Vue.js è¯æ³çä¾åã ++ `styles.js`: æ ·å¼ç¸å ³çä¾åã ++ `cases.js`: 常è§çå®é ç¨ä¾ã ++ `others.js`: å ¶ä»ä¸ç¥éæä¹åç±»ä¾åã + +### ä¾åçæè¿° + ++ **`hash`**: **[å¿ å¡«]** [online playground](http://dotwe.org/vue) ä¾å URL éç md5 hash å符串ã ++ **`title`**: **[å¿ å¡«]** ä¾åçæ é¢ï¼è¦ç®çï¼æ好æ¯ä¸è±æé½æã ++ **`screenshot`**: [éå¡«] ä¾åçæªå¾ï¼ä¸åºè¯¥å å«å¯¼èªæ åç¶ææ ã为äºä¿æä¸è´ï¼å¾ç大å°è¦æ±æ¯ 540x844 æè æ´é«ãæ好è½æå¾çä¼ å° CDN ä¸ç¶åæä¾å¾çå°åã + +> å¦æä½ è§å¾ä¾åéçæªå¾å¾é¾æå®ï¼ä¹å¯ç¨è¿å¼ å¾ä»£æ¿ï¼ https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png + +```js +examples: [{ + hash: '44e635d920aaac5e3bbcbe293b6f0b81', + // title: 'Need Screenshot', // ææè¯è¨é½ç¨è¿ä¸ªæ é¢ + title: { zh: '缺æªå¾', en: 'Need Screenshot' }, // é对ä¸åè¯è¨è®¾ç½®æ é¢ + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' +}] +``` http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/749cf999/examples/cases.js ---------------------------------------------------------------------- diff --git a/examples/cases.js b/examples/cases.js new file mode 100644 index 0000000..e5fd455 --- /dev/null +++ b/examples/cases.js @@ -0,0 +1,124 @@ +module.exports = { + type: 'cases', + name: { zh: 'å®ä¾', en: 'Cases' }, + group: [{ + type: 'useful', + name: { zh: '常ç¨', en: 'Common Cases' }, + examples: [{ + // hash: '123b69b57e099036558745298fb6e8ca', + // title: { zh: 'æ¥çå¾ç', en: 'Preview Image' }, + // screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + // }, { + hash: '123b69b57e099036558745298fb6e8ca', + title: { zh: '楼å±çµæ¢¯', en: 'Elevator' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '123b69b57e099036558745298fb6e8ca', + title: { zh: 'è¿å顶é¨', en: 'Back to Top' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '123b69b57e099036558745298fb6e8ca', + title: { zh: 'ç½æ ¼å¸å±', en: 'Grid Layout' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '123b69b57e099036558745298fb6e8ca', + title: { zh: '模ææ¡', en: 'Modal Box' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '123b69b57e099036558745298fb6e8ca', + title: { zh: 'å ¨å±é®ç½©', en: 'Fullscreen Mask' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'tabs', + name: { zh: 'å¤é¡µç¾', en: 'Tabs' }, + examples: [{ + hash: 'c5f7cb6cc90fe4883436534167563dd3', + title: { zh: 'Tab 页ç¾', en: 'Tabs' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1mfmunC_I8KJjy0FoXXaFnVXa-540-844.png' + }, { + hash: '643ac211e70a3c733f1d2ef848b3e7f0', + title: { zh: '带å 容', en: 'Tabs and Panels' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1l0aTnxrI8KJjy0FpXXb5hVXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'å¤ä¸ªé¡µç¾å®ä¾', en: '<embed>' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'æå¿æ»å¨', en: '' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'spa', + ignore: true, + name: { zh: 'å页åºç¨', en: 'Single Page App' }, + examples: [{ + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'ä½¿ç¨ Vuex', en: 'Using Vuex' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'ä½¿ç¨ vue-router', en: 'Using vue-router' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'å页åºç¨', en: 'Single Page App' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'real-cases', + name: { zh: 'å®æ´ä¾å', en: 'Examples' }, + examples: [{ + hash: '3a52d415dc7307d1594079574fe553c7', + title: 'Todo List', + screenshot: 'https://gw.alicdn.com/tfs/TB182b_bNrI8KJjy0FpXXb5hVXa-540-844.png' + }, { + hash: '936b7e8a504abd5b3e2f5a8d91accc5e', + title: { zh: 'å容é', en: 'Klotski' }, + screenshot: 'https://gw.alicdn.com/tfs/TB13Yw1af6H8KJjy0FjXXaXepXa-540-844.png' + }, { + hash: '82ff22e820405194004aacae8045ad56', + title: { zh: '计ç®å¨', en: 'Calculator' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1tXOrc3MPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: { + zh: 'c0b65802869aebb7627ceaba56e51d1e', + en: '263b8a4226b4a161d3e1b89f6ffcd39a' + }, + title: { zh: 'æ«ç äºç»´ç ', en: 'Scan QR Code' }, + screenshot: { + zh: 'https://gw.alicdn.com/tfs/TB1ew4FX1uSBuNjy1XcXXcYjFXa-540-844.png', + en: 'https://gw.alicdn.com/tfs/TB1KqLnX_tYBeNjy1XdXXXXyVXa-540-844.png' + } + }, { + hash: '6f06da96ecc0d06673f9dd70e01d6749', + title: { zh: 'æ«é·', en: 'MineSweeper' }, + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }] + }, { + type: 'reprography', + scope: 'website', + name: { zh: 'ç®åå¤å»', en: 'Reprography' }, + examples: [{ + ignore: true, + // hash: 'f28215d4d9d96de91115cdd1528bcacd', + hash: '8ee2850f39123a350333eb08beac7115', + title: { zh: 'æåå', en: 'Moment' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1G7LydwMPMeJjy1XdXXasrXXa-540-844.png' + }, { + scope: 'website', + hash: '013b1e76d2c5419e32bc3e02aa1bef26', + title: 'åºç¨å表', + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }, { + hash: '6c458803b2a83a336099ff43dae4d1a5', + title: 'ååå±ç¤º', + screenshot: 'https://gw.alicdn.com/tfs/TB1juElXjihSKJjy0FfXXbGzFXa-540-844.png' + }, { + hash: '97c0dc80f34d51aff2551a9916d48fba', + title: { zh: 'è天', en: 'Chat' }, + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }] + }] +} http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/749cf999/examples/components.js ---------------------------------------------------------------------- diff --git a/examples/components.js b/examples/components.js new file mode 100644 index 0000000..e6017e4 --- /dev/null +++ b/examples/components.js @@ -0,0 +1,484 @@ +module.exports = { + type: 'component', + name: { zh: 'ç»ä»¶', en: 'Component' }, + group: [{ + type: 'div', + name: 'div', + title: { zh: '<div> ç»ä»¶', en: '<div>' }, + desc: { + zh: '<div> ç»ä»¶æ¯ç¨äºå è£ å ¶å®ç»ä»¶çæåºæ¬å®¹å¨ãæ¯æææçéç¨æ ·å¼ãç¹æ§ãflexbox å¸å±ãå ¶ç±»ä¼¼äº HTML ç <div> 容å¨ï¼ä½ä¸è½ç´æ¥å¨éé¢æ·»å ææ¬ï¼å符串ï¼ï¼å¦æè¦å±ç¤ºææ¬ï¼åºè¯¥ä½¿ç¨ <text> ç»ä»¶ã', + en: '<div> is the most fundamental component which is a contianer to wrap any other components. It supports all the common styles, attributes and layout of flexbox.', + }, + docLink: { + en: 'http://weex-project.io/references/components/div.html', + zh: 'http://weex-project.io/cn/references/components/div.html', + }, + examples: [{ + // hash: 'd813b9f5d1e8ef95b0cfa32d469af236', + // title: { zh: 'æç®ä¾å', en: 'Sample' }, + // screenshot: 'https://gw.alicdn.com/tfs/TB11h7wewMPMeJjy1XcXXXpppXa-540-844.png' + // }, { + hash: 'fb2522e71268aa8fb573eb20129ac4eb', + title: { zh: 'åµå¥', en: 'Nested' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1uKLGbS_I8KJjy0FoXXaFnVXa-540-844.png' + }, { + hash: '3488279c3502d1234b437c2f718f3a55', + title: { zh: 'éå ', en: 'Overlap' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1FPAzd3MPMeJjy1XdXXasrXXa-540-844.png' + }, { + hash: '7613db44f6c03a5849937fbbdeebf69d', + title: { zh: 'æåèç¹', en: 'Text Node' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1qlG2cwoQMeJjy1XaXXcSsFXa-540-844.png' + }] + }, { + type: 'text', + name: 'text', + title: { zh: '<text> ç»ä»¶', en: '<text>' }, + desc: { + zh: '<text> æ¯ Weex å ç½®çç»ä»¶ï¼ç¨æ¥å°ææ¬æç §æå®çæ ·å¼æ¸²æåºæ¥ã<text> åªè½å å«ææ¬å¼ï¼ä¸æ¯æåç»ä»¶ï¼ä½ å¯ä»¥ä½¿ç¨ {{}} æ è®°æå ¥åéå¼ä½ä¸ºææ¬å 容ã', + en: 'The weex builtin component âtextâ is used to render text with specified style rule. tag can contain text value only. You can use variable interpolation in the text content with the mark {{}}.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/components/text.html', + en: 'http://weex-project.io/references/components/text.html' + }, + examples: [{ + hash: { + zh: '3e0220d7b379955a26039131f153a360', + en: 'a718b029a7ba9cea08e84a6c22ec9bc4' + }, + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: { + zh: 'https://gw.alicdn.com/tfs/TB1V5IXcMMPMeJjy1XdXXasrXXa-540-844.png', + en: 'https://gw.alicdn.com/tfs/TB19gKsb8fH8KJjy1XbXXbLdXXa-540-844.png' + } + }, { + hash: '25b96fb0283300df1b183d019d835e4f', + title: { zh: 'lines å±æ§', en: '"lines"' }, + screenshot: 'https://gw.alicdn.com/tfs/TB19JaYcMoQMeJjy0FpXXcTxpXa-540-844.png' + }, { + scope: 'website', + hash: '7e123f72106c5dbba7675f6ee3bd35d2', + title: { zh: 'ä¿çé¦å°¾ç©ºæ ¼', en: 'Trim space' }, + screenshot: 'https://gw.alicdn.com/tfs/TB140aYcMoQMeJjy0FpXXcTxpXa-540-844.png' + }, { + hash: '161cd0771fd95f9e73c7663d4674c4f4', + title: { zh: 'å®ä½å符', en: 'Entity character' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1c41UcMoQMeJjy1XaXXcSsFXa-540-844.png' + }] + }, { + type: 'image', + name: 'image', + title: { zh: '<image> ç»ä»¶', en: '<image>' }, + desc: { + zh: '<image> ç»ä»¶ç¨äºæ¸²æå¾çï¼å¹¶ä¸å®ä¸è½å å«ä»»ä½åç»ä»¶ãéè¦æ³¨æçæ¯ï¼å¿ é¡»æç¡®æå® width å heightï¼å¦åå¾çæ æ³æ¾ç¤ºã', + en: 'image tag is used to render a specified picture, and it shouldnât contain any child component. <img> is not supported currently.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/components/image.html', + en: 'http://weex-project.io/references/components/image.html' + }, + examples: [{ + // hash: 'c8d67a852dca4865b06cf372cd5b3c17', + hash: 'e9cda6ca9ec05f2ff1852be82fc8f91f', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + // screenshot: 'https://gw.alicdn.com/tfs/TB150aYcMoQMeJjy0FpXXcTxpXa-540-844.png' + screenshot: 'https://gw.alicdn.com/tfs/TB12KPGbS_I8KJjy0FoXXaFnVXa-540-844.png' + }, { + hash: '5bac698a83ca8c0467426746be011252', + title: { zh: 'resize å±æ§', en: '"resize" Attribute' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1wKHLbILJ8KJjy0FnXXcFDpXa-540-844.png' + }, { + hash: '97d978c234dffe96f594c7c10e9119d0', + title: { zh: 'æµ®å±æå', en: 'Layers' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1Mx1UcMoQMeJjy1XaXXcSsFXa-540-844.png' + }, { + hash: '233e47ac9f3dc4cacb8e8f3e29646429', + title: { zh: 'å¾çå®é 大å°', en: 'Original Size' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sAh1gMMPMeJjy1XbXXcwxVXa-540-844.png' + }, { + hash: '571231d08dee12a8feaa76d1109fbcdc', + title: { zh: 'Gif å¾ç', en: 'Gif Image' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1cbYxdwMPMeJjy1XdXXasrXXa-540-844.png' + }, { + hash: '3ad81eb6b0a66f4d2fa4a35ff8a310f5', + title: { zh: 'Base64 å¾ç', en: 'Base64 Image' }, + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }] + }, { + type: 'list', + name: 'list', + title: { zh: '<list> ç»ä»¶', en: '<list>' }, + desc: { + zh: '<list> ç»ä»¶æ¯æä¾åç´å表åè½çæ ¸å¿ç»ä»¶ï¼æ¥æå¹³æ»çæ»å¨åé«æçå å管çï¼é常éåç¨äºé¿å表çå±ç¤ºãæç®åç使ç¨æ¹æ³æ¯å¨ <list> æ ç¾å 使ç¨æ°ç»å¾ªç¯çæçå¤ä¸ª <cell> æ ç¾ã', + en: '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.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/components/list.html', + en: 'http://weex-project.io/references/components/list.html' + }, + examples: [{ + hash: '3faed12fc18c947255abfa8354570170', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1pgDZcMoQMeJjy1XaXXcSsFXa-540-844.png' + }, { + hash: '56f59761b7217e0f126f1de99a21a239', + title: '<header>', + screenshot: 'https://gw.alicdn.com/tfs/TB1N_zLdxrI8KJjy0FpXXb5hVXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: '<loading>', + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: '<refresh>', + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'f4e660c403c0fd5140ac2747f498d948', + title: { zh: 'loadmore äºä»¶', en: '"loadmore" Event' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1tK66cMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'c7f682768e18b83bfca7f1327dfab9cd', + title: { zh: 'appear äºä»¶', en: '"appear" Event' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1MnzLdxrI8KJjy0FpXXb5hVXa-540-844.png' + }] + }, { + type: 'scroller', + name: 'scroller', + title: { zh: '<scroller> ç»ä»¶', en: '<scroller>' }, + desc: { + zh: '<scroller> æ¯ä¸ä¸ªç«ç´çï¼å¯ä»¥å®¹çº³å¤ä¸ªææä¸åçåç»ä»¶çæ»å¨å¨ãå¦æåç»ä»¶çæ»é«åº¦é«äºå ¶æ¬èº«ï¼é£ä¹ææçåç»ä»¶é½å¯æ»å¨ã', + en: '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.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/components/scroller.html', + en: 'http://weex-project.io/references/components/scroller.html' + }, + examples: [{ + hash: '586ca3414132895999430f6e44d81419', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1tK66cMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'c626a5fb4981e8e8bce92d7b012c26b4', + title: { zh: 'æ°´å¹³æ»å¨', en: 'Horizontal Scroll' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1QkqGb2DH8KJjy1XcXXcpdXXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: '<loading>', + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: '<refresh>', + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'eb1f5edea6cb8f4fea06d67dc071eff7', + title: { zh: 'loadmore äºä»¶', en: '"loadmore" Event' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1tK66cMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '7e17173fb09cd29f3daa3a87739df60d', + title: { zh: 'appear äºä»¶', en: '"appear" Event' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1MnzLdxrI8KJjy0FpXXb5hVXa-540-844.png' + }, { + hash: '14df0c05474fd16d4690e22194a69599', + title: 'scrollTo', + screenshot: 'https://gw.alicdn.com/tfs/TB1ZIPecwoQMeJjy0FoXXcShVXa-540-844.png' + }] + }, { + type: 'slider', + name: 'slider', + title: { zh: '<slider> ç»ä»¶', en: '<slider>' }, + desc: { + zh: '<slider> ç»ä»¶ç¨äºå¨ä¸ä¸ªé¡µé¢ä¸å±ç¤ºå¤ä¸ªå¾çï¼å¨å端ï¼è¿ç§ææ被称为 è½®æå¾ã', + en: 'A slideâs player to show slides (mostly as pictures) one page by another. The default interval between two slides is 3 seconds.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/components/slider.html', + en: 'http://weex-project.io/references/components/slider.html' + }, + examples: [{ + hash: '091cd18fe9cc00550b956f0fe3d7259b', + title: { zh: 'æç®ä¾å', en: 'Simple' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1aIH3hiqAXuNjy1XdXXaYcVXa-540-844.png' + }, { + hash: 'cbe5742a1b9e0dc7586b0102b658b42b', + title: { zh: 'èªå¨ææ¾', en: 'Auto Play' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1ecL3hiqAXuNjy1XdXXaYcVXa-540-844.png' + }, { + hash: 'd835d18c6d411299f3aa8c68011d6748', + title: { zh: '<indicator>', en: 'With Indicator' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sdb3hiqAXuNjy1XdXXaYcVXa-540-844.png' + }, { + hash: 'a68f08ca82e2cc52126f3a02dbb1ac3e', + title: { zh: 'é´éæ¶é´', en: 'Interval' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1XJj3hiqAXuNjy1XdXXaYcVXa-540-844.png' + }, { + hash: '2d8da136e33f63a0bfe4b1e42362405b', + title: '<slider-neighbor>', + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'input', + name: 'input', + title: { zh: '<input> ç»ä»¶', en: '<input>' }, + desc: { + zh: 'Weex å ç½®ç <input> ç»ä»¶ç¨æ¥å建æ¥æ¶ç¨æ·è¾å ¥å符çè¾å ¥ç»ä»¶ã <input> ç»ä»¶çå·¥ä½æ¹å¼å type å±æ§çå¼èå¼ï¼æ¯å¦ text, password, url, email, tel çãæ¤ç»ä»¶ä¸æ¯æåç»ä»¶å click äºä»¶ã', + en: 'The weex builtin component input is used to create input controls to receive the userâs input characters.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/components/input.html', + en: 'http://weex-project.io/references/components/input.html' + }, + examples: [{ + hash: '9ff5e5ded4969d19f76e028bf1440309', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1IQ9cdgMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '185e8574389d3242a79090414c336e4d', + title: 'Placeholder', + screenshot: 'https://gw.alicdn.com/tfs/TB1XPmcdgoQMeJjy0FoXXcShVXa-540-844.png' + }, { + hash: 'aab3e1a3835c9cdbed53fb127738507f', + title: { zh: 'åå§ç¶æ', en: 'Initial State' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1rnh_diERMeJjy0FcXXc7opXa-540-844.png' + }, { + hash: '75492bb1c1af2b44293ce11164c0b3ba', + title: { zh: 'è¾å ¥æ¡ç±»å', en: 'Input Type' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1qDh_diERMeJjy0FcXXc7opXa-540-844.png' + }, { + hash: '38cfc531ae3c0a10ac10236cd869e9eb', + title: { zh: 'äºä»¶å¤ç', en: 'Handle Events' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1IQ9cdgMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'textarea', + name: 'textarea', + title: { zh: '<textarea> ç»ä»¶', en: '<textarea>' }, + desc: { + zh: 'textarea æ¯ Weex å ç½®çä¸ä¸ªç»ä»¶ï¼ç¨äºç¨æ·äº¤äºï¼æ¥åç¨æ·è¾å ¥æ°æ®ãå¯ä»¥è®¤ä¸ºæ¯å 许å¤è¡ç <input> ç»ä»¶ã', + en: 'The weex builtin component textarea is used to create interactive controls to accept data from users. It can be a multi-line input.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/components/textarea.html', + en: 'http://weex-project.io/references/components/textarea.html' + }, + examples: [{ + hash: '126de8266778ddc7e967ef4cf1c98dec', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1TSyddgoQMeJjy0FoXXcShVXa-540-844.png' + }, { + hash: '03caa359a9c4bf9fdc8a1d343f7f7a69', + title: { zh: 'é»è®¤è¡æ°', en: 'Default "rows"' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1AsF1diERMeJjSspjXXcpOXXa-540-844.png' + }] + }, { + type: 'switch', + name: 'switch', + title: { zh: '<switch> ç»ä»¶', en: '<switch>' }, + desc: { + zh: '<switch> æ¯ Weex çå ç½®ç»ä»¶ï¼ç¨æ¥åå»ºä¸ iOS ä¸è´æ ·å¼çæé®ãä¾å¦å¨ iPhone ä¸ç设置åºç¨ä¸çé£è¡æ¨¡å¼æé®å°±æ¯ä¸ä¸ª switch æé®ã', + en: '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.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/components/switch.html', + en: 'http://weex-project.io/references/components/switch.html' + }, + examples: [{ + hash: 'd6769c27e18ab999ced059fff760ba0e', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1p7eDdGagSKJjy0FhXXcrbFXa-540-843.jpg' + }, { + hash: '8a049fb7ff19c0ee9316a483b235dd26', + title: { zh: 'åå§ç¶æ', en: 'Initial State' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1u0HRc2NNTKJjSspkXXaeWFXa-540-844.jpg' + }, { + hash: 'b48549c39f2e82178ce8b94b395d1d0b', + title: { zh: 'äºä»¶å¤ç', en: 'Handle Events' }, + screenshot: 'https://gw.alicdn.com/tfs/TB14HWzdGagSKJjy0FbXXa.mVXa-540-844.jpg' + }] + }, { + type: 'video', + name: 'video', + title: { zh: '<video> ç»ä»¶', en: '<video>' }, + desc: { + zh: '<video> ç»ä»¶å¯ä»¥è®©æä»¬å¨ Weex 页é¢ä¸åµå ¥è§é¢å 容ã<text> æ¯å¯ä¸åæ³çåç»ä»¶ã', + en: 'The video component can be used to embed video content in a weex page.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/components/video.html', + en: 'http://weex-project.io/references/components/video.html' + }, + examples: [{ + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'ææ¾æ§å¶', en: 'Play Control' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'äºä»¶å¤ç', en: 'Handle Events' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'web', + name: 'web', + title: { zh: '<web> ç»ä»¶', en: '<web>' }, + desc: { + zh: 'ä½¿ç¨ <web> ç»ä»¶å¨ Weex 页é¢ä¸åµå ¥ä¸å¼ ç½é¡µå 容ãsrc å±æ§ç¨æ¥æå®èµæºå°åãä½ ä¹å¯ä»¥ä½¿ç¨ webview module æ¥æ§å¶ web çè¡ä¸ºï¼æ¯å¦åè¿ãåéåéè½½ã', + en: '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.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/components/web.html', + en: 'http://weex-project.io/references/components/web.html' + }, + examples: [{ + hash: '4e64eeb667e3d3959c310eb1e66d3105', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1LpGHdgMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: '页é¢è·³è½¬', en: 'Jump' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'ä¼ éåæ°', en: 'Pass Params' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'äºä»¶å¤ç', en: 'Handle Events' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'richtext', + name: 'richtext', + scope: 'website', + title: { zh: 'å¯ææ¬ç»ä»¶', en: '<richtext>' }, + desc: { + zh: '', + en: '' + }, + examples: [{ + hash: '36a1999a7957de7bcbeb7cca95ba46d2', + title: { zh: 'å¾ææ··æ', en: 'Use richtext' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1VPOPcMMPMeJjy1XdXXasrXXa-540-844.png' + }, { + hash: '8e3c274f5cae4a391a14ac81c890325f', + title: { zh: 'å 容è¾å ¥', en: 'With Binding' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1SzOPcMMPMeJjy1XdXXasrXXa-540-844.png' + }] + }, { + type: 'waterfall', + name: 'waterfall', + title: { zh: 'çå¸æµç»ä»¶', en: '<waterfall>' }, + desc: { + zh: 'æä¾çå¸æµå¸å±çç»ä»¶ã', + en: 'A component providing waterfall layout.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/components/waterfall.html', + en: 'http://weex-project.io/references/components/waterfall.html' + }, + examples: [{ + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'recycle-list', + name: 'recycle-list', + // scope: 'website', + title: { zh: '<recycle-list> ç»ä»¶', en: '<recycle-list>' }, + desc: { + zh: '<recycle-list> æ¯ä¸ä¸ªæ°çå表容å¨ï¼å ·æåæ¶åå¤ç¨çè½åï¼å¯ä»¥å¤§å¹ ä¼åå åå ç¨å渲ææ§è½ãï¼ä» å¨ >= 0.18.0 ççæ¬ä¸æ¯æï¼', + en: 'The <recycle-list> is a new list container with the ability to recycle and reuse the component template. It can greatly optimize memory usage and rendering performance.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/components/recycle-list.html', + en: 'http://weex-project.io/references/components/recycle-list.html' + }, + examples: [{ + hash: '927b9bfb487a42b775f36d7243026839', + title: { zh: 'ææ¬ç»å®', en: 'Text Binding' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1LeVoovDH8KJjy1XcXXcpdXXa-540-844.png' + }, { + hash: '56d434a1641b96df58c8f3d02d082f08', + title: { zh: 'å±æ§ç»å®', en: 'Attribute Binding' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1_pLKolfH8KJjy1XbXXbLdXXa-540-844.png' + }, { + hash: 'a633b3562355db1e38a2c5893664f5cb', + title: { zh: 'ä½¿ç¨ v-for', en: 'Using v-for' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1oxNRor_I8KJjy1XaXXbsxpXa-540-844.png' + }, { + hash: '546e29abce30c86205c69dbda8671013', + title: { zh: 'å¤å±å¾ªç¯', en: 'Multiple v-for' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1W4JRor_I8KJjy1XaXXbsxpXa-540-844.png' + }, { + hash: '836e767308c33a5d456b7ff51154c515', + title: { zh: 'æ¡ä»¶æ¸²æ', en: 'v-if/v-else' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1bsM4ohrI8KJjy0FpXXb5hVXa-540-844.png' + // }, { + // hash: '788cc577f5d591201ce479ff5fc39116', + // title: { zh: 'ååç»å®', en: 'Using v-model' }, + // screenshot: 'https://gw.alicdn.com/tfs/TB10YZCom_I8KJjy0FoXXaFnVXa-540-844.png' + }, { + hash: '5337dfdbe278c45b407ee2913d0eedd9', + title: { zh: 'ç»å®äºä»¶', en: 'Event Binding' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1BjcCom_I8KJjy0FoXXaFnVXa-540-844.png' + }, { + hash: 'a38633d93a78c9ca98264e60b59ddd7d', + title: { zh: 'ä¸æ¬¡æ§æ¸²æ', en: 'Using v-once' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1AxNRor_I8KJjy1XaXXbsxpXa-540-844.png' + }, { + hash: '1447937c097aedf64e7f746615069fe9', + title: { zh: 'ç»å®æ ·å¼', en: 'Style Binding' }, + screenshot: 'https://gw.alicdn.com/tfs/TB14K04oTnI8KJjy0FfXXcdoVXa-540-844.png' + }, { + hash: 'f2f74da321f900d3c52612a75a06d0de', + title: { zh: 'loadmore äºä»¶', en: '"loadmore" Event' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1tK66cMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '79b892c91b3b0a6f18c73654f95a4e7a', + title: { zh: 'æ éå表', en: 'Infinite Scroll' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1JGrQilfH8KJjy1XbXXbLdXXa-540-844.png' + }, { + hash: '05f153c3a2478605a66011e981964373', + title: { zh: 'æ°´å¹³æ»å¨', en: 'Horizontal Scroll' }, + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }] + }, { + type: 'recycle-list-component', + name: 'recycle-list-component', + // scope: 'website', + title: { zh: 'å¨ <recycle-list> ä¸ä½¿ç¨åç»ä»¶', en: '<recycle-list> with components' }, + examples: [{ + hash: '4bb36641cf23c3a11b085a2ace33c369', + title: { zh: 'éæåç»ä»¶', en: 'Static Component' }, + screenshot: 'https://gw.alicdn.com/tfs/TB101VoovDH8KJjy1XcXXcpdXXa-540-844.png' + // }, { + // hash: 'b2ae44c36724cf5541696f0f1cafadbe', + // title: { zh: 'æå±æ§æ ç¶æ', en: 'Stateless Props' }, + // screenshot: 'https://gw.alicdn.com/tfs/TB1LeVoovDH8KJjy1XcXXcpdXXa-540-844.png' + }, { + hash: 'bd6b43a0e78347766b5cbc87b3ffb47e', + title: { zh: 'å±æ§æ´æ°', en: 'Update Props' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1LeVoovDH8KJjy1XcXXcpdXXa-540-844.png' + }, { + hash: '66a80b9dab170990ae7a07d1d265f5bc', + title: { zh: 'å«å é¨ç¶æ', en: 'Stateful Component' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1tXHKolfH8KJjy1XbXXbLdXXa-540-844.png' + }, { + hash: '1d88de057476c1d1d7ac923337385416', + title: { zh: '移é¤ç»ä»¶', en: 'Remove Cell' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1j5d_XVGWBuNjy0FbXXb4sXXa-540-844.png' + }, { + // hash: 'd214675550ff33d393363b92748603d8', + // title: { zh: '使ç¨çå½å¨æ', en: 'Using Lifecycle' }, + // screenshot: 'https://gw.alicdn.com/tfs/TB1JNJRor_I8KJjy1XaXXbsxpXa-540-844.png' + // }, { + hash: '3639df8581e885b5ddd5f6e06041297d', + title: 'watch & computed', + screenshot: 'https://gw.alicdn.com/tfs/TB1X10oovDH8KJjy1XcXXcpdXXa-540-844.png' + }] + }] +} http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/749cf999/examples/draft.js ---------------------------------------------------------------------- diff --git a/examples/draft.js b/examples/draft.js new file mode 100644 index 0000000..4f691bc --- /dev/null +++ b/examples/draft.js @@ -0,0 +1,49 @@ +module.exports = { + type: 'draft', + name: { zh: 'è稿', en: 'Draft' }, + group: [{ + type: 'sandbox', + name: { zh: 'å¤å®ä¾é离', en: 'Sandbox' }, + examples: [{ + hash: 'faddd11cb224bae7aaf52e3488d96667', + title: { zh: 'ææ¯', en: 'Poison' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'bb7fa751c420400235f3e6d1b9f1ac12', + title: { zh: 'æå§æ¯', en: 'Poison' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'aac3529dc14145b7126f27f36e270da3', + title: { zh: 'éªæ¯', en: 'Diagnose' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'check', + name: 'Check', + examples: [{ + hash: 'ad4274b3fae5cd8da414b9398eecc915', + title: { zh: 'éªè¯ WebAssembly', en: 'Support WebAssembly?' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'b4ef85cd84f8e0893dbf291159d6677c', + title: { zh: 'éªè¯ WebAssembly', en: 'Support WebAssembly?' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'recycle-list', + name: '<recycle-list>', + examples: [{ + hash: '48037a2eef1b65d2965cfcee10308917', + title: { zh: 'ä½¿ç¨ <template> æ ç¾', en: 'use <template>' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'syntax', + name: 'syntax', + examples: [{ + hash: '48037a2eef1b65d2965cfcee10308917', + title: { zh: 'ä½¿ç¨ <template> æ ç¾', en: 'use <template>' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }] +} http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/749cf999/examples/index.js ---------------------------------------------------------------------- diff --git a/examples/index.js b/examples/index.js new file mode 100644 index 0000000..689f4d7 --- /dev/null +++ b/examples/index.js @@ -0,0 +1,58 @@ +const components = require('./components') +const modules = require('./modules') +const syntax = require('./syntax') +const styles = require('./styles') +const cases = require('./cases') +const others = require('./others') + +const examples = [ + components, + modules, + syntax, + styles, + cases, + others +] + +// screen shot +// http://dotwe.org/vue/5e9b359de1cbd977dec54654170d2a05 + +function isTODO (example) { + return example.hash === '' + || example.hash === '4624d605004fc7eb9f14ca9c5a226fe3' + || example.hash === 'ccefdea9e9ef695acca7fb1b439277e2' + || example.hash === '123b69b57e099036558745298fb6e8ca' + || example.hash === '2d8da136e33f63a0bfe4b1e42362405b' + || example.hash === 'e0025d9264cb5e6dec13710a5899a0a1' +} + +function shouldIgnore (item, scope) { + if (item.scope && scope && item.scope !== scope) { + return true + } + return !!item.ignore +} + +module.exports = function getExamples (options = {}) { + let selected = examples + const scope = options.scope + if (scope === 'mobile') { + selected = [components, modules, syntax] + others.group.unshift(...cases.group) + others.group.unshift(...styles.group) + selected.push(others) + } + + // filter examples + return selected.filter(item => { + if (shouldIgnore(item, scope)) return false + item.group = item.group.filter(group => { + if (shouldIgnore(group, scope)) return false + group.examples = group.examples.filter(_ => + !(options.filterTODO && isTODO(_)) && !shouldIgnore(_, scope) + ) + return !!group.examples.length + }) + return !!item.group.length + }) +} http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/749cf999/examples/modules.js ---------------------------------------------------------------------- diff --git a/examples/modules.js b/examples/modules.js new file mode 100644 index 0000000..c11e3c0 --- /dev/null +++ b/examples/modules.js @@ -0,0 +1,248 @@ +module.exports = { + type: 'module', + name: { zh: '模å', en: 'Module' }, + group: [{ + type: 'modal', + name: 'modal', + title: { zh: 'modal 模å', en: 'modal' }, + desc: { + zh: 'modal 模åæä¾äºä»¥ä¸å±ç¤ºæ¶æ¯æ¡ç APIï¼toastãalertãconfirm å promptã', + en: 'Weex provides a series of message boxes: toast, alert, confirm and prompt.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/modules/modal.html', + en: 'http://weex-project.io/references/modules/modal.html' + }, + examples: [{ + hash: '5e49976681ea1ae7bbcbce4c92b7771f', + title: 'toast', + screenshot: 'https://gw.alicdn.com/tfs/TB1TPWcdogQMeJjy0FiXXXhqXXa-540-844.png' + }, { + hash: 'd00060031b25fbfbdffdbf08b5524e51', + title: 'alert', + screenshot: 'https://gw.alicdn.com/tfs/TB1JsqddgoQMeJjy1XaXXcSsFXa-540-844.png' + }, { + hash: '88b0782ba54695a66622988bfeb89fbd', + title: 'confirm', + screenshot: 'https://gw.alicdn.com/tfs/TB1PWmedogQMeJjy0FjXXaExFXa-540-844.png' + }, { + hash: '7763e5b0322cf625ec5221dea13ea5ec', + title: 'prompt', + screenshot: 'https://gw.alicdn.com/tfs/TB13B9gdgoQMeJjy0FpXXcTxpXa-540-844.png' + }] + }, { + type: 'dom', + name: 'dom', + title: { zh: 'dom 模å', en: 'dom' }, + desc: { + zh: 'æä½é¡µé¢ä¸çèç¹æè è·åå ¶ä¿¡æ¯ãéè¦æ³¨æçæ¯åçå¹³å°ä¸å¹¶æ²¡æ Web æ åä¸ç DOM ç»æã', + en: 'A series of dom apis that sending virtual-domâs messages to the native renderer to update the dom tree.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/modules/dom.html', + en: 'http://weex-project.io/references/modules/dom.html' + }, + examples: [{ + hash: '14df0c05474fd16d4690e22194a69599', + title: 'scrollTo', + screenshot: 'https://gw.alicdn.com/tfs/TB1ZIPecwoQMeJjy0FoXXcShVXa-540-844.png' + }, { + hash: '13afb9ed3e3a79eda435113478fd83d9', + title: 'getComponentRect', + screenshot: 'https://gw.alicdn.com/tfs/TB1v5zscMvD8KJjy0FlXXagBFXa-540-844.png' + }, { + hash: '308d627e241d0ce932a1577672af1bd8', + title: 'addRule', + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }] + }, { + type: 'stream', + name: 'stream', + title: { zh: 'stream 模å', en: 'stream' }, + desc: { + zh: 'åéç½ç»è¯·æ±å¹¶è·åååºã', + en: 'A series of stream api. It provides a network request.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/modules/stream.html', + en: 'http://weex-project.io/references/modules/stream.html' + }, + examples: [{ + hash: '2ae062b6a04124a35bbe2da3b1e5c07b', + title: 'fetch', + screenshot: 'https://gw.alicdn.com/tfs/TB1SAFdbLDH8KJjy1XcXXcpdXXa-540-844.png' + }] + }, { + type: 'animation', + name: 'animation', + title: { zh: 'animation 模å', en: 'animation' }, + desc: { + zh: 'animation 模å被ç¨äºå¨ç»ä»¶ä¸æ§è¡å¨ç»ãå¨ç»å¯ä»¥å¯¹ç»ä»¶æ§è¡ä¸ç³»åç®åçåæ¢ (ä½ç½®ã大å°ãæ转è§åº¦ãèæ¯é¢è²åä¸éæ度ç)ã', + en: 'The animation module is used to perform animation on components.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/modules/animation.html', + en: 'http://weex-project.io/references/modules/animation.html' + }, + examples: [{ + hash: '07554ce87a2c70d77bf2265824afdd8a', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: 'transform', + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'navigator', + name: 'navigator', + title: { zh: 'navigator 模å', en: 'navigator' }, + desc: { + zh: 'ä¼æå¨ç¥ï¼å¨æµè§å¨éï¼æ们å¯ä»¥éè¿åè¿æè åéæé®æ¥åæ¢é¡µé¢ï¼iOS/Android ç navigator 模åå°±æ¯ç¨æ¥å®ç°ç±»ä¼¼çææçãé¤äºåè¿ãåéåè½ï¼è¯¥æ¨¡åè¿å 许æ们æå®å¨åæ¢é¡µé¢çæ¶åæ¯å¦åºç¨å¨ç»ææã', + en: 'As itâs known to all that, we can navigate back and forth in the web browser using the navigation bar. And The navigator module mimics the same behaviors in the iOS/Android application.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/modules/navigator.html', + en: 'http://weex-project.io/references/modules/navigator.html' + }, + examples: [{ + hash: '28815dba72ee4091dfdb471f3b294e3e', + title: 'push', + screenshot: 'https://gw.alicdn.com/tfs/TB1Wh_CcILJ8KJjy0FnXXcFDpXa-540-844.png' + }, { + hash: '2af40e54aeef15228cb221c3cd57ae8f', + title: 'pop', + screenshot: 'https://gw.alicdn.com/tfs/TB1syzscMvD8KJjy0FlXXagBFXa-540-844.png' + }] + }, { + type: 'storage', + name: 'storage', + title: { zh: 'storage 模å', en: 'storage' }, + desc: { + zh: 'storage 模åå¯ä»¥å¯¹æ¬å°æ°æ®è¿è¡åå¨ãä¿®æ¹ãå é¤ï¼å¹¶ä¸è¯¥æ°æ®æ¯æ°¸ä¹ ä¿åçï¼é¤éæå¨æ¸ é¤æè 代ç æ¸ é¤ãä½æ¯ï¼storage 模åæä¸ä¸ªéå¶å°±æ¯æµè§å¨ç«¯ï¼H5ï¼åªè½åå¨å°äº5Mçæ°æ®ï¼èå¨ Android å iOS ä¸æ¯æ²¡ä»ä¹éå¶çã', + en: 'storage is a series of apis, allowing you to for example add, modify or delete stored data items.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/modules/storage.html', + en: 'http://weex-project.io/references/modules/storage.html' + }, + examples: [{ + hash: '71d1dff37c54fa9bafab4d8cbe3d21e3', + title: 'setItem', + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }, { + hash: '71d1dff37c54fa9bafab4d8cbe3d21e3', + title: 'getItem', + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }, { + hash: '71d1dff37c54fa9bafab4d8cbe3d21e3', + title: 'removeItem', + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }] + }, { + type: 'clipboard', + name: 'clipboard', + title: { zh: 'clipboard 模å', en: 'clipboard' }, + desc: { + zh: 'clipboard 模åå¯ä»¥å®ç°ä»ç³»ç»çåªè´´æ¿ä¸è·åå 容æè 设置å 容ã', + en: 'clipboard allows you to getString() or setString() from the system clipboard.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/modules/clipboard.html', + en: 'http://weex-project.io/references/modules/clipboard.html' + }, + examples: [{ + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '3abe25e7dd6d52bf35edffd62ac6199e', + title: { zh: 'å¤å¶ç¯å¢ä¿¡æ¯', en: 'Copy Environment Message' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1yJC8cEgQMeJjy0FjXXaExFXa-540-844.png' + }] + }, { + type: 'picker', + name: 'picker', + title: { zh: 'picker 模å', en: 'picker' }, + desc: { + zh: '以ä¸ä¸º picker ç¸å ³ç APIï¼ç¨äºæ°æ®éæ©ï¼æ¥æéæ©ï¼æ¶é´éæ©ãï¼ H5模åå¦é使ç¨ï¼è¯·æå¨å¼å ¥weex-pickerç»ä»¶ï¼', + en: 'A series of stream api. It provides function: pick data, pick date, pick time.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/modules/picker.html', + en: 'http://weex-project.io/references/modules/picker.html' + }, + examples: [{ + hash: 'eddde63fc2f57debed15d4f0eaf38d7e', + title: 'pick', + screenshot: 'https://gw.alicdn.com/tfs/TB128rrcL6H8KJjy0FjXXaXepXa-540-844.png' + }, { + hash: 'e71e82157a8c65b33ac213a6a399c971', + title: 'pickDate', + screenshot: 'https://gw.alicdn.com/tfs/TB1gybCcILJ8KJjy0FnXXcFDpXa-540-844.png' + }, { + hash: 'cd8cae300c4b02d3e6f6f7ba54307029', + title: 'pickTime', + screenshot: 'https://gw.alicdn.com/tfs/TB1TyzscMvD8KJjy0FlXXagBFXa-540-844.png' + }] + }, { + type: 'webview', + name: 'webview', + title: { zh: 'webview 模å', en: 'webview' }, + desc: { + zh: 'ä¸ç³»åç <web> ç»ä»¶æä½æ¥å£ã æ¯å¦ goBackãgoForwardãå reloadãéå¸¸ä¸ <web> ç»ä»¶å ±ç¨ã', + en: 'A series of web operation api like goBack, goForward, and reload. âwebviewâ module used with the web component.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/modules/webview.html', + en: 'http://weex-project.io/references/modules/webview.html' + }, + examples: [{ + hash: '9f8a7be89a4ad881ff515145cc9306ea', + title: 'goBack', + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }, { + hash: '9f8a7be89a4ad881ff515145cc9306ea', + title: 'goForward', + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }, { + hash: '9f8a7be89a4ad881ff515145cc9306ea', + title: 'reload', + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }] + }, { + type: 'meta', + name: 'meta', + title: { zh: 'meta 模å', en: 'meta' }, + desc: { + zh: 'meta 模åå¯ç¨äºå£°æå个页é¢çå ä¿¡æ¯ï¼é常æ¯ä¸äºé¡µé¢çé ç½®ï¼å¦å®¹å¨çæ¾ç¤ºå®½åº¦ (viewport) çã', + en: 'The meta module can be used to declare meta information for a single page, such as the viewport of the container.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/modules/meta.html', + en: 'http://weex-project.io/references/modules/meta.html' + }, + examples: [{ + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: 'setViewport', + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'WebSocket', + name: 'WebSocket', + title: { zh: 'WebSocket 模å', en: 'WebSocket' }, + desc: { + zh: 'WebSockets æ¯ä¸ç§å è¿çææ¯, è¿ä½¿å¾å¨ç¨æ·ç H5/iOS/Android åä¸ä¸ªæå¡å¨ä¹é´æå¼ä¸ä¸ªç交äºå¼éä¿¡ä¼è¯æ为å¯è½, æäºè¿ä¸ª APIï¼ä½ å¯ä»¥åæå¡å¨åéæ¶æ¯, 并æ¥æ¶äºä»¶é©±å¨çååº, æ é轮询æå¡å¨çååºã', + en: 'WebSockets is an advanced technology that makes it possible to open an interactive communication session between the userâs H5/iOS/android and a server.' + }, + docLink: { + zh: 'http://weex-project.io/cn/references/modules/websocket.html', + en: 'http://weex-project.io/references/modules/websocket.html' + }, + examples: [{ + hash: 'c4994c025226953c038b43da8b45124e', + title: { zh: '使ç¨èä¾', en: 'Use WebSocket' }, + screenshot: 'https://img.alicdn.com/tfs/TB1IoEFxGmWBuNjy1XaXXXCbXXa-540-844.png' + }] + }] +} http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/749cf999/examples/others.js ---------------------------------------------------------------------- diff --git a/examples/others.js b/examples/others.js new file mode 100644 index 0000000..db6fa2c --- /dev/null +++ b/examples/others.js @@ -0,0 +1,174 @@ +module.exports = { + type: 'others', + name: { zh: 'å ¶ä»', en: 'Others' }, + group: [{ + type: 'utils', + name: { zh: 'åè½', en: 'Utils' }, + examples: [{ + hash: '3abe25e7dd6d52bf35edffd62ac6199e', + title: { zh: 'è·åç¯å¢ä¿¡æ¯', en: 'Environment' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1yJC8cEgQMeJjy0FjXXaExFXa-540-844.png' + }, { + hash: 'b3c0d8b5b3753f028cc84a55a29b2b6a', + title: { zh: 'åè½æ£æµ', en: 'Feature Detect' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1TOGuc3MPMeJjy1XdXXasrXXa-540-844.png' + }, { + scope: 'website', + hash: '071c9372edea9530546b6fb61201702f', + title: { zh: 'æ¯æ WebAssemblyï¼', en: 'Support WebAssembly?' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1cHyefwMPMeJjy1XbXXcwxVXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'èªå®ä¹åä½', en: 'iconfont' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'learn', + scope: 'website', + name: { zh: 'å¦ä¹ ', en: 'Learn' }, + examples: [{ + hash: { + zh: '43ede9db84425bce17e598456758eb3b', + en: '82c3e1768163ae0155b436ce5d5f5640' + }, + title: { zh: 'å¦ä¹ Weex', en: 'Learn Weex' }, + screenshot: { + zh: 'https://gw.alicdn.com/tfs/TB13VkjhMoQMeJjy0FnXXb8gFXa-540-844.png', + en: 'https://gw.alicdn.com/tfs/TB1EJuGbY_I8KJjy1XaXXbsxpXa-540-844.png' + } + }, { + hash: { + zh: '59958038a2009d3eefca29da107d3e7d', + en: '4f0456987961d45bb5cc0b3f14f92c02' + }, + title: { zh: 'å¦ä¹ Vue.js', en: 'Learn Vue.js' }, + screenshot: { + zh: 'https://gw.alicdn.com/tfs/TB1kfEAhMoQMeJjy0FoXXcShVXa-540-844.png', + en: 'https://gw.alicdn.com/tfs/TB1JBjEXyqAXuNjy1XdXXaYcVXa-540-844.png' + } + }, { + hash: { + zh: 'd1426e1cd14718ebff51ea46bdae0224', + en: 'e7ea10acfc29f8a08fd75f9fa80f9703' + }, + title: { zh: 'å¦ä¹ Javascript', en: 'Learn Javascript' }, + screenshot: { + zh: 'https://gw.alicdn.com/tfs/TB1Dz3dhMoQMeJjy1XaXXcSsFXa-540-844.png', + en: 'https://gw.alicdn.com/tfs/TB1JljEXyqAXuNjy1XdXXaYcVXa-540-844.png' + } + }, { + hash: { + zh: '8d2a4e9b2e8e6f1d25d08472f3bb48cf', + en: '1190538862e882f9bfa96bf3787aa879' + }, + title: { zh: 'å¦ä¹ CSS', en: 'Learn CSS' }, + screenshot: { + zh: 'https://gw.alicdn.com/tfs/TB10LcihMoQMeJjy0FpXXcTxpXa-540-844.png', + en: 'https://gw.alicdn.com/tfs/TB1m3Ksb8fH8KJjy1XbXXbLdXXa-540-844.png' + } + }, { + hash: 'ffec8fcae798c1bc1dfb0259b125f477', + title: { zh: 'ææææä½ â¦', en: 'Step by Step' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1RfgihMoQMeJjy0FpXXcTxpXa-540-844.png' + }] + }, { + type: 'flatten-benchmark', + scope: 'website', + name: { zh: 'å¹³éºåæµ', en: 'Flatten Benchmark' }, + examples: [{ + hash: 'ae5fd588a6522ebb62c8cc9fa049098b', + title: { zh: 'èç¹ 838', en: '838 Nodes' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1BVwkcMoQMeJjy0FoXXcShVXa-540-844.png' + }, { + hash: 'b881a66eaa1133778940bb59836b9635', + title: { zh: 'èç¹ 2296', en: '2296 Nodes' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1.OsgcMoQMeJjy0FnXXb8gFXa-540-844.png' + }, { + hash: '3fa4de0a3e7dab86d9d8aa2ad380c677', + title: { zh: 'èç¹ 3295', en: '3295 Nodes' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1qgsccUgQMeJjy0FiXXXhqXXa-540-844.png' + }, { + hash: '01706667abe088ba534cdc0bdb3bb23b', + title: { zh: 'èç¹ 5833', en: '5833 Nodes' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1leA3cCFRMKJjy0FhXXX.xpXa-540-844.png' + }, { + hash: 'ae643775651ca4190c3250ce0a1ea1fb', + title: { zh: 'èç¹ 8990', en: '8990 Nodes' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1o0AicMoQMeJjy0FnXXb8gFXa-540-844.png' + }, { + hash: 'aacd3f0c12d7a2befc7c9de9986227a7', + title: { zh: 'èç¹ 12948', en: '12948 Nodes' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1glklcMoQMeJjy0FoXXcShVXa-540-844.png' + }] + }, { + type: 'layer-benchmark', + scope: 'website', + name: { zh: 'å±çº§åæµ', en: 'Layer Benchmark' }, + examples: [{ + hash: '33c93497fe648eeb3bd5a8b9eb709977', + title: { zh: 'å±çº§ 100', en: '100 Layers' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1G2T7cMMPMeJjy1XdXXasrXXa-540-844.png' + }, { + hash: '6ee24082dae44130bbedf1970f67fc35', + title: { zh: 'å±çº§ 200', en: '100 Layers' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1kLZicMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '4455c5fc1155d294b8ea147cd1e677c8', + title: { zh: 'å±çº§ 500', en: '500 Layers' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1H1z8cMMPMeJjy1XdXXasrXXa-540-844.png' + }, { + hash: 'ba59f9a74547f709dd4e8d6fa7dccbae', + title: { zh: 'å±çº§ 1000', en: '1000 Layers' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1I1z8cMMPMeJjy1XdXXasrXXa-540-844.png' + }] + }, { + type: 'composed-benchmark', + scope: 'website', + name: { zh: 'æ··ååæµ', en: 'Composed Benchmark' }, + examples: [{ + hash: 'c4849fe9950c03bbb59f1ac7660b9430', + title: '10 x 10', + screenshot: 'https://gw.alicdn.com/tfs/TB1YGouihrI8KJjy0FpXXb5hVXa-540-844.png' + }, { + hash: '08b7bd34da310cc3a173bef5be8aee68', + title: '15 x 15', + screenshot: 'https://gw.alicdn.com/tfs/TB1oPMVibYI8KJjy0FaXXbAiVXa-540-844.png' + }, { + hash: '41cc7b9a252d7cd88233b5e70e633ae5', + title: '20 x 20', + screenshot: 'https://gw.alicdn.com/tfs/TB1kbvSilfH8KJjy1XbXXbLdXXa-540-844.png' + }, { + hash: '290873a8734eecf4d7d8060e0f34bc4a', + title: '25 x 25', + screenshot: 'https://gw.alicdn.com/tfs/TB1oTkJifDH8KJjy1XcXXcpdXXa-540-844.png' + }, { + hash: 'bf5e9e6bb1f4a8a451e638165aca586d', + title: '30 x 30', + screenshot: 'https://gw.alicdn.com/tfs/TB1LGQZib_I8KJjy1XaXXbsxpXa-540-844.png' + }, { + hash: '80ea75498c49406c5493b596baa738e9', + title: '40 x 40', + screenshot: 'https://gw.alicdn.com/tfs/TB1uGnQilfH8KJjy1XbXXbLdXXa-540-844.png' + // }, { + // hash: 'a7e1f6fa5afb413689bc15f58ed085c7', + // title: '50 x 50', + // screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'case-benchmark', + name: { zh: 'å®ä¾åæµ', en: 'Real Case Benchmark' }, + examples: [{ + hash: '8fb49bf98996a9f26f4f8123b40d763c', + title: '<list>', + screenshot: 'https://gw.alicdn.com/tfs/TB1JGrQilfH8KJjy1XbXXbLdXXa-540-844.png' + }, { + hash: 'cbffa887a26cb040c10c56117bcfd655', + title: '<scroller>', + screenshot: 'https://gw.alicdn.com/tfs/TB1JGrQilfH8KJjy1XbXXbLdXXa-540-844.png' + }, { + hash: '5c705064c078296bd0e6a2ee94963af7', + title: '<recycle-list>', + screenshot: 'https://gw.alicdn.com/tfs/TB1JGrQilfH8KJjy1XbXXbLdXXa-540-844.png' + }] + }] +} http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/749cf999/examples/styles.js ---------------------------------------------------------------------- diff --git a/examples/styles.js b/examples/styles.js new file mode 100644 index 0000000..fdfb89c --- /dev/null +++ b/examples/styles.js @@ -0,0 +1,124 @@ +module.exports = { + type: 'styles', + name: { zh: 'æ ·å¼', en: 'Styles' }, + group: [{ + type: 'basics', + name: { zh: 'åºæ¬æ ·å¼', en: 'Basic Styles' }, + examples: [{ + // hash: 'ad002b5e26cf55475661b22e81682f79', + // title: { zh: 'è¾¹æ¡/èæ¯', en: 'Border & Background' }, + // screenshot: 'https://gw.alicdn.com/tfs/TB1z9P1ewMPMeJjy1XdXXasrXXa-540-844.png' + // }, { + hash: '5219829fd0a5f59dc9208c8327e02e92', + title: { zh: 'position å¸å±', en: 'Position Layout'}, + screenshot: 'https://gw.alicdn.com/tfs/TB1CCP1ewMPMeJjy1XdXXasrXXa-540-844.png' + }, { + hash: 'd1648814d06fdf59cd99ea92c716694a', + title: { zh: '线æ§æ¸å', en: 'Linear Gradient' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1JQCEhgoQMeJjy1XaXXcSsFXa-540-844.png' + }, { + hash: '94a627f3ffa7007f3a2e9c97a5e245ec', + title: { zh: 'é´å½±', en: 'Box Shadow' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1J7goczihSKJjy0FlXXadEXXa-540-844.png' + // }, { + // hash: 'ff1332f9a343d211a72051a04e2e1c3c', + // title: { zh: 'å¤å±é´å½±', en: 'Box Shadow' }, + // screenshot: 'https://gw.alicdn.com/tfs/TB1J7goczihSKJjy0FlXXadEXXa-540-844.png' + }, { + hash: 'e68f268dffcf0481935e19c9b0ab315f', + title: { zh: '伪类éæ©å¨', en: 'Pseudo-classes' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1J7goczihSKJjy0FlXXadEXXa-540-844.png' + }, { + hash: 'bb3afbc65afb96e4099a8b6b6a03185a', + title: { zh: 'ç½æ ¼èæ¯', en: 'Mesh Background' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1kU3abRTH8KJjy0FiXXcRsXXa-540-844.png' + }, { + hash: 'e510f73afb31b3228a5a9ef1b7a5a456', + title: { zh: 'éæèæ¯', en: 'Transparent Background' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1CL3nbMDD8KJjy0FdXXcjvXXa-540-844.png' + }, { + hash: 'b90dbc5fbecf160a8f6c10b752b44c53', + title: { zh: 'ä¸è§å½¢', en: 'Triangles' }, + screenshot: 'https://gw.alicdn.com/tfs/TB14yzscMvD8KJjy0FlXXagBFXa-540-844.png' + }, { + hash: '190d8baf578fb7b4efd82f19322a69da', + title: { zh: '西çï¼é´å½±ï¼', en: 'Watermelon (box-shadow)' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1RIzDdx6I8KJjy0FgXXXXzVXa-540-844.png' + // }, { + // hash: '4624d605004fc7eb9f14ca9c5a226fe3', + // title: { zh: 'çå¸æµ', en: 'Waterfall' }, + // screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + // }, { + // hash: '4624d605004fc7eb9f14ca9c5a226fe3', + // title: 'Grid', + // screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'flexbox', + name: 'Flexbox', + title: { zh: 'Flexbox å¸å±', en: 'Flexbox Layout' }, + desc: { + zh: 'CSS å¼¹æ§çåå¸å±æ¯ CSS ç模åä¹ä¸ï¼å®ä¹äºä¸ç§é对ç¨æ·çé¢è®¾è®¡èä¼åç CSS çå模åãå¨å¼¹æ§å¸å±æ¨¡åä¸ï¼å¼¹æ§å®¹å¨çåå ç´ å¯ä»¥å¨ä»»ä½æ¹åä¸æå¸ï¼ä¹å¯ä»¥âå¼¹æ§ä¼¸ç¼©âå ¶å°ºå¯¸ï¼æ¢å¯ä»¥å¢å 尺寸以填满æªä½¿ç¨ç空é´ï¼ä¹å¯ä»¥æ¶ç¼©å°ºå¯¸ä»¥é¿å ç¶å ç´ æº¢åºãåå ç´ ç水平对é½ååç´å¯¹é½é½è½å¾æ¹ä¾¿çè¿è¡ææ§ãéè¿åµå¥è¿äºæ¡ï¼æ°´å¹³æ¡å¨åç´æ¡å ï¼æåç´æ¡å¨æ°´å¹³æ¡å ï¼å¯ä»¥å¨ä¸¤ä¸ªç»´åº¦ä¸æ建å¸å±ã', + en: 'CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can âflexâ their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.' + }, + docLink: { + zh: 'https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout', + en: 'https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout' + }, + examples: [{ + hash: 'fb3dbc872b4ccd068bc61a551c02dcc0', + title: 'flex-direction', + screenshot: 'https://gw.alicdn.com/tfs/TB1aIJHgMoQMeJjy0FpXXcTxpXa-540-844.png' + }, { + hash: '4a7214eafa1c07190e81e2c41d30e030', + title: 'flex-wrap', + screenshot: 'https://gw.alicdn.com/tfs/TB1kQQeczihSKJjy0FlXXadEXXa-540-844.png' + }, { + hash: '5fc9541e4c0a10484482ae7c539960ca', + title: 'justify-content', + screenshot: 'https://gw.alicdn.com/tfs/TB1PNNVgMoQMeJjy0FoXXcShVXa-540-844.png' + }, { + hash: 'fc795cfba02d44a895d3df603a675d78', + title: 'align-items', + screenshot: 'https://gw.alicdn.com/tfs/TB1ADdPgMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + scope: 'website', + hash: '0650d1e5f089254de707a4af6ea1d736', + title: 'flex-flow', + screenshot: 'https://gw.alicdn.com/tfs/TB1qktHgMoQMeJjy0FnXXb8gFXa-540-844.png' + }, { + scope: 'website', + hash: 'cac1573b8689adbfceecf58f4293654c', + title: 'order', + screenshot: 'https://gw.alicdn.com/tfs/TB1qMv.cqagSKJjy0FhXXcrbFXa-540-844.png' + }, { + hash: '301f115bc9cb5d62c21e4f5272a3491d', + title: 'align-self', + screenshot: 'https://gw.alicdn.com/tfs/TB1qDBGgMMPMeJjy1XbXXcwxVXa-540-844.png' + }, { + scope: 'website', + hash: 'bdee705206b8d2a447a51dc3b81fa6d8', + title: 'align-content', + screenshot: 'https://gw.alicdn.com/tfs/TB1OQIeczihSKJjy0FlXXadEXXa-540-844.png' + }, { + scope: 'website', + hash: '148cef9b572617067b8cfe208b8e93db', + title: 'flex-grow', + screenshot: 'https://gw.alicdn.com/tfs/TB1vvVCgMoQMeJjy1XaXXcSsFXa-540-844.png' + }, { + scope: 'website', + hash: '4149549dbfbef3f6090ff0711f016263', + title: 'flex-shrink', + screenshot: 'https://gw.alicdn.com/tfs/TB1QvVCgMoQMeJjy1XaXXcSsFXa-540-844.png' + }, { + scope: 'website', + hash: 'b23c7139b09cfc99e6df3dd0a9f7b326', + title: 'flex-basis', + screenshot: 'https://gw.alicdn.com/tfs/TB14h8mb2xNTKJjy0FjXXX6yVXa-540-844.png' + // }, { + // hash: '4624d605004fc7eb9f14ca9c5a226fe3', + // title: 'flex', + // screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }] +} http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/749cf999/examples/syntax.js ---------------------------------------------------------------------- diff --git a/examples/syntax.js b/examples/syntax.js new file mode 100644 index 0000000..a61fe9b --- /dev/null +++ b/examples/syntax.js @@ -0,0 +1,363 @@ +module.exports = { + type: 'syntax', + name: { zh: 'è¯æ³', en: 'Syntax' }, + group: [{ + type: 'text-binding', + name: { zh: 'ææ¬ç»å®', en: 'Text Binding' }, + title: { zh: 'ææ¬ç»å®', en: 'Text Binding' }, + desc: { + zh: 'æ°æ®ç»å®æ常è§çå½¢å¼å°±æ¯ä½¿ç¨ âMustacheâ è¯æ³ï¼å大æ¬å·ï¼çææ¬æå¼ã', + en: 'The most basic form of data binding is text interpolation using the âMustacheâ syntax (double curly braces).' + }, + docLink: { + zh: 'https://cn.vuejs.org/v2/guide/syntax.html#æå¼', + en: 'https://vuejs.org/v2/guide/syntax.html#Interpolations' + }, + examples: [{ + hash: { + zh: '34e42c91e1f86591563ec8897e6a095c', + en: '207411d00e8af32213443b4d0c5db689' + }, + title: { zh: 'ææ¬æå¼', en: 'Inline TextNode' }, + screenshot: { + zh: 'https://gw.alicdn.com/tfs/TB1V5IXcMMPMeJjy1XdXXasrXXa-540-844.png', + en: 'https://gw.alicdn.com/tfs/TB19gKsb8fH8KJjy1XbXXbLdXXa-540-844.png' + } + }, { + hash: '68b02a5371eb7da5cb9dde1946ce2b68', + title: { zh: '使ç¨è¡¨è¾¾å¼', en: 'Using Expression' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1veLGbS_I8KJjy0FoXXaFnVXa-540-844.png' + }] + }, { + type: 'v-bind', + name: 'v-bind', + title: { zh: 'ç»å®å±æ§å¼ï¼v-bindï¼', en: 'v-bind' }, + desc: { + zh: 'v-bind å¯ä»¥å¨æå°ç»å®ä¸ä¸ªæå¤ä¸ªç¹æ§ï¼æä¸ä¸ªç»ä»¶ prop å°è¡¨è¾¾å¼ãå¯ä»¥ç®åæ `:` (åè§åå·)ã', + en: 'Dynamically bind one or more attributes, or a component prop to an expression.' + }, + docLink: { + zh: 'https://cn.vuejs.org/v2/api/#v-bind', + en: 'https://vuejs.org/v2/api/#v-bind' + }, + examples: [{ + hash: 'b62f1a5f4973f43fae9adca02864eb8b', + title: { zh: 'ç»å®å±æ§å¼', en: 'Binding Props' }, + screenshot: 'https://gw.alicdn.com/tfs/TB150aYcMoQMeJjy0FpXXcTxpXa-540-844.png' + }, { + hash: 'b142f24d2f0ab27f5f65448d2aa16970', + title: { zh: 'ç»å®è¡¨è¾¾å¼', en: 'Using Expression' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1veLGbS_I8KJjy0FoXXaFnVXa-540-844.png' + }, { + hash: '3a2cc3c7a465f6a07c4bd3a868c7e393', + title: { zh: 'æ ·å¼å¼ç»å®', en: 'Style Binding' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1o.62bH_I8KJjy1XaXXbsxpXa-540-844.png' + }, { + hash: '2bc0de9ec2448a1f852f354349f66600', + // hash: 'b4b1f5e4679efbe3c94864a1404bfeaf', + title: { zh: 'ç±»åç»å®', en: 'Class Binding' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1o.62bH_I8KJjy1XaXXbsxpXa-540-844.png' + }] + }, { + type: 'v-for', + name: 'v-for', + title: { zh: '循ç¯æ令ï¼v-forï¼', en: 'v-for' }, + desc: { + zh: 'v-for åºäºæºæ°æ®å¤æ¬¡æ¸²æå ç´ æ模æ¿åãæ¤æ令ä¹å¼ï¼å¿ 须使ç¨ç¹å®è¯æ³ `alias in expression` 为å½åéåçå ç´ æä¾å«åã', + en: 'We can use the v-for directive to render a `alias in expression` based on an array. The v-for directive requires a special syntax in the form of item in items.' + }, + docLink: { + zh: 'https://cn.vuejs.org/v2/guide/list.html', + en: 'https://vuejs.org/v2/guide/list.html' + }, + examples: [{ + hash: '38904c807f66b1a11de5ddf0d40b3d30', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1R_7.bjihSKJjy0FlXXadEXXa-540-844.png' + }, { + hash: '2cd124954175721d9145571bf722ce7a', + title: { zh: 'ä¸æ ç´¢å¼', en: 'Array Index' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1dAivaLBNTKJjy0FdXXcPpVXa-540-844.png' + }, { + hash: '2b4222b828fac65257d9ed9f8932f2a1', + title: { zh: 'éå JS 对象', en: 'v-for With an Object' }, + screenshot: 'https://gw.alicdn.com/tfs/TB10r25bH_I8KJjy1XaXXbsxpXa-540-844.png' + }, { + hash: '7364e9c3c25ab2cbc945903cea7b0878', + title: { zh: 'å¤å±å¾ªç¯', en: 'Multiple v-for' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1giSLfwoQMeJjy0FoXXcShVXa-540-844.png' + }] + }, { + type: 'v-if', + name: 'v-if', + title: { zh: 'æ¡ä»¶æ令ï¼v-if)', en: 'v-if' }, + desc: { + zh: 'v-if æ ¹æ®è¡¨è¾¾å¼çå¼ççåæ¡ä»¶æ¸²æå ç´ ï¼å¨åæ¢æ¶å ç´ åå®çæ°æ®ç»å®/ç»ä»¶è¢«éæ¯å¹¶é建ãåç±»æ令è¿æ v-else å v-else-ifã', + en: 'Conditionally render the element based on the truthy-ness of the expression value.' + }, + docLink: { + zh: 'https://cn.vuejs.org/v2/guide/conditional.html', + en: 'https://vuejs.org/v2/guide/conditional.html' + }, + examples: [{ + hash: '736a5dd112a1a114a559218ed20cae08', + title: 'v-if', + screenshot: 'https://gw.alicdn.com/tfs/TB1BAuGb2DH8KJjy1XcXXcpdXXa-540-844.png' + }, { + hash: 'b6b244c4d8623565e77d9de324ca8de1', + title: 'v-else', + screenshot: 'https://gw.alicdn.com/tfs/TB1P.TpdxrI8KJjy0FpXXb5hVXa-540-844.png' + }, { + hash: '22faff4ee6f235c0e8fb98b21c1ea662', + title: 'v-else-if', + screenshot: 'https://gw.alicdn.com/tfs/TB1P.TpdxrI8KJjy0FpXXb5hVXa-540-844.png' + }] + }, { + type: 'v-on', + name: 'v-on', + title: { zh: 'äºä»¶ç»å®ï¼v-onï¼', en: 'v-on' }, + desc: { + zh: 'å¯ä»¥ç¨ v-on æ令çå¬ DOM äºä»¶æ¥è§¦åä¸äº JavaScript 代ç ï¼å¯ä»¥ç®åæ `@`ãç¨å¨æ®éå ç´ ä¸æ¶ï¼åªè½çå¬ åç DOM äºä»¶ãç¨å¨èªå®ä¹å ç´ ç»ä»¶ä¸æ¶ï¼ä¹å¯ä»¥çå¬åç»ä»¶è§¦åçèªå®ä¹äºä»¶ã', + en: 'We can use the v-on directive to listen to DOM events and run some JavaScript when theyâre triggered.' + }, + docLink: { + zh: 'https://cn.vuejs.org/v2/guide/events.html#çå¬äºä»¶', + en: 'https://vuejs.org/v2/guide/events.html' + }, + examples: [{ + hash: 'a3607094a4bf73a069a5c51efb47fe98', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1dcTaewMPMeJjy1XdXXasrXXa-540-844.png' + }, { + hash: '8e3a1cbcf1ba9af94fe6f77e9668e354', + title: { zh: 'å èè¯å¥', en: 'Inline Statement' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1dcTaewMPMeJjy1XdXXasrXXa-540-844.png' + }, { + hash: '3a019f2eca4a6966ee0c3b91e5b2fc5b', + title: { zh: 'ä¼ éåæ°', en: 'Inline Handler' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1dcTaewMPMeJjy1XdXXasrXXa-540-844.png' + }, { + hash: '8581f4d2ff8fb48bdc547d2465c0cf24', + title: { zh: 'once 修饰符', en: '.once Modifier' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1dcTaewMPMeJjy1XdXXasrXXa-540-844.png' + }] + }, { + type: 'v-model', + name: 'v-model', + title: { zh: '表åååç»å®ï¼v-modelï¼', en: 'v-model' }, + desc: { + zh: 'å¯ä»¥ç¨ v-model æ令å¨è¡¨åæ§ä»¶å ç´ ä¸å建ååæ°æ®ç»å®ãå®ä¼æ ¹æ®æ§ä»¶ç±»åèªå¨éåæ£ç¡®çæ¹æ³æ¥æ´æ°å ç´ ã尽管æäºç¥å¥ï¼ä½ v-model æ¬è´¨ä¸ä¸è¿æ¯è¯æ³ç³ï¼å®è´è´£çå¬ç¨æ·çè¾å ¥äºä»¶ä»¥æ´æ°æ°æ®ï¼å¹¶ç¹å«å¤çä¸äºæ端çä¾åã', + en: 'You can use the v-model directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type.' + }, + docLink: { + zh: 'https://cn.vuejs.org/v2/guide/forms.html', + en: 'https://vuejs.org/v2/guide/forms.html' + }, + examples: [{ + hash: 'e1e4413c5252dc763b01f26ce60d5ee4', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1IQ9cdgMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '39684e82ad9a8e0b175f49e058cf7af6', + title: { zh: 'ç»å® <textarea>', en: 'Using <textarea>' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1y738XiqAXuNjy1XdXXaYcVXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'åç§è¡¨åç»ä»¶', en: '' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + // }, { + // hash: '4624d605004fc7eb9f14ca9c5a226fe3', + // title: { zh: 'lazy 修饰符', en: '' }, + // screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + // }, { + // hash: '4624d605004fc7eb9f14ca9c5a226fe3', + // title: { zh: 'trim 修饰符', en: '' }, + // screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + // }, { + // hash: '4624d605004fc7eb9f14ca9c5a226fe3', + // title: { zh: 'number 修饰符', en: '' }, + // screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'v-once', + name: 'v-once', + title: { zh: 'ä¸æ¬¡æ§æ¸²æï¼v-onceï¼', en: 'v-once' }, + desc: { + zh: 'åªæ¸²æå ç´ åç»ä»¶ä¸æ¬¡ãéåçéæ°æ¸²æ,å ç´ /ç»ä»¶åå ¶ææçåèç¹å°è¢«è§ä¸ºéæå 容并跳è¿ãè¿å¯ä»¥ç¨äºä¼åæ´æ°æ§è½ã', + en: 'Render the element and component once only. On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.' + }, + docLink: { + zh: 'https://cn.vuejs.org/v2/api/#v-once', + en: 'https://vuejs.org/v2/api/#v-once' + }, + examples: [{ + hash: 'db5a71d3f621f32261a4208943358092', + title: { zh: 'ä½¿ç¨ v-once', en: 'Using v-once' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1dcTaewMPMeJjy1XdXXasrXXa-540-844.png' + }, { + hash: 'f66f49ad00f58ab8bd1fa580d27900f8', + title: { + zh: 'ä¸ä½¿ç¨ v-once', + en: 'Without v-once' + }, + screenshot: 'https://gw.alicdn.com/tfs/TB1cITaewMPMeJjy1XdXXasrXXa-540-844.png' + }] + }, { + type: 'filters', + name: 'Filters', + title: { zh: 'è¿æ»¤å¨ï¼Filtersï¼', en: 'Filters' }, + desc: { + zh: 'Vue.js å è®¸ä½ èªå®ä¹è¿æ»¤å¨ï¼å¯è¢«ç¨ä½ä¸äºå¸¸è§çææ¬æ ¼å¼åãè¿æ»¤å¨å¯ä»¥ç¨å¨ä¸¤ä¸ªå°æ¹ï¼mustache æå¼å v-bind 表达å¼ãè¿æ»¤å¨åºè¯¥è¢«æ·»å å¨ JavaScript 表达å¼çå°¾é¨ï¼ç±â管éâ符æ示ã', + en: 'Vue.js allows you to define filters that can be used to apply common text formatting.' + }, + docLink: { + zh: 'https://cn.vuejs.org/v2/guide/filters.html', + en: 'https://vuejs.org/v2/guide/filters.html' + }, + examples: [{ + hash: '28df0a4424a9e9fe1411020de20d52c0', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1U8nAdr_I8KJjy1XaXXbsxpXa-540-844.png' + }, { + hash: 'b4eac5ccef8ef954858e9ef0c6aca9d7', + title: { zh: 'ä¼ éé¢å¤åæ°', en: 'Pass Arguments' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1SV_adBfH8KJjy1XbXXbLdXXa-540-844.png' + }, { + hash: '7b4a2ee438abe343b0a2f38556e730f1', + title: { zh: 'è¿æ»¤å¨ä¸²è', en: 'Chained Filters' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1lETpdxrI8KJjy0FpXXb5hVXa-540-844.png' + }] + }, { + type: 'mixins', + name: 'Mixins', + title: { zh: 'æ··åï¼Mixinsï¼', en: 'Mixins' }, + desc: { + zh: 'æ··å (mixins) æ¯ä¸ç§åå Vue ç»ä»¶ä¸å¯å¤ç¨åè½çé常çµæ´»çæ¹å¼ãæ··å对象å¯ä»¥å å«ä»»æç»ä»¶é项ã以ç»ä»¶ä½¿ç¨æ··å对象æ¶ï¼æææ··å对象çé项å°è¢«æ··å ¥è¯¥ç»ä»¶æ¬èº«çé项ã', + en: 'Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be âmixedâ into the componentâs own options.' + }, + docLink: { + zh: 'https://cn.vuejs.org/v2/guide/mixins.html', + en: 'https://vuejs.org/v2/guide/mixins.html' + }, + examples: [{ + hash: 'c69cb31319ffe8e0b25543cfabcf06d6', + title: { zh: 'æç®ä¾å', en: 'Sample' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1HJHcdtfJ8KJjy0FeXXXKEXXa-540-844.png' + }, { + hash: '804d427a56528c3dc2706e77b93df516', + title: { zh: 'å ¨å±æ··å', en: 'Global Mixin' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1HJHcdtfJ8KJjy0FeXXXKEXXa-540-844.png' + }, { + hash: '92ab52525cb0d7d55d1ef007df90cf77', + title: { zh: 'çå½å¨ææ··å', en: 'Lifecycle Mixin' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1bRLCdwDD8KJjy0FdXXcjvXXa-540-844.png' + }, { + hash: 'ee84c44bb3f4b23f83d52aecad30f8ea', + title: { zh: 'é项å并', en: 'Mixin Options' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1FUTpdxrI8KJjy0FpXXb5hVXa-540-844.png' + }] + }, { + type: 'component', + name: { zh: 'ç»ä»¶', en: 'Component' }, + title: { zh: 'ç»ä»¶', en: 'Component' }, + desc: { + zh: 'ç»ä»¶ç³»ç»æ¯ Vue çå¦ä¸ä¸ªéè¦æ¦å¿µï¼å 为å®æ¯ä¸ç§æ½è±¡ï¼å 许æ们使ç¨å°åãç¬ç«åé常å¯å¤ç¨çç»ä»¶æ建大ååºç¨ãä»ç»æ³æ³ï¼å ä¹ä»»æç±»åçåºç¨çé¢é½å¯ä»¥æ½è±¡ä¸ºä¸ä¸ªç»ä»¶æ ã', + en: 'The component system is another important concept in Vue, because itâs an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components' + }, + docLink: { + zh: 'https://cn.vuejs.org/v2/guide/index.html#ç»ä»¶ååºç¨æ建', + en: 'https://vuejs.org/v2/guide/#Composing-with-Components' + }, + examples: [{ + hash: '59aeb1600ee976ea61faf354a9fee299', + title: { zh: '使ç¨åç»ä»¶', en: 'Composing Components' }, + screenshot: 'https://gw.alicdn.com/tfs/TB12KPGbS_I8KJjy0FoXXaFnVXa-540-844.png' + }, { + hash: '3373a87306d0e0ccf463ac492aeb070c', + title: { zh: 'ä¼ éå±æ§', en: 'Passing Data with Props' }, + screenshot: 'https://gw.alicdn.com/tfs/TB12KPGbS_I8KJjy0FoXXaFnVXa-540-844.png' + }, { + hash: 'b2ac35b0cc13c4c64c5adbfbeed5b3f7', + title: { zh: 'åç»ä»¶çå¼ç¨', en: 'Child Component Refs' }, + screenshot: 'https://gw.alicdn.com/tfs/TB12KPGbS_I8KJjy0FoXXaFnVXa-540-844.png' + }, { + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: 'å¤å±åç»ä»¶', en: 'Deep Composed Components' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: 'çå½å¨æ', en: 'Lifecycles' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: '注åå ¨å±ç»ä»¶', en: 'Global Registration' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '4c2eadc3fe105d643cd0ade59b3bde54', + title: { zh: 'éå½ç»ä»¶', en: 'Recursive Components' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1U868icrI8KJjy0FhXXbfnpXa-540-844.png' + }, { + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: 'å¼æ¥ç»ä»¶', en: '' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: 'å è模æ¿', en: '' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'built-in', + name: { zh: 'å ç½®ç»ä»¶', en: 'Built-in' }, + title: { zh: 'å ç½®ç»ä»¶', en: 'Built-in Components' }, + examples: [{ + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: 'å¨æç»ä»¶ <component>', en: 'Dynamic Components' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: 'ç¨ <slot> ååå 容', en: 'Content Distribution with Slots' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: '4624d605004fc7eb9f14ca9c5a226fe3', + title: { zh: 'å个 solt', en: 'Single Slot' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: 'å ·å slot', en: 'Named Slot' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: '<transition>', en: '<transition>' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: '<transition-group>', en: '<transition-group>' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + // }, { + // hash: 'ccefdea9e9ef695acca7fb1b439277e2', + // title: { zh: '<keep-alive>', en: ' <keep-alive>' }, + // screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }, { + type: 'communication', + name: { zh: 'ç»ä»¶éä¿¡', en: 'Communication' }, + title: { zh: 'ç»ä»¶éä¿¡', en: 'Component Communication' }, + examples: [{ + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: 'èªå®ä¹äºä»¶', en: 'Custom Events' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: 'ç¶åç»ä»¶éä¿¡', en: 'Parent-Child Communication' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: '表åç»ä»¶ä¼ å¼', en: 'Form Components' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }, { + hash: 'ccefdea9e9ef695acca7fb1b439277e2', + title: { zh: 'éç¶åç»ä»¶éä¿¡', en: 'Non Parent-Child Communication' }, + screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png' + }] + }] +} http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/749cf999/examples/website/ExampleList.vue ---------------------------------------------------------------------- diff --git a/examples/website/ExampleList.vue b/examples/website/ExampleList.vue new file mode 100644 index 0000000..b5b9202 --- /dev/null +++ b/examples/website/ExampleList.vue @@ -0,0 +1,50 @@ +<template> + <main ref="container" class="example-panel"> + <section class="example-section" v-for="(category, i) in category.group" :key="`${category.type}-${i}`"> + <h2 :ref="category.type" class="title" @click="scrollTo(category.type)">{{category.title || category.name | i18n}}</h2> + <p class="desc" v-if="category.desc || category.docLink"> + <span class="text" v-if="category.desc">{{category.desc | i18n}}</span> + <a class="link" v-if="category.docLink" :href="category.docLink | i18n | relative">Read more</a> + </p> + <div class="example-list"> + <figure class="example-card" v-for="example in category.examples" :key="example.hash | i18n"> + <a class="preview" target="_blank" :href="example.hash | i18n | url"> + <img class="screenshot" :src="example.screenshot | i18n"> + </a> + <figcaption class="message">{{example.title | i18n}}</figcaption> + </figure> + </div> + </section> + </main> +</template> + +<script> + export default { + props: ['type', 'category', 'language'], + filters: { + url (hash) { + return `http://dotwe.org/vue/${hash}` + } + }, + methods: { + scrollTo (hash) { + if (!hash) { + hash = this.parseHash().hash + } + const $container = this.$refs.container + const $tabs = this.$refs[hash] + if ($tabs && $tabs.length) { + // TODO: smooth scroll + $container.scrollTop = $tabs[0].offsetTop + if (typeof location !== 'undefined') { + location.hash = `#${this.type}/${hash}` + } + } else { + $container.scrollTop = 0 + } + } + }, + mounted () { this.scrollTo() }, + updated () { this.scrollTo() } + } +</script>
