[WEEX-86][doc] Update modal document.
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/40b5aaf6 Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/40b5aaf6 Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/40b5aaf6 Branch: refs/heads/master Commit: 40b5aaf631c6248af1b2b6f7f62dc445bb9cdb8d Parents: aaf57d5 Author: miomin <[email protected]> Authored: Thu Jan 18 15:48:15 2018 +0800 Committer: miomin <[email protected]> Committed: Thu Jan 18 15:48:15 2018 +0800 ---------------------------------------------------------------------- source/cn/references/modules/modal.md | 129 +++++++++++------------------ source/references/modules/modal.md | 123 +++++++++++---------------- 2 files changed, 97 insertions(+), 155 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/40b5aaf6/source/cn/references/modules/modal.md ---------------------------------------------------------------------- diff --git a/source/cn/references/modules/modal.md b/source/cn/references/modules/modal.md index 175748d..2ffe7a5 100644 --- a/source/cn/references/modules/modal.md +++ b/source/cn/references/modules/modal.md @@ -22,7 +22,17 @@ version: 2.1 - `message {string}`ï¼å±ç¤ºçå 容 - `duration {number}`ï¼å±ç¤ºçæç»æ¶é´ï¼ä»¥ç§ä¸ºåä½ï¼ - Android: å¦ææ¶é´é¿åº¦å¤§äº3sï¼å°ä½¿ç¨ä¸ä¸ªè¢«ç§°ä¸º**LONG**çç³»ç»åé, å¦å使ç¨**SHORT**è¿ä¸ªç³»ç»åé - - iOS: æç»çæ¶é´åDurationç¸åã + - iOS: æç»çæ¶é´åDurationç¸å + +#### åºæ¬ç¨æ³ +``` +var modal = weex.requireModule('modal') +modal.toast({ + message: 'This is a toast', + duration: 0.3 +}) +``` + ### `alert(options, callback)` @@ -35,6 +45,19 @@ version: 2.1 - `okTitle {string}`ï¼ç¡®å®æé®ä¸æ¾ç¤ºçæåä¿¡æ¯ï¼é»è®¤æ¯âOKâ - `callback {Function}`ï¼ç¨æ·æä½å®æåçåè° +#### åºæ¬ç¨æ³ +``` +var modal = weex.requireModule('modal') +modal.alert({ + message: 'This is a alert', + duration: 0.3 +}, function (value) { + console.log('alert callback', value) +}) +``` + + + ### `confirm(options, callback)` 确认æ¡ç¨äºä½¿ç¨æ·å¯ä»¥éªè¯æè æ¥åæäºä¿¡æ¯ãå½ç¡®è®¤æ¡åºç°åï¼ç¨æ·éè¦ç¹å»ç¡®å®æè åæ¶æé®æè½ç»§ç»è¿è¡æä½ã @@ -47,6 +70,18 @@ version: 2.1 - `cancelTitle {string}`ï¼åæ¶æé®ä¸æ¾ç¤ºçæåä¿¡æ¯ï¼é»è®¤æ¯ `Cancel` - `callback {function (result)}`ï¼ç¨æ·æä½å®æåçåè°ï¼åè°å½æ°çåæ° `result` æ¯ç¡®å®æé®ä¸çæåä¿¡æ¯å符串 +#### åºæ¬ç¨æ³ +``` +var modal = weex.requireModule('modal') +modal.confirm({ + message: 'Do you confirm ?', + duration: 0.3 +}, function (value) { + console.log('confirm callback', value) +}) +``` + + ### `prompt(options, callback)` æ示æ¡ç»å¸¸ç¨äºæ示ç¨æ·å¨è¿å ¥é¡µé¢åè¾å ¥æ个å¼ãå½æ示æ¡åºç°åï¼ç¨æ·éè¦è¾å ¥æ个å¼ï¼ç¶åç¹å»ç¡®è®¤æåæ¶æé®æè½ç»§ç»æä½ã @@ -57,86 +92,22 @@ version: 2.1 - `message {string}`ï¼æ示æ¡å è¦æ¾ç¤ºçæåä¿¡æ¯ - `okTitle {string}`ï¼ç¡®è®¤æé®ä¸æ¾ç¤ºçæåä¿¡æ¯ï¼é»è®¤æ¯ `OK` - `cancelTitle {string}`ï¼åæ¶æé®ä¸æ¾ç¤ºçæåä¿¡æ¯ï¼é»è®¤æ¯ `Cancel` -- `callback {function (ret)}`ï¼ç¨æ·æä½å®æåçåè°ï¼åè°å½æ°çåæ° `ret` æ ¼å¼å½¢å¦ `{ result: 'OK', data: 'hello world' }`ï¼å¦ä¸ +- `callback {function (ret)}`ï¼ç¨æ·æä½å®æåçåè°ï¼åè°å½æ°çåæ° `ret` æ ¼å¼å½¢å¦ `{ result: 'OK', data: 'hello world' }`ï¼å¦ä¸ï¼ - `result {string}`ï¼ç¨æ·æä¸çæé®ä¸çæåä¿¡æ¯ - `data {string}`ï¼ç¨æ·è¾å ¥çæåä¿¡æ¯ - -## Example - -```html -<template> - <div class="wrapper"> - <text class="button" @click="showToast">Toast</text> - <text class="button" @click="showAlert">Alert</text> - <text class="button" @click="showConfirm">Confirm</text> - <text class="button" @click="showPrompt">Prompt</text> - </div> -</template> - -<script> - var modal = weex.requireModule('modal') - - export default { - methods: { - showToast (event) { - console.log('will show toast') - modal.toast({ - message: 'This is a toast', - duration: 0.3 - }) - }, - showAlert (event) { - console.log('will show alert') - modal.alert({ - message: 'This is a alert', - duration: 0.3 - }, function (value) { - console.log('alert callback', value) - }) - }, - showConfirm (event) { - console.log('will show confirm') - modal.confirm({ - message: 'Do you confirm ?', - duration: 0.3 - }, function (value) { - console.log('confirm callback', value) - }) - }, - showPrompt (event) { - console.log('will show prompt') - modal.prompt({ - message: 'This is a prompt', - duration: 0.3 - }, function (value) { - console.log('prompt callback', value) - }) - } - } - }; -</script> - -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .button { - font-size: 60px; - width: 450px; - text-align: center; - margin-top: 30px; - margin-left: 150px; - padding-top: 20px; - padding-bottom: 20px; - border-width: 2px; - border-style: solid; - color: #666666; - border-color: #DDDDDD; - background-color: #F5F5F5 - } -</style> +#### åºæ¬ç¨æ³ +``` +var modal = weex.requireModule('modal') +modal.prompt({ + message: 'This is a prompt', + duration: 0.3 +}, function (value) { + console.log('prompt callback', value) +}) ``` -[try it](http://dotwe.org/vue/a7dddfb24edb72be947fc4eec3803f1d) + +## ç¤ºä¾ + +[Modal demo](http://dotwe.org/vue/a7dddfb24edb72be947fc4eec3803f1d) http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/40b5aaf6/source/references/modules/modal.md ---------------------------------------------------------------------- diff --git a/source/references/modules/modal.md b/source/references/modules/modal.md index 04d89a3..4005769 100644 --- a/source/references/modules/modal.md +++ b/source/references/modules/modal.md @@ -22,6 +22,16 @@ A toast provides simple feedback about an operation in a small popup. For exampl - For Android: If the duration is longer than 3, it will use a system defined variable called **LONG**, otherwise it will use another variable called **SHORT** - For iOS: It will show the toast during the specified time. +#### Basic Usage +``` +var modal = weex.requireModule('modal') +modal.toast({ + message: 'This is a toast', + duration: 0.3 +}) +``` + + ### alert(options, callback) An alert box is often used if you want to make sure information comes through to the user. @@ -36,6 +46,18 @@ When an alert box pops up, the user will have to click "OK" to proceed. This method has a callback function whose arguments will be: - `result` (string): the title text of the confirm button that clicked by user. +#### Basic Usage +``` +var modal = weex.requireModule('modal') +modal.alert({ + message: 'This is a alert', + duration: 0.3 +}, function (value) { + console.log('alert callback', value) +}) +``` + + ### confirm(options, callback) A confirm box is often used if you want the user to verify or accept something. @@ -51,6 +73,18 @@ When a confirm box pops up, the user will have to click either confirm or cancel This method has a callback function whose arguments will be: - `result`(string): the title text of the button that clicked by user. +#### Basic Usage +``` +var modal = weex.requireModule('modal') +modal.confirm({ + message: 'Do you confirm ?', + duration: 0.3 +}, function (value) { + console.log('confirm callback', value) +}) +``` + + ### prompt(options, callback) A prompt box is often used if you want the user to input a value before entering a page. @@ -67,81 +101,18 @@ When a prompt box pops up, the user will have to click either confirm or cancel - `result` (string): the title of the button that clicked by user. - `data` (string): the value of the text that entered by user. -## Example - -```html -<template> - <div class="wrapper"> - <text class="button" @click="showToast">Toast</text> - <text class="button" @click="showAlert">Alert</text> - <text class="button" @click="showConfirm">Confirm</text> - <text class="button" @click="showPrompt">Prompt</text> - </div> -</template> - -<script> - var modal = weex.requireModule('modal') - - export default { - methods: { - showToast (event) { - console.log('will show toast') - modal.toast({ - message: 'This is a toast', - duration: 0.3 - }) - }, - showAlert (event) { - console.log('will show alert') - modal.alert({ - message: 'This is a alert', - duration: 0.3 - }, function (value) { - console.log('alert callback', value) - }) - }, - showConfirm (event) { - console.log('will show confirm') - modal.confirm({ - message: 'Do you confirm ?', - duration: 0.3 - }, function (value) { - console.log('confirm callback', value) - }) - }, - showPrompt (event) { - console.log('will show prompt') - modal.prompt({ - message: 'This is a prompt', - duration: 0.3 - }, function (value) { - console.log('prompt callback', value) - }) - } - } - }; -</script> - -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .button { - font-size: 60px; - width: 450px; - text-align: center; - margin-top: 30px; - margin-left: 150px; - padding-top: 20px; - padding-bottom: 20px; - border-width: 2px; - border-style: solid; - color: #666666; - border-color: #DDDDDD; - background-color: #F5F5F5 - } -</style> +#### Basic Usage ``` +var modal = weex.requireModule('modal') +modal.prompt({ + message: 'This is a prompt', + duration: 0.3 +}, function (value) { + console.log('prompt callback', value) +}) +``` + + +## Example -[try it](http://dotwe.org/vue/a7dddfb24edb72be947fc4eec3803f1d) +[Modal demo](http://dotwe.org/vue/a7dddfb24edb72be947fc4eec3803f1d)
