├── .npmignore
├── src
    ├── images
    │   ├── .DS_Store
    │   ├── loading.gif
    │   ├── logo-d.png
    │   └── ufo.svg
    ├── app.ux
    ├── pages
    │   ├── load-more
    │   │   └── index.ux
    │   ├── search-bar
    │   │   └── index.ux
    │   ├── prompt
    │   │   └── index.ux
    │   ├── mask
    │   │   └── index.ux
    │   ├── icon
    │   │   └── index.ux
    │   ├── qrcode
    │   │   └── index.ux
    │   ├── vcode
    │   │   └── index.ux
    │   ├── divider
    │   │   └── index.ux
    │   ├── media
    │   │   └── index.ux
    │   ├── keyboard
    │   │   └── index.ux
    │   ├── barcode
    │   │   └── index.ux
    │   ├── switch
    │   │   └── index.ux
    │   ├── rating
    │   │   └── index.ux
    │   ├── tabbar
    │   │   ├── index.ux
    │   │   ├── page1
    │   │   │   └── index.ux
    │   │   └── page2
    │   │   │   └── index.ux
    │   ├── result
    │   │   └── index.ux
    │   ├── avatar
    │   │   └── index.ux
    │   ├── input
    │   │   └── index.ux
    │   ├── index
    │   │   └── index.ux
    │   ├── input-number
    │   │   └── index.ux
    │   ├── tag
    │   │   └── index.ux
    │   ├── navbar
    │   │   └── index.ux
    │   ├── message
    │   │   └── index.ux
    │   ├── pagination
    │   │   └── index.ux
    │   ├── badge
    │   │   └── index.ux
    │   ├── upload
    │   │   └── index.ux
    │   ├── action-sheet
    │   │   └── index.ux
    │   ├── counter
    │   │   └── index.ux
    │   ├── alert
    │   │   └── index.ux
    │   ├── gallery
    │   │   └── index.ux
    │   ├── button
    │   │   └── index.ux
    │   ├── segmented-control
    │   │   └── index.ux
    │   ├── popup
    │   │   └── index.ux
    │   ├── steps
    │   │   └── index.ux
    │   ├── fab-button
    │   │   └── index.ux
    │   ├── radio
    │   │   └── index.ux
    │   ├── spin
    │   │   └── index.ux
    │   ├── select
    │   │   └── index.ux
    │   ├── toast
    │   │   └── index.ux
    │   ├── checkbox
    │   │   └── index.ux
    │   ├── image
    │   │   └── index.ux
    │   ├── circle
    │   │   └── index.ux
    │   ├── accordion
    │   │   └── index.ux
    │   ├── textarea
    │   │   └── index.ux
    │   ├── countdown
    │   │   └── index.ux
    │   ├── card
    │   │   └── index.ux
    │   ├── dialog
    │   │   └── index.ux
    │   ├── popover
    │   │   └── index.ux
    │   ├── calendar
    │   │   └── index.ux
    │   ├── color
    │   │   └── index.ux
    │   ├── home
    │   │   └── index.ux
    │   ├── filter-bar
    │   │   └── index.ux
    │   └── sticky
    │   │   └── index.ux
    ├── util.js
    └── manifest.json
├── dist
    └── com.apex.ui.quickapp.release.rpk
├── .gitignore
├── babel.config.js
├── README.md
├── package.json
├── sign
    ├── debug
    │   ├── certificate.pem
    │   └── private.pem
    └── release
    │   ├── certificate.pem
    │   └── private.pem
└── .eslintrc.json


/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 | dist


--------------------------------------------------------------------------------
/src/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivoquickapp/apex-ui-sample/HEAD/src/images/.DS_Store


--------------------------------------------------------------------------------
/src/images/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivoquickapp/apex-ui-sample/HEAD/src/images/loading.gif


--------------------------------------------------------------------------------
/src/images/logo-d.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivoquickapp/apex-ui-sample/HEAD/src/images/logo-d.png


--------------------------------------------------------------------------------
/dist/com.apex.ui.quickapp.release.rpk:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivoquickapp/apex-ui-sample/HEAD/dist/com.apex.ui.quickapp.release.rpk


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .idea/
 2 | .ide/
 3 | .DS_Store
 4 | .vscode
 5 | src/.DS_Store
 6 | src/images/.DS_Store
 7 | 
 8 | node_modules/
 9 | build/
10 | dist
11 | 
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/src/app.ux:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   /**
 3 |    * 应用级别的配置，供所有页面公用
 4 |    */
 5 |   import util from './util'
 6 | 
 7 |   export default {
 8 |     showMenu: util.showMenu,
 9 |     createShortcut: util.createShortcut
10 |   }
11 | </script>


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true)
3 |   return {
4 |     presets: ['@babel/preset-env'],
5 |     plugins: ['@babel/plugin-transform-modules-commonjs'],
6 |     babelrcRoots: ['.', 'node_modules']
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Apex-UI组件库示例
 2 | 示例源码，欢迎使用调试器扫描以下二维码体验。如果调试器扫码不成功，可以用浏览器扫码下载到本地后安装查看。
 3 | 
 4 | <img width="200" src="https://github.com/vivoquickapp/apex-ui-docs/blob/master/docs/assets/qrcode.png?raw=true">
 5 | 
 6 | ## 使用
 7 | - [Apex-UI组件库官方文档](https://vivoquickapp.github.io/apex-ui-docs/)
 8 | - [Apex-UI组件库源码](https://github.com/vivoquickapp/apex-ui)
 9 | - 使用[快应用开发工具](https://www.quickapp.cn/docCenter/IDEPublicity)打开该示例代码。
10 | 
11 | ## 贡献
12 | 
13 | 如果你有 bug 反馈或其他任何建议，欢迎提 issue 或者 PR 给我们。
14 | 
15 | ## 截图
16 | 
17 | ![截图](https://github.com/vivoquickapp/apex-ui-docs/blob/master/docs/assets/apex-ui-sample.jpg?raw=true)
18 | 


--------------------------------------------------------------------------------
/src/pages/load-more/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-load-more" src="apex-ui/components/load-more/index"></import>
 2 | <template>
 3 |   <div class="wrap">
 4 |     <my-load-more></my-load-more>
 5 |     <my-load-more tip="暂无数据" loading="{{ false }}"></my-load-more>
 6 |     <my-load-more loading="{{ false }}"></my-load-more>
 7 |   </div>
 8 | </template>
 9 | <style lang="less">
10 |   .wrap {
11 |     flex-direction: column;
12 |     padding: 20px;
13 |     .title {
14 |       margin: 20px;
15 |     }
16 |   }
17 | </style>
18 | <script>
19 |     export default {
20 |         data() {
21 |             return {}
22 |         }
23 |     }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/src/pages/search-bar/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-search-bar" src="apex-ui/components/search-bar/index.ux"></import>
 2 | <template>
 3 |   <div class="wrap">
 4 |     <text class="title">Normal</text>
 5 |     <my-search-bar></my-search-bar>
 6 |     <text class="title">Focus</text>
 7 |     <my-search-bar input-focus="{{true}}"></my-search-bar>
 8 |     <text class="title">Show cancel button</text>
 9 |     <my-search-bar has-cancel="{{true}}"></my-search-bar>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   
16 | }
17 | </script>
18 | 
19 | <style lang="less">
20 | .wrap {
21 |   flex-direction: column;
22 |   background-color: #f8f8f8;
23 |   .title {
24 |     padding: 30px;
25 |   }
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "apex-ui-sample",
 3 |   "version": "1.0.0",
 4 |   "subversion": {
 5 |     "toolkit": "0.6.2"
 6 |   },
 7 |   "description": "apex-ui components sample quickapp",
 8 |   "scripts": {
 9 |     "build": "hap build",
10 |     "release": "hap release",
11 |     "server": "hap server",
12 |     "watch": "hap watch"
13 |   },
14 |   "devDependencies": {
15 |     "@types/quickapp": "git+https://github.com/vivoquickapp/quickapp-types.git",
16 |     "apex-ui": "latest",
17 |     "babel-eslint": "^10.0.1",
18 |     "eslint": "^5.12.1",
19 |     "eslint-plugin-hybrid": "0.0.5",
20 |     "hap-toolkit": "^0.6.2",
21 |     "less": "^3.9.0",
22 |     "less-loader": "^4.1.0"
23 |   },
24 |   "browserslist": [
25 |     "chrome 65"
26 |   ]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/pages/prompt/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-prompt" src="apex-ui/components/prompt/index.ux"></import>
 2 | <import name="my-toast" src="apex-ui/components/toast/index.ux"></import>
 3 | <template>
 4 |   <div class="wrap">
 5 |     <my-prompt title="消息提醒" text="提醒你有事情发生了" image="/images/logo-d.png" buttons="{{ buttons }}" ontap="tapHandler"></my-prompt>
 6 |     <my-toast id="toast"></my-toast>
 7 |   </div>
 8 | </template>
 9 | <style lang="less"></style>
10 | <script>
11 |     export default {
12 |         data() {
13 |             return {
14 |                 buttons: [
15 |                     {text: '按钮1', size: 24},
16 |                     {text: '按钮2', size: 36, disabled: true}
17 |                 ]
18 |             }
19 |         },
20 |         tapHandler(e) {
21 |             this.$child('toast').showToast({
22 |                 content: '点击的按钮是：' + e.detail.value.text
23 |             })
24 |         }
25 |     }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/src/pages/mask/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-mask" src="apex-ui/components/mask/index"></import>
 2 | <import name="my-button" src="apex-ui/components/button/index.ux"></import>
 3 | 
 4 | <template>
 5 |   <div class="wrap">
 6 |     <my-mask id="mask"></my-mask>
 7 | 
 8 |     <my-button type="success" ontap="handleClickShow">显示 背景幕</my-button>
 9 |     <my-button type="ghost" ontap="handleClickHide">隐藏 背景幕</my-button>
10 |   </div>
11 | </template>
12 | <style lang="less">
13 |   .wrap {
14 |     flex-direction: column;
15 |     justify-content: center;
16 |     .text-center{
17 |       text-align: center;
18 |       font-size: 40px;
19 |       margin-top: 30px;
20 |     }
21 |   }
22 | </style>
23 | <script>
24 |   export default {
25 |     data() {
26 |       return {}
27 |     },
28 |     handleClickShow(){
29 |       this.$child('mask').show()
30 |     },
31 |     handleClickHide(){
32 |       this.$child('mask').hide()
33 |     }
34 |   } 
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/pages/icon/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-icon" src="apex-ui/components/icon/index"></import>
 2 | <template>
 3 |   <div class="wrap">
 4 |     <block for="icon in iconMap">
 5 |       <div class="icon">
 6 |         <my-icon type="{{icon}}" size="48"></my-icon>
 7 |         <text class="name">{{icon}}</text>
 8 |       </div>
 9 |     </block>
10 |   </div>
11 | </template>
12 | <style lang="less">
13 |   .wrap {
14 |     flex-direction: row;
15 |     flex-wrap: wrap;
16 |     .icon {
17 |       flex-direction: column;
18 |       justify-content: center;
19 |       width: 250px;
20 |       height: 200px;
21 |       .name {
22 |         font-size: 22px;
23 |         text-align: center;
24 |         margin-top: 20px;
25 |       }
26 |     }
27 |   }
28 | </style>
29 | <script>
30 |     import {icons} from 'apex-ui/components/icon/icons';
31 | 
32 |     export default {
33 |         data() {
34 |             return {
35 |                 iconMap: Object.keys(icons)
36 |             }
37 |         }
38 |     }
39 | </script>
40 | 


--------------------------------------------------------------------------------
/src/pages/qrcode/index.ux:
--------------------------------------------------------------------------------
 1 | <import src="apex-ui/components/qrcode/index" name="my-qrcode"></import>
 2 | <import src="apex-ui/components/input/index" name="my-input"></import>
 3 | <template>
 4 |   <div class="wrap">
 5 |     <text class="note">请输入文字，即使输入即时生成</text>
 6 |     <my-input value="{{content}}" placeholder="请输入要生成二维码的内容" onchange="changeHandler()"></my-input>
 7 |     <my-qrcode content="{{content}}"></my-qrcode>
 8 |     <text class="note">提示：长按二维码可保存到相册</text>
 9 |   </div>
10 | </template>
11 | <style lang="less">
12 |   .wrap {
13 |     flex-direction: column;
14 |     .note {
15 |       padding: 20px;
16 |     }
17 |   }
18 | </style>
19 | <script>
20 |     export default {
21 |         data() {
22 |             return {
23 |                 content: 'https://vivoquickapp.github.io/apex-ui-docs/'
24 |             }
25 |         },
26 |         changeHandler({detail}) {
27 |             console.log(this.content, detail);
28 |             this.content = detail.value
29 |         }
30 |     }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/images/ufo.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1570782093592" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3520" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M983.359394 253.724679c-47.535643-78.727039-178.554652-93.514837-335.864444-51.341319-54.628178-51.052746-127.761825-82.531692-208.419843-82.531692-168.811754 0-305.683051 136.871297-305.683051 305.683051 0 28.797883 4.267187 56.529481 11.703553 82.935897C38.205137 626.40154-7.342222 746.812957 39.532365 824.358077c73.308633 121.217782 344.023264 91.785449 604.648097-65.811892C904.806317 600.976474 1056.664957 374.943484 983.359394 253.724679zM312.726467 598.179778c-53.099359-38.944987-87.605244-101.759615-87.605244-172.645059 0-118.104885 95.764064-213.867926 213.896578-213.867926 103.374392 0 189.624778 73.307609 209.601762 170.742732C584.737628 608.904027 312.726467 598.179778 312.726467 598.179778z" p-id="3521" fill="#bfbfbf"></path></svg>


--------------------------------------------------------------------------------
/src/pages/vcode/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-vcode" src="apex-ui/components/vcode/index.ux"></import>
 2 | <import name="my-input" src="apex-ui/components/input/index.ux"></import>
 3 | <template>
 4 |   <div>
 5 |     <div class="wrap">
 6 |       <div class="row">
 7 |         <my-input title="验证码" value="{{content}}" placeholder="请输入验证码" onchange="changeHandler()"></my-input>
 8 |         <my-vcode onchange="changeHandler()"></my-vcode>
 9 |       </div>
10 |       <div class="row">
11 |         <my-input title="验证码" value="{{content}}" placeholder="请输入验证码" onchange="changeHandler()"></my-input>
12 |         <my-vcode onchange="changeHandler()"></my-vcode>
13 |       </div>
14 |       <text>tips:点击验证码可刷新</text>
15 |     </div>
16 |   </div>
17 | </template>
18 | <style lang="less">
19 |   .wrap {
20 |     padding: 20px;
21 |     flex-direction: column;
22 | 
23 |     .row {
24 |       padding: 20px 0;
25 |     }
26 | 
27 |     text {
28 |       padding: 20px;
29 |     }
30 |   }
31 | </style>
32 | <script>
33 |     export default {
34 |         changeHandler(e) {
35 |             console.log('vcode value', e.detail.value)
36 |         }
37 |     }
38 | </script>
39 | 


--------------------------------------------------------------------------------
/src/pages/divider/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-divider" src="apex-ui/components/divider/index"></import>
 2 | <template>
 3 |   <div class="wrap">
 4 |     <text class="title">基本用法</text>
 5 |     <my-divider content="加载已经完成,没有其他数据"></my-divider>
 6 |     <my-divider content="加载已经完成,没有其他数据" color="#2d8cf0" line-color="#2d8cf0"></my-divider>
 7 |     <my-divider content="加载已经完成,没有其他数据" line-color="#2d8cf0"></my-divider>
 8 |     <my-divider content="加载已经完成,没有其他数据" color="#ed3f14" line-color="#ed3f14"></my-divider>
 9 |     <my-divider content="加载已经完成,没有其他数据" color="#ff9900" line-color="#ff9900"></my-divider>
10 |     <text class="title">自定义内容</text>
11 |     <my-divider color="#2d8cf0" line-color="#2d8cf0"><text>加载已经完成,没有其他数据</text></my-divider>
12 |     <my-divider color="#ed3f14" line-color="#ed3f14"><text>加载已经完成,没有其他数据</text></my-divider>
13 |   </div>
14 | </template>
15 | <style lang="less">
16 |   .wrap {
17 |     flex-direction: column;
18 |     flex-wrap: wrap;
19 |     .title {
20 |       margin: 20px;
21 |     }
22 |   }
23 | </style>
24 | <script>
25 |     export default {
26 |         data() {
27 |             return {}
28 |         }
29 |     }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/src/pages/media/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-media" src="apex-ui/components/media/index.ux"></import>
 2 | 
 3 | <template>
 4 |   <div class="wrap">
 5 |     <text class="title">默认</text>
 6 |     <my-media title="标题" label="文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本"></my-media>
 7 |     <text class="title">thumb</text>
 8 |     <my-media thumb="../../images/logo-d.png" title="标题" label="文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本"></my-media>
 9 |     <text class="title">thumbStyle</text>
10 |     <my-media thumb="../../images/logo-d.png" thumb-style="border-radius:150px;" title="标题" label="文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本"></my-media>
11 |     <text class="title">nesting</text>
12 |     <my-media thumb="../../images/logo-d.png" title="标题" label="文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本">
13 |       <my-media thumb="../../images/logo-d.png" title="标题" label="文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本"></my-media>
14 |     </my-media>
15 |   </div>
16 | </template>
17 | <style lang="less">
18 | 
19 | .wrap {
20 |   flex-direction: column;
21 | 
22 |   .title {
23 |     margin: 20px;
24 |   }
25 | }
26 | </style>
27 | <script>
28 | export default {
29 |   data() {
30 |     return {
31 |     }
32 |   }
33 | }
34 | </script>


--------------------------------------------------------------------------------
/src/pages/keyboard/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-keyboard" src="apex-ui/components/keyboard/index"></import>
 2 | <import name="my-button" src="apex-ui/components/button/index"></import>
 3 | <template>
 4 |   <div class="wrap">
 5 |     <my-button ontap="showKeyboard('keyboard')">打开默认键盘</my-button>
 6 |     <my-button ontap="showKeyboard('keyboard1')">打开自定义键盘</my-button>
 7 |     <my-keyboard id="keyboard"></my-keyboard>
 8 |     <my-keyboard id="keyboard1" disorder="{{true}}" maxlength="8" title="我的密码" info="数字键盘"
 9 |                  oncomplete="verify()"></my-keyboard>
10 |   </div>
11 | </template>
12 | <style lang="less">
13 |   .wrap {
14 |     padding: 20px;
15 |     flex-direction: column;
16 |   }
17 | </style>
18 | <script>
19 |     import prompt from '@system.prompt';
20 | 
21 |     export default {
22 |         data() {
23 |             return {}
24 |         },
25 |         showKeyboard(key) {
26 |             this.$child(key).show()
27 |         },
28 |         verify(e) {
29 |             const password = e.detail.numbers.join('');
30 |             prompt.showToast({
31 |                 message: '我的密码是：' + password
32 |             })
33 |         }
34 |     }
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/pages/barcode/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-input" src="apex-ui/components/input/index.ux"></import>
 2 | <import name="my-barcode" src="apex-ui/components/barcode/index"></import>
 3 | <template>
 4 |   <div class="wrap">
 5 |     <div class="panel">
 6 |       <my-input value="{{ number }}" type="number" maxlength="13" onchange="changeHandler()" placeholder="请输入13位有效条形码编码"></my-input>
 7 |       <text>提示：扫描只能识别有效的条形码</text>
 8 |       <div class="barcode">
 9 |         <my-barcode number="{{ number }}"></my-barcode>
10 |       </div>
11 |     </div>
12 |   </div>
13 | </template>
14 | <style lang="less">
15 |   .wrap {
16 |     flex-direction: column;
17 |     .panel {
18 |       padding: 20px;
19 |       flex-direction: column;
20 |       .barcode {
21 |         padding: 20px 0;
22 |         justify-content: center;
23 |         align-items: center;
24 |       }
25 |     }
26 |   }
27 | </style>
28 | <script>
29 | export default {
30 |     data() {
31 |         return {
32 |             number: 6256325654126
33 |         }
34 |     },
35 |     changeHandler({detail}) {
36 |         console.log('number changed', detail);
37 |         this.number = detail.value;
38 |     },
39 | }
40 | </script>
41 | 


--------------------------------------------------------------------------------
/sign/debug/certificate.pem:
--------------------------------------------------------------------------------
 1 | -----BEGIN CERTIFICATE-----
 2 | MIIDMTCCAhmgAwIBAgIJAMKpjyszxkDpMA0GCSqGSIb3DQEBCwUAMC4xCzAJBgNV
 3 | BAYTAkNOMQwwCgYDVQQKDANSUEsxETAPBgNVBAMMCFJQS0RlYnVnMCAXDTE3MDQx
 4 | OTAyMzE0OVoYDzIxMTYwMzI2MDIzMTQ5WjAuMQswCQYDVQQGEwJDTjEMMAoGA1UE
 5 | CgwDUlBLMREwDwYDVQQDDAhSUEtEZWJ1ZzCCASIwDQYJKoZIhvcNAQEBBQADggEP
 6 | ADCCAQoCggEBAK3kPd9jzvTctTIA3XNZVv9cHHDbAc6nTBfdZp9mtPOTkXFpvyCb
 7 | kL0QjOog0+1pv8D7dFeP4ptWXU5CT3ImvaPR+16dAtMRcsxEr5q4zieJzx3O6huL
 8 | UBa1k+xrzjXpRzkcOysmc8fTxt0tAwbDgJ2AA5TlXLTcVyb7GmJ+hl5CjnhoG5NN
 9 | LrkqI7S29c1U3uokj8Q7hzaj0TURu/uB5ZIMCLZY9KFDugqaEcvmUyJiD0fuV6sA
10 | O/4kpiZUOnhV8/xWpRbMI4WFQsfgLOCV+X9uzUa29D677y//46t/EDSuQTHyBZbl
11 | AcNMENkpMWZsH7J/+F19+U0/Hd5bJgneVRkCAwEAAaNQME4wHQYDVR0OBBYEFKDN
12 | SZtt47ttOBDQzIchFYyxsg3mMB8GA1UdIwQYMBaAFKDNSZtt47ttOBDQzIchFYyx
13 | sg3mMAwGA1UdEwQFMAMBAf8wDQYJKoZIhvcNAQELBQADggEBABaZctNrn4gLmNf/
14 | eNJ3x5CJIPjPwm6j9nwKhtadJ6BF+TIzSkJuHSgxULjW436F37otv94NPzT5PCBF
15 | WxgXoqgLqnWwvsaqC4LUEjsZviWW4CB824YDUquEUVGFLE/U5KTZ7Kh1ceyUk4N8
16 | +mtkXkanWoBBk0OF24lNrAsNLB63yTLr9HxEe75+kmvxf1qVJUGtaOEWIhiFMiAB
17 | 5D4w/j2EFWktumjuy5TTwU0zhl52bc8V9SNixM1IaqzNrVPrdjv8viUX548pU3WT
18 | xZ5ylDsxhMC1q4BXQVeIY8C0cMEX+WHOmOCvWrkxCkP91pKsSPkuVrWlzrkn8Ojo
19 | swP6sBw=
20 | -----END CERTIFICATE-----
21 | 


--------------------------------------------------------------------------------
/sign/release/certificate.pem:
--------------------------------------------------------------------------------
 1 | -----BEGIN CERTIFICATE-----
 2 | MIIDMTCCAhmgAwIBAgIJAMKpjyszxkDpMA0GCSqGSIb3DQEBCwUAMC4xCzAJBgNV
 3 | BAYTAkNOMQwwCgYDVQQKDANSUEsxETAPBgNVBAMMCFJQS0RlYnVnMCAXDTE3MDQx
 4 | OTAyMzE0OVoYDzIxMTYwMzI2MDIzMTQ5WjAuMQswCQYDVQQGEwJDTjEMMAoGA1UE
 5 | CgwDUlBLMREwDwYDVQQDDAhSUEtEZWJ1ZzCCASIwDQYJKoZIhvcNAQEBBQADggEP
 6 | ADCCAQoCggEBAK3kPd9jzvTctTIA3XNZVv9cHHDbAc6nTBfdZp9mtPOTkXFpvyCb
 7 | kL0QjOog0+1pv8D7dFeP4ptWXU5CT3ImvaPR+16dAtMRcsxEr5q4zieJzx3O6huL
 8 | UBa1k+xrzjXpRzkcOysmc8fTxt0tAwbDgJ2AA5TlXLTcVyb7GmJ+hl5CjnhoG5NN
 9 | LrkqI7S29c1U3uokj8Q7hzaj0TURu/uB5ZIMCLZY9KFDugqaEcvmUyJiD0fuV6sA
10 | O/4kpiZUOnhV8/xWpRbMI4WFQsfgLOCV+X9uzUa29D677y//46t/EDSuQTHyBZbl
11 | AcNMENkpMWZsH7J/+F19+U0/Hd5bJgneVRkCAwEAAaNQME4wHQYDVR0OBBYEFKDN
12 | SZtt47ttOBDQzIchFYyxsg3mMB8GA1UdIwQYMBaAFKDNSZtt47ttOBDQzIchFYyx
13 | sg3mMAwGA1UdEwQFMAMBAf8wDQYJKoZIhvcNAQELBQADggEBABaZctNrn4gLmNf/
14 | eNJ3x5CJIPjPwm6j9nwKhtadJ6BF+TIzSkJuHSgxULjW436F37otv94NPzT5PCBF
15 | WxgXoqgLqnWwvsaqC4LUEjsZviWW4CB824YDUquEUVGFLE/U5KTZ7Kh1ceyUk4N8
16 | +mtkXkanWoBBk0OF24lNrAsNLB63yTLr9HxEe75+kmvxf1qVJUGtaOEWIhiFMiAB
17 | 5D4w/j2EFWktumjuy5TTwU0zhl52bc8V9SNixM1IaqzNrVPrdjv8viUX548pU3WT
18 | xZ5ylDsxhMC1q4BXQVeIY8C0cMEX+WHOmOCvWrkxCkP91pKsSPkuVrWlzrkn8Ojo
19 | swP6sBw=
20 | -----END CERTIFICATE-----
21 | 


--------------------------------------------------------------------------------
/src/pages/switch/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-switch" src="apex-ui/components/switch/index.ux"></import>
 2 | 
 3 | <template>
 4 |   <div class="wrap">
 5 |     <div class="line">
 6 |       <text>基本用法</text>
 7 |       <my-switch value="true" onchange="changeHandler"></my-switch>
 8 |     </div>
 9 |     <div class="line">
10 |       <text>自定义内容</text>
11 |       <my-switch open="open" close="关闭"></my-switch>
12 |     </div>
13 |     <div class="line">
14 |       <text>图标</text>
15 |       <my-switch open="&#xe975;"></my-switch>
16 |     </div>
17 |     <div class="line">
18 |       <text>禁止切换</text>
19 |       <my-switch disabled="true"></my-switch>
20 |     </div>
21 |   </div>
22 | </template>
23 | <style lang="less">
24 |   .wrap {
25 |     flex-direction: column;
26 |     .line {
27 |       flex-direction: row;
28 |       justify-content: space-between;
29 |       height: 100px;
30 |       border-bottom-color: #bbbec4;
31 |       border-bottom-width: 1px;
32 |       width: 100%;
33 |       align-items: center;
34 |       padding: 0 20px;
35 |     }
36 |   }
37 | </style>
38 | <script>
39 |     export default {
40 |         data() {
41 |             return {}
42 |         },
43 |         changeHandler(e) {
44 |             console.log('switch changed!', e);
45 |         }
46 |     }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/pages/rating/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-rating" src="apex-ui/components/rating/index.ux"></import>
 2 | 
 3 | <template>
 4 |   <div class="wrap">
 5 |     <div class="line">
 6 |       <text>基本用法</text>
 7 |       <my-rating icon="&#xe912;" value="3" onchange="changeHandler"></my-rating>
 8 |     </div>
 9 |     <div class="line">
10 |       <text>自定义星星个数</text>
11 |       <my-rating icon="&#xe941;" count="10" value="3" onchange="changeHandler"></my-rating>
12 |     </div>
13 |     <div class="line">
14 |       <text>自定义星星大小</text>
15 |       <my-rating icon="&#xe912;" size="80" value="1" onchange="changeHandler"></my-rating>
16 |     </div>
17 |     <div class="line">
18 |       <text>禁用点击</text>
19 |       <my-rating icon="&#xe912;" disabled="true" value="2"></my-rating>
20 |     </div>
21 |   </div>
22 | </template>
23 | <style lang="less">
24 |   .wrap {
25 |     flex-direction: column;
26 |     .line {
27 |       flex-direction: column;
28 |       border-bottom-color: #bbbec4;
29 |       border-bottom-width: 1px;
30 |       width: 100%;
31 |       padding: 20px;
32 |     }
33 |   }
34 | </style>
35 | <script>
36 |     export default {
37 |         data() {
38 |             return {}
39 |         },
40 |         changeHandler(e) {
41 |             console.log(`点击了评分，目前分数是${e.detail}!`);
42 |         }
43 |     }
44 | </script>
45 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "commonjs": true
 4 |   },
 5 |   "extends": "eslint:recommended",
 6 |   "parser": "babel-eslint",
 7 |   "parserOptions": {
 8 |     "sourceType": "module",
 9 |     "ecmaFeatures": {
10 |       "experimentalObjectRestSpread": true,
11 |       "jsx": true
12 |     }
13 |   },
14 |   "globals": {
15 |     "loadData": false,
16 |     "saveData": false,
17 |     "history": false,
18 |     "console": true,
19 |     "setTimeout": false,
20 |     "clearTimeout": false,
21 |     "setInterval": false,
22 |     "clearInterval": false
23 |   },
24 |   "plugins": [
25 |     "hybrid"
26 |   ],
27 |   "rules": {
28 |     "indent": [
29 |       "warn",
30 |       2
31 |     ],
32 |     "no-console": [
33 |       "warn",
34 |       {
35 |         "allow": [
36 |           "info",
37 |           "warn",
38 |           "error"
39 |         ]
40 |       }
41 |     ],
42 |     "no-unused-vars": [
43 |       "warn",
44 |       {
45 |         "varsIgnorePattern": "prompt"
46 |       }
47 |     ],
48 |     "quotes": [
49 |       "warn",
50 |       "single",
51 |       {
52 |         "avoidEscape": true,
53 |         "allowTemplateLiterals": true
54 |       }
55 |     ],
56 |     "linebreak-style": [
57 |       "warn",
58 |       "unix"
59 |     ],
60 |     "semi": [
61 |       "warn",
62 |       "never"
63 |     ]
64 |   }
65 | }


--------------------------------------------------------------------------------
/src/pages/tabbar/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-tabbar" src="apex-ui/components/tabbar/index"></import>
 2 | <template>
 3 |   <div class="wrap">
 4 |     <text>页面1</text>
 5 |     <my-tabbar tabbar="{{tabbarData}}"></my-tabbar>
 6 |   </div>
 7 | </template>
 8 | <style lang="less">
 9 | </style>
10 | <script>
11 |     export default {
12 |         data() {
13 |             return {
14 |                 tabbarData: [
15 |                     {
16 |                         iconPath: '/images/logo-d.png',
17 |                         selectedIconPath: '/images/logo-d.png',
18 |                         pagePath: '/pages/tabbar',
19 |                         text: 'tab1',
20 |                         active: true
21 |                     },
22 |                     {
23 |                         iconPath: '/images/logo-d.png',
24 |                         selectedIconPath: '/images/logo-d.png',
25 |                         pagePath: '/pages/tabbar/page1',
26 |                         text: 'tab2',
27 |                         active: false
28 |                     },
29 |                     {
30 |                         iconPath: '/images/logo-d.png',
31 |                         selectedIconPath: '/images/logo-d.png',
32 |                         pagePath: '/pages/tabbar/page2',
33 |                         text: 'tab3',
34 |                         active: false
35 |                     }
36 |                 ]
37 |             }
38 |         }
39 |     }
40 | </script>
41 | 


--------------------------------------------------------------------------------
/src/pages/tabbar/page1/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-tabbar" src="apex-ui/components/tabbar/index"></import>
 2 | <template>
 3 |   <div class="wrap">
 4 |     <text>页面2</text>
 5 |     <my-tabbar tabbar="{{tabbarData}}"></my-tabbar>
 6 |   </div>
 7 | </template>
 8 | <style lang="less">
 9 | </style>
10 | <script>
11 |     export default {
12 |         data() {
13 |             return {
14 |                 tabbarData: [
15 |                     {
16 |                         iconPath: '/images/logo-d.png',
17 |                         selectedIconPath: '/images/logo-d.png',
18 |                         pagePath: '/pages/tabbar',
19 |                         text: 'tab1',
20 |                         active: false
21 |                     },
22 |                     {
23 |                         iconPath: '/images/logo-d.png',
24 |                         selectedIconPath: '/images/logo-d.png',
25 |                         pagePath: '/pages/tabbar/page1',
26 |                         text: 'tab2',
27 |                         active: true
28 |                     },
29 |                     {
30 |                         iconPath: '/images/logo-d.png',
31 |                         selectedIconPath: '/images/logo-d.png',
32 |                         pagePath: '/pages/tabbar/page2',
33 |                         text: 'tab3',
34 |                         active: false
35 |                     }
36 |                 ]
37 |             }
38 |         }
39 |     }
40 | </script>
41 | 


--------------------------------------------------------------------------------
/src/pages/tabbar/page2/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-tabbar" src="apex-ui/components/tabbar/index"></import>
 2 | <template>
 3 |   <div class="wrap">
 4 |     <text>页面3</text>
 5 |     <my-tabbar tabbar="{{tabbarData}}"></my-tabbar>
 6 |   </div>
 7 | </template>
 8 | <style lang="less">
 9 | </style>
10 | <script>
11 |     export default {
12 |         data() {
13 |             return {
14 |                 tabbarData: [
15 |                     {
16 |                         iconPath: '/images/logo-d.png',
17 |                         selectedIconPath: '/images/logo-d.png',
18 |                         pagePath: '/pages/tabbar',
19 |                         text: 'tab1',
20 |                         active: false
21 |                     },
22 |                     {
23 |                         iconPath: '/images/logo-d.png',
24 |                         selectedIconPath: '/images/logo-d.png',
25 |                         pagePath: '/pages/tabbar/page1',
26 |                         text: 'tab2',
27 |                         active: false
28 |                     },
29 |                     {
30 |                         iconPath: '/images/logo-d.png',
31 |                         selectedIconPath: '/images/logo-d.png',
32 |                         pagePath: '/pages/tabbar/page2',
33 |                         text: 'tab3',
34 |                         active: true
35 |                     }
36 |                 ]
37 |             }
38 |         }
39 |     }
40 | </script>
41 | 


--------------------------------------------------------------------------------
/src/pages/result/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="result-page" src="apex-ui/components/result/index"></import>
 2 | <template>
 3 |   <result-page icon="{{ icon }}" buttons="{{ buttons }}" title="支付结果" desc="本次支付的结果成功" ontap="clicked">
 4 |     <div class="header" slot="header">
 5 |       <text>头部内容</text>
 6 |     </div>
 7 |     <div class="footer" slot="footer">
 8 |       <text>Copyright © 2019-present</text>
 9 |     </div>
10 |   </result-page>
11 | </template>
12 | <style lang="less"></style>
13 | <script>
14 |     import prompt from '@system.prompt';
15 |     import router from '@system.router';
16 | 
17 |     export default {
18 |         data() {
19 |             return {
20 |                 icon: {
21 |                     type: 'checkmark-circle',
22 |                     size: 200,
23 |                     color: '#33cd5f'
24 |                 },
25 |                 buttons: [
26 |                     {
27 |                         text: '确定',
28 |                         type: 'primary'
29 |                     },
30 |                     {
31 |                         text: '取消',
32 |                         type: 'ghost'
33 |                     }
34 |                 ]
35 |             }
36 |         },
37 |         clicked(e) {
38 |             console.log(e);
39 |             const index = e.detail.index;
40 | 
41 |             index === 0 && prompt.showToast({
42 |                 message: '支付成功！'
43 |             });
44 | 
45 |             index === 1 && router.back()
46 |         }
47 |     }
48 | </script>
49 | 


--------------------------------------------------------------------------------
/src/pages/avatar/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-avatar" src="apex-ui/components/avatar/index"></import>
 2 | <template>
 3 |   <div class="wrap">
 4 |     <text class="title">圆形</text>
 5 |     <div class="group">
 6 |       <my-avatar size="small">梁</my-avatar>
 7 |       <my-avatar>梁</my-avatar>
 8 |       <my-avatar size="large">梁</my-avatar>
 9 |     </div>
10 |     <text class="title">方形</text>
11 |     <div class="group">
12 |       <my-avatar size="small" shape="square">A</my-avatar>
13 |       <my-avatar shape="square">A</my-avatar>
14 |       <my-avatar size="large" shape="square">A</my-avatar>
15 |     </div>
16 |     <text class="title">图片</text>
17 |     <div class="group">
18 |       <my-avatar src="/images/logo-d.png" size="small"></my-avatar>
19 |       <my-avatar src="/images/logo-d.png" size="default"></my-avatar>
20 |       <my-avatar src="/images/logo-d.png" size="large"></my-avatar>
21 |     </div>
22 |     <div class="group">
23 |       <my-avatar src="/images/logo-d.png" size="small" shape="square"></my-avatar>
24 |       <my-avatar src="/images/logo-d.png" size="default" shape="square"></my-avatar>
25 |       <my-avatar src="/images/logo-d.png" size="large" shape="square"></my-avatar>
26 |     </div>
27 |   </div>
28 | </template>
29 | <style lang="less">
30 |   .wrap {
31 |     flex-direction: column;
32 |     .title{
33 |       padding: 10px 80px;
34 |     }
35 |     .group {
36 |       flex-direction: row;
37 |       justify-content: space-around;
38 |       margin: 10px 0;
39 |     }
40 |   }
41 | </style>
42 | <script>
43 |     export default {
44 |         data() {
45 |         }
46 |     }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/pages/input/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-input" src="apex-ui/components/input/index.ux"></import>
 2 | 
 3 | <template>
 4 |   <div class="wrap">
 5 |     <text class="title">基础用法</text>
 6 |     <my-input value="{{ value1 }}" title="收货人" autofocus="true" placeholder="名字"></my-input>
 7 |     <my-input value="{{ value2 }}" type="number" title="联系电话" placeholder="请输入手机号"></my-input>
 8 |     <my-input value="{{ value3 }}" type="textarea" title="详细地址" placeholder="请输入详细地址(最多10字)" maxlength="10"></my-input>
 9 |     <my-input value="{{ value4 }}" title="用户信息" disabled="true"></my-input>
10 |     <text class="title">无标题输入框</text>
11 |     <my-input value="{{ value5 }}" placeholder="请输入信息"></my-input>
12 |     <text class="title">圆角输入框</text>
13 |     <my-input value="{{ value6 }}" type="number" right="true" title="消费总额" mode="wrapped" placeholder="询问收银员后输入"></my-input>
14 |     <my-input value="{{ value7 }}" type="number" right="true" error="true" title="不参与优惠金额" mode="wrapped" placeholder="询问收银员后输入"></my-input>
15 |   </div>
16 | </template>
17 | <style lang="less">
18 |   @import '~apex-ui/components/styles/base.less';
19 | 
20 |   .wrap {
21 |     flex-direction: column;
22 |     background-color: @background-color-base;
23 |     .title {
24 |       margin: 20px;
25 |     }
26 |   }
27 | </style>
28 | <script>
29 |     export default {
30 |         data() {
31 |             return {
32 |                 value1: '',
33 |                 value2: '',
34 |                 value3: '',
35 |                 value4: '输入框已禁用',
36 |                 value5: '',
37 |                 value6: '',
38 |                 value7: ''
39 |             }
40 |         }
41 |     }
42 | </script>
43 | 


--------------------------------------------------------------------------------
/src/pages/index/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-index" src="apex-ui/components/index/index.ux"></import>
 2 | <import name="my-index-item" src="apex-ui/components/index-item/index.ux"></import>
 3 | 
 4 | <template>
 5 |   <div>
 6 |     <my-index id="index1">
 7 |       <block for="{{ names in alphabet }}">
 8 |         <my-index-item group-id="index1" name="{{ names.initial }}">
 9 |           <div class="content" for="{{ name in names.cells }}"><text>{{ name }}</text></div>
10 |         </my-index-item>
11 |       </block>
12 |     </my-index>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | const NAMES = ['Aaron', 'Alden', 'Austin', 'Baldwin', 'Braden', 'Carl', 'Chandler', 'Clyde', 'David', 'Edgar', 'Elton', 'Floyd', 'Freeman', 'Gavin', 'Hector', 'Henry', 'Ian', 'Jason', 'Joshua', 'Kane', 'Lambert', 'Matthew', 'Morgan', 'Neville', 'Oliver', 'Oscar', 'Perry', 'Quinn', 'Ramsey', 'Scott', 'Seth', 'Spencer', 'Timothy', 'Todd', 'Trevor', 'Udolf', 'Victor', 'Vincent', 'Walton', 'Willis', 'Xavier', 'Yvonne', 'Zack', 'Zane']
18 | 
19 | export default {
20 |   data() {
21 |     return {
22 |       alphabet: [],
23 |     }
24 |   },
25 | 
26 |   onInit() {
27 |     const alphabet = []
28 |     'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').forEach((initial) => {
29 |       const cells = NAMES.filter((name) => name.charAt(0) === initial)
30 |       alphabet.push({
31 |         initial,
32 |         cells
33 |       })
34 |     })
35 |     this.alphabet = alphabet
36 |   }
37 | }
38 | </script>
39 | 
40 | <style lang="less">
41 | .content {
42 |   padding: 20px 15px;
43 |   border-bottom: 1px solid #eee;
44 |   text {
45 |     color: #000000;
46 |     font-size: 40px;
47 |   }
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/pages/input-number/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-input-number" src="apex-ui/components/input-number/index"></import>
 2 | <template>
 3 |   <div class="wrap">
 4 |     <div class="panel">
 5 |       <text class="title">基础用法</text>
 6 |       <my-input-number value="{{value1}}" min="{{0}}" max="{{100}}" onchange="changeHandler1"></my-input-number>
 7 |     </div>
 8 |     <div class="panel">
 9 |       <text class="title">小数</text>
10 |       <my-input-number value="{{value2}}" min="{{0}}" max="{{100}}" step="0.2" onchange="changeHandler2"></my-input-number>
11 |     </div>
12 |     <div class="panel">
13 |       <text class="title">正数模式</text>
14 |       <my-input-number value="{{value3}}" min="{{0}}" max="{{100}}" positive="{{true}}" onchange="changeHandler3"></my-input-number>
15 |     </div>
16 |   </div>
17 | </template>
18 | <style lang="less">
19 |   .wrap {
20 |     flex-direction: column;
21 |     .panel {
22 |       padding: 20px;
23 |       flex-direction: column;
24 |       .title {
25 |         margin-bottom: 20px;
26 |       }
27 |     }
28 |   }
29 | </style>
30 | <script>
31 | export default {
32 |     data() {
33 |         return {
34 |             value1: 1,
35 |             value2: 0.1,
36 |             value3: 0
37 |         }
38 |     },
39 |     changeHandler1({detail}) {
40 |         console.log('number changed', detail);
41 |         this.value1 = detail.value;
42 |     },
43 |     changeHandler2({detail}) {
44 |         console.log('number changed', detail);
45 |         this.value2 = detail.value;
46 |     },
47 |     changeHandler3({detail}) {
48 |         console.log('number changed', detail);
49 |         this.value3 = detail.value;
50 |     }
51 | }
52 | </script>
53 | 


--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 显示菜单
 3 |  */
 4 | function showMenu () {
 5 |   const prompt = require('@system.prompt')
 6 |   const router = require('@system.router')
 7 |   const appInfo = require('@system.app').getInfo()
 8 |   prompt.showContextMenu({
 9 |     itemList: ['保存桌面', '关于', '取消'],
10 |     success: function (ret) {
11 |       switch (ret.index) {
12 |       case 0:
13 |         // 保存桌面
14 |         createShortcut()
15 |         break
16 |       case 1:
17 |         // 关于
18 |         router.push({
19 |           uri: '/About',
20 |           params: {
21 |             name: appInfo.name,
22 |             icon: appInfo.icon
23 |           }
24 |         })
25 |         break
26 |       case 2:
27 |         // 取消
28 |         break
29 |       default:
30 |         prompt.showToast({
31 |           message: 'error'
32 |         })
33 |       }
34 |     }
35 |   })
36 | }
37 | 
38 | /**
39 |  * 创建桌面图标
40 |  * 注意：使用加载器测试`创建桌面快捷方式`功能时，请先在`系统设置`中打开`应用加载器`的`桌面快捷方式`权限
41 |  */
42 | function createShortcut () {
43 |   const prompt = require('@system.prompt')
44 |   const shortcut = require('@system.shortcut')
45 |   shortcut.hasInstalled({
46 |     success: function (ret) {
47 |       if (ret) {
48 |         prompt.showToast({
49 |           message: '已创建桌面图标'
50 |         })
51 |       } else {
52 |         shortcut.install({
53 |           success: function () {
54 |             prompt.showToast({
55 |               message: '成功创建桌面图标'
56 |             })
57 |           },
58 |           fail: function (errmsg, errcode) {
59 |             prompt.showToast({
60 |               message: `${errcode}: ${errmsg}`
61 |             })
62 |           }
63 |         })
64 |       }
65 |     }
66 |   })
67 | }
68 | 
69 | export default {
70 |   showMenu,
71 |   createShortcut
72 | }
73 | 


--------------------------------------------------------------------------------
/src/pages/tag/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-tag" src="apex-ui/components/tag/index.ux"></import>
 2 | 
 3 | <template>
 4 |     <div class="wrap">
 5 |         <div class="sub-title"><text>Default</text></div>
 6 |         <div class="tags-box">
 7 |           <my-tag>default</my-tag>
 8 |           <my-tag color="magenta">magenta</my-tag>
 9 |           <my-tag color="red">red</my-tag>
10 |           <my-tag color="volcano">volcano</my-tag>
11 |           <my-tag color="orange">orange</my-tag>
12 |           <my-tag color="gold">gold</my-tag>
13 |           <my-tag color="lime">lime</my-tag>
14 |           <my-tag color="green">green</my-tag>
15 |           <my-tag color="cyan">cyan</my-tag>
16 |           <my-tag color="blue">blue</my-tag>
17 |           <my-tag color="geekblue">geekblue</my-tag>
18 |           <my-tag color="pink">pink</my-tag>
19 |           <my-tag color="pink-inverse">pink-inverse</my-tag>
20 |           <my-tag color="yellow">yellow</my-tag>
21 |         </div>
22 |         <div class="sub-title"><text>Custom color</text></div>
23 |         <my-tag color="#f50">#f50</my-tag>
24 |         <my-tag color="#2db7f5">#2db7f5</my-tag>
25 |         <my-tag color="#87d068">#87d068</my-tag>
26 |         <my-tag color="#108ee9">#108ee9</my-tag>
27 |         <div class="sub-title"><text>Closable</text></div>
28 |         <my-tag closable>Tag 1</my-tag>
29 |         <my-tag closable>Tag 3</my-tag>
30 |         <my-tag>Toggle</my-tag>
31 |     </div>
32 | </template>
33 | <style lang="less">
34 | .wrap {
35 |   flex-direction: column;
36 |   padding: 20px;
37 |   .tags-box {
38 |     flex-wrap: wrap;
39 |   }
40 |   .sub-title {
41 |     margin: 20px 0;
42 |   }
43 | }
44 | </style>
45 | <script>
46 | export default {
47 |   data() {
48 |     return {
49 |     }
50 |   }
51 | }
52 | </script>
53 | 


--------------------------------------------------------------------------------
/src/pages/navbar/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-navbar" src="apex-ui/components/navbar/index"></import>
 2 | <import name="my-toast" src="apex-ui/components/toast/index"></import>
 3 | <template>
 4 |   <div class="wrap">
 5 |     <text class="title">默认</text>
 6 |     <my-navbar title="导航标题" left-text=" < " right-text="···" ontap="click"></my-navbar>
 7 |     <text class="title">自定义</text>
 8 |     <my-navbar left-text=" < " right-text="···" ontap="click">
 9 |       <text>自定义导航标题</text>
10 |     </my-navbar>
11 |     <text class="title">内置主题</text>
12 |     <my-navbar theme="dark" title="导航标题" left-text=" < " right-text="···" ontap="click"></my-navbar>
13 |     <my-navbar theme="calm" title="导航标题" left-text=" < " right-text="···" ontap="click"></my-navbar>
14 |     <my-navbar theme="royal" title="导航标题" left-text=" < " right-text="···" ontap="click"></my-navbar>
15 |     <my-navbar theme="positive" title="导航标题" left-text=" < " right-text="···" ontap="click"></my-navbar>
16 |     <my-toast id="toast"></my-toast>
17 |   </div>
18 | </template>
19 | <style lang="less">
20 |   .wrap {
21 |     flex-direction: column;
22 |     background-color: #f7f7f7;
23 |     .title {
24 |       margin: 20px;
25 |     }
26 |   }
27 | </style>
28 | <script>
29 |     export default {
30 |         data() {
31 |             return {}
32 |         },
33 |         click(e) {
34 |             console.log(e.detail.type)
35 |             if (e.detail.type === 'right') {
36 |                 this.$child('toast').showToast({
37 |                     content: '你点击的是右边！'
38 |                 })
39 |             }
40 |             if (e.detail.type === 'left') {
41 |                 this.$child('toast').showToast({
42 |                     content: '你点击的是左边！'
43 |                 })
44 |             }
45 |         }
46 |     }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/pages/message/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-message" src="apex-ui/components/message/index"></import>
 2 | <import name="my-button" src="apex-ui/components/button/index.ux"></import>
 3 | 
 4 | <template>
 5 |   <div class="wrap">
 6 |     <my-button ontap="handleDefault">默认提醒</my-button>
 7 |     <my-button ontap="handleSuccess">成功提醒</my-button>
 8 |     <my-button ontap="handleWarning">警告提醒</my-button>
 9 |     <my-button ontap="handleError">错误提醒</my-button>
10 |     <my-button ontap="handleDuration">自定义持续时间</my-button>
11 |     <my-message id="message"></my-message>
12 |   </div>
13 | </template>
14 | <style lang="less">
15 |   .wrap {
16 |     flex-direction: column;
17 |     padding-top: 100px;
18 |   }
19 | </style>
20 | <script>
21 |     export default {
22 |         data() {
23 | 
24 |         },
25 |         handleDefault() {
26 |             this.$child('message').showMessage({
27 |                 content: '这是一条普通提醒'
28 |             });
29 |         },
30 |         handleSuccess() {
31 |             this.$child('message').showMessage({
32 |                 content: '这是一条成功提醒',
33 |                 type: 'success'
34 |             });
35 |         },
36 |         handleWarning() {
37 |             this.$child('message').showMessage({
38 |                 content: '这是一条警告提醒',
39 |                 type: 'warning'
40 |             });
41 |         },
42 |         handleError() {
43 |             this.$child('message').showMessage({
44 |                 content: '这是一条错误提醒',
45 |                 type: 'error'
46 |             });
47 |         },
48 |         handleDuration() {
49 |             this.$child('message').showMessage({
50 |                 content: '我将在 5 秒后消失',
51 |                 duration: 5,
52 |                 bgColor: 'yellow'
53 |             });
54 |         }
55 |     }
56 | </script>
57 | 


--------------------------------------------------------------------------------
/sign/debug/private.pem:
--------------------------------------------------------------------------------
 1 | -----BEGIN PRIVATE KEY-----
 2 | MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCt5D3fY8703LUy
 3 | AN1zWVb/XBxw2wHOp0wX3WafZrTzk5Fxab8gm5C9EIzqINPtab/A+3RXj+KbVl1O
 4 | Qk9yJr2j0ftenQLTEXLMRK+auM4nic8dzuobi1AWtZPsa8416Uc5HDsrJnPH08bd
 5 | LQMGw4CdgAOU5Vy03Fcm+xpifoZeQo54aBuTTS65KiO0tvXNVN7qJI/EO4c2o9E1
 6 | Ebv7geWSDAi2WPShQ7oKmhHL5lMiYg9H7lerADv+JKYmVDp4VfP8VqUWzCOFhULH
 7 | 4Czglfl/bs1GtvQ+u+8v/+OrfxA0rkEx8gWW5QHDTBDZKTFmbB+yf/hdfflNPx3e
 8 | WyYJ3lUZAgMBAAECggEBAJTnCBBdUB+fSs1prjeS/gsmnfgJoY+K9H7PCIxgj3yw
 9 | FXAvZAmRDKzJGlF2EOOQlTG0YNiGDj6EAtv7rjoKcINyULSg8IU6wLmn61MrAuUa
10 | fa+Bujgh4E/B5swhOHAztNhzkzsM70Hi17wXSislh+HWd7qteOgqcbqgdOR4gaj+
11 | HUqtcxG3H3hCL3dWugnjLZMtestLKGHSSZvbQNjYM3kKy2LvO8NpxmDE4a+TXygK
12 | qhaZjmS/dc/nJBJzOfkzby58RvGbzlJflfW/Uu3/gizj13GFQKWonq1xh630RAhv
13 | xX5ySok2aAx/+/SiJSpNXvM09grQuoORSr7D1tm+5rECgYEA3vf0hRfua0XAOu6f
14 | pyzNvLRRJ/pEew7XpNPCyS2TuMTd1yvXjGVxQfP46N6x1IM3SRU0zE+LSk80EF7l
15 | u1Or7GyCEhabYNe/7P2F8ENP73Do0HwvcI1jGrgr6r9oK0J27Xei+f6Q0bgJOPI2
16 | qaLj+V37cOjkNSM1mhTjtDwK8k0CgYEAx6cMrkjHl1+lDIIOc3qAEL3jb3xQveYk
17 | WrMF/B+j048k6boU4VvFJAIyQxOxMNxLjw3/9+zXCFJT4WaZK3TMXlg614ASGx3H
18 | tKjJM9O07ywwMq1gbutFS4nHCg3L3Os6esL0SPwMdATR3Yh22n5OGI9o+/aURulL
19 | GPEXef1Z2/0CgYEAgmwp5LxV4vu+8Pnp+4DSq4ISQr861XyeGTUhKEp3sUm+tgFY
20 | KTChakHKpHS3Mqa6bQ5xft08je/8dWL9IHFWDIqAHxKIOsKY6oh1k0/cbyPtmx45
21 | Ja4efV+jmMHzrfJH3KnxdCg7D+GFy4CrBtlYXuJhlO81pft9fC6h7yh8ArUCgYBq
22 | gvkl5Zftbs4rnRq+iqTVyagTKvwcQzIz3PwdZHfO/rfPpUFMdNv4eN99n3zRN0Vs
23 | HSjoiEazntA3GLgwUdBRqLpDi4SdSMbo337vkksdqbJQ5uPiaMuAIBG6kF+pDSkW
24 | ovkWErlGD+gySoI10FozihaVDRhPuFgjB0PiBcIxtQKBgGNSzX+Bx5+ux1Qny0Sn
25 | SUcBtepLnO8M8wafoGNyehbMnLzfuMbaDiJOdozGlBNHZTtPB3r4AYb8WnltdKW0
26 | 7i3fk26YZGiMVeUJvewA6/LOBEaqMdwoNwnoptvbR6ehHeE/PPtRtge2cD3bPIM7
27 | U9VlWgfgj9Dxfwhslqb9hmyp
28 | -----END PRIVATE KEY-----
29 | 


--------------------------------------------------------------------------------
/sign/release/private.pem:
--------------------------------------------------------------------------------
 1 | -----BEGIN PRIVATE KEY-----
 2 | MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCt5D3fY8703LUy
 3 | AN1zWVb/XBxw2wHOp0wX3WafZrTzk5Fxab8gm5C9EIzqINPtab/A+3RXj+KbVl1O
 4 | Qk9yJr2j0ftenQLTEXLMRK+auM4nic8dzuobi1AWtZPsa8416Uc5HDsrJnPH08bd
 5 | LQMGw4CdgAOU5Vy03Fcm+xpifoZeQo54aBuTTS65KiO0tvXNVN7qJI/EO4c2o9E1
 6 | Ebv7geWSDAi2WPShQ7oKmhHL5lMiYg9H7lerADv+JKYmVDp4VfP8VqUWzCOFhULH
 7 | 4Czglfl/bs1GtvQ+u+8v/+OrfxA0rkEx8gWW5QHDTBDZKTFmbB+yf/hdfflNPx3e
 8 | WyYJ3lUZAgMBAAECggEBAJTnCBBdUB+fSs1prjeS/gsmnfgJoY+K9H7PCIxgj3yw
 9 | FXAvZAmRDKzJGlF2EOOQlTG0YNiGDj6EAtv7rjoKcINyULSg8IU6wLmn61MrAuUa
10 | fa+Bujgh4E/B5swhOHAztNhzkzsM70Hi17wXSislh+HWd7qteOgqcbqgdOR4gaj+
11 | HUqtcxG3H3hCL3dWugnjLZMtestLKGHSSZvbQNjYM3kKy2LvO8NpxmDE4a+TXygK
12 | qhaZjmS/dc/nJBJzOfkzby58RvGbzlJflfW/Uu3/gizj13GFQKWonq1xh630RAhv
13 | xX5ySok2aAx/+/SiJSpNXvM09grQuoORSr7D1tm+5rECgYEA3vf0hRfua0XAOu6f
14 | pyzNvLRRJ/pEew7XpNPCyS2TuMTd1yvXjGVxQfP46N6x1IM3SRU0zE+LSk80EF7l
15 | u1Or7GyCEhabYNe/7P2F8ENP73Do0HwvcI1jGrgr6r9oK0J27Xei+f6Q0bgJOPI2
16 | qaLj+V37cOjkNSM1mhTjtDwK8k0CgYEAx6cMrkjHl1+lDIIOc3qAEL3jb3xQveYk
17 | WrMF/B+j048k6boU4VvFJAIyQxOxMNxLjw3/9+zXCFJT4WaZK3TMXlg614ASGx3H
18 | tKjJM9O07ywwMq1gbutFS4nHCg3L3Os6esL0SPwMdATR3Yh22n5OGI9o+/aURulL
19 | GPEXef1Z2/0CgYEAgmwp5LxV4vu+8Pnp+4DSq4ISQr861XyeGTUhKEp3sUm+tgFY
20 | KTChakHKpHS3Mqa6bQ5xft08je/8dWL9IHFWDIqAHxKIOsKY6oh1k0/cbyPtmx45
21 | Ja4efV+jmMHzrfJH3KnxdCg7D+GFy4CrBtlYXuJhlO81pft9fC6h7yh8ArUCgYBq
22 | gvkl5Zftbs4rnRq+iqTVyagTKvwcQzIz3PwdZHfO/rfPpUFMdNv4eN99n3zRN0Vs
23 | HSjoiEazntA3GLgwUdBRqLpDi4SdSMbo337vkksdqbJQ5uPiaMuAIBG6kF+pDSkW
24 | ovkWErlGD+gySoI10FozihaVDRhPuFgjB0PiBcIxtQKBgGNSzX+Bx5+ux1Qny0Sn
25 | SUcBtepLnO8M8wafoGNyehbMnLzfuMbaDiJOdozGlBNHZTtPB3r4AYb8WnltdKW0
26 | 7i3fk26YZGiMVeUJvewA6/LOBEaqMdwoNwnoptvbR6ehHeE/PPtRtge2cD3bPIM7
27 | U9VlWgfgj9Dxfwhslqb9hmyp
28 | -----END PRIVATE KEY-----
29 | 


--------------------------------------------------------------------------------
/src/pages/pagination/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-page" src="apex-ui/components/pagination/index.ux"></import>
 2 | 
 3 | <template>
 4 |     <div class="wrap">
 5 |         <div class="line">
 6 |             <text>默认文字的按钮</text>
 7 |             <my-page total="{{total}}" current="{{current}}" ontap="clickPage"></my-page>
 8 |         </div>
 9 |         <div class="line">
10 |             <text>自定义文字和图标</text>
11 |             <my-page total="{{total}}" current="{{current}}" ontap="clickPage" prev-text="< 上一步" next-text="下一步 >">
12 |             </my-page>
13 |         </div>
14 |         <div class="line">
15 |             <text>隐藏数字</text>
16 |             <my-page total="{{total}}" current="{{current}}" ontap="clickPage" simple="true"></my-page>
17 |         </div>
18 |         <div class="line">
19 |             <text>只显示数字</text>
20 |             <my-page total="{{total}}" current="{{current}}" type="number"></my-page>
21 |         </div>
22 |         <div class="line">
23 |             <text>显示点</text>
24 |             <my-page total="{{total}}" current="{{current}}" type="pointer"></my-page>
25 |         </div>
26 |     </div>
27 | </template>
28 | <style lang="less">
29 | .wrap {
30 |   flex-direction: column;
31 |   .line {
32 |     flex-direction: column;
33 |     justify-content: space-between;
34 |     width: 100%;
35 |     padding: 0 20px;
36 |     margin: 20px 0;
37 |   }
38 | }
39 | </style>
40 | <script>
41 | export default {
42 |     data() {
43 |         return {
44 |             total: 3,
45 |             current: 1
46 |         }
47 |     },
48 |     clickPage(e) {
49 |         console.log(e.detail.type);
50 |         if (e.detail.type === 'prev') {
51 |             this.current --
52 |         }
53 |         if (e.detail.type === 'next') {
54 |             this.current ++
55 | 
56 |         }
57 |     }
58 | }
59 | </script>
60 | 


--------------------------------------------------------------------------------
/src/pages/badge/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-badge" src="apex-ui/components/badge/index"></import>
 2 | <import name="my-icon" src="apex-ui/components/icon/index"></import>
 3 | 
 4 | <template>
 5 |   <div class="wrap">
 6 |     <text class="title">基本用法</text>
 7 |     <div class="group">
 8 |       <my-badge count="1">
 9 |         <div class="demo-badge"></div>
10 |       </my-badge>
11 |       <my-badge count="10">
12 |         <div class="demo-badge"></div>
13 |       </my-badge>
14 |       <my-badge count="100">
15 |         <div class="demo-badge"></div>
16 |       </my-badge>
17 |     </div>
18 |     <text class="title">只显示小红点</text>
19 |     <div class="group">
20 |       <my-badge dot="{{true}}" count="1">
21 |         <div class="demo-badge"></div>
22 |       </my-badge>
23 |       <my-badge dot="{{true}}" count="1">
24 |         <my-icon type="chat" size="80"></my-icon>
25 |       </my-badge>
26 |       <my-badge dot="{{true}}" count="1">
27 |         <text style="font-size:40px;">文本文本</text>
28 |       </my-badge>
29 |     </div>
30 |     <text class="title">封顶数字</text>
31 |     <div class="group">
32 |       <my-badge count="100">
33 |         <div class="demo-badge"></div>
34 |       </my-badge>
35 |       <my-badge count="1000" overflow-count="999">
36 |         <div class="demo-badge"></div>
37 |       </my-badge>
38 |     </div>
39 |   </div>
40 | </template>
41 | 
42 | <style lang="less">
43 | .wrap {
44 |   flex-direction: column;
45 |   .title{
46 |     padding: 10px 80px;
47 |   }
48 |   .group {
49 |     flex-direction: row;
50 |     justify-content: space-around;
51 |     margin: 10px 0;
52 |   }
53 | }
54 | 
55 | .demo-badge{
56 |   width: 80px;
57 |   height: 80px;
58 |   background-color: #eee;
59 |   border-radius: 6px;
60 | }
61 | </style>
62 | 
63 | <script>
64 | export default {
65 |   data() {
66 |   }
67 | }
68 | </script>
69 | 
70 | 
71 | 


--------------------------------------------------------------------------------
/src/pages/upload/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-upload" src="apex-ui/components/upload/index"></import>
 2 | <template>
 3 |   <my-upload url="http://www.example.com/upload" max="9" multi="true" type="image" disabled="false"
 4 |              onchange="changeHandler"
 5 |              onremove="removeHandler" onpreview="previewHandler" onfail="failHandler"
 6 |              onsuccess="successHandler" onbefore="beforeHandler" oncomplete="completeHandler">
 7 |     <text>Upload</text>
 8 |   </my-upload>
 9 | </template>
10 | <style lang="less"></style>
11 | <script>
12 |     import media from '@system.media';
13 | 
14 |     export default {
15 |         data() {
16 |             return {}
17 |         },
18 |         changeHandler(e) {
19 |             console.log('changed', e);
20 |         },
21 |         removeHandler(e) {
22 |             console.log('removed', e);
23 |         },
24 |         previewHandler(e) {
25 |             console.log('preview', e);
26 |             const {file, fileList} = e.detail;
27 |             const uris = fileList.map((item) => (item.uri));
28 |             console.log(file, fileList, uris);
29 |             media.previewImage({
30 |                 current: file.uri,
31 |                 uris: uris,
32 |                 success: function () {
33 |                     console.log('preview success')
34 |                 },
35 |                 fail: function (data, code) {
36 |                     console.log('preview fail, code = ${code}')
37 |                 }
38 |             })
39 |         },
40 |         failHandler(e) {
41 |             console.log('failed', e);
42 |         },
43 |         successHandler(e) {
44 |             console.log('success', e);
45 |         },
46 |         beforeHandler(e) {
47 |             console.log('before', e);
48 |         },
49 |         completeHandler(e) {
50 |             console.log('completed', e);
51 |         }
52 |     }
53 | </script>
54 | 


--------------------------------------------------------------------------------
/src/pages/action-sheet/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-button" src="apex-ui/components/button/index.ux"></import>
 2 | <import name="my-action-sheet" src="apex-ui/components/action-sheet/index.ux"></import>
 3 | 
 4 | <template>
 5 |   <div class="wrap">
 6 |     <my-button type="default" ontap="actionSheet('default')">Default ActionSheet</my-button>
 7 |     <my-button type="default" ontap="actionSheet('iOS')">iOS ActionSheet</my-button>
 8 | 
 9 |     <my-action-sheet id="actionSheet"></my-action-sheet>
10 |   </div>
11 | </template>
12 | <style lang="less">
13 |   .wrap {
14 |     flex-direction: column;
15 |     justify-content: center;
16 |   }
17 | </style>
18 | <script>
19 |   export default {
20 |     data() {
21 |       return {
22 |         timerActionSheet: null
23 |       }
24 |     },
25 |     actionSheet(theme){
26 |       if(this.timerActionSheet) clearTimeout(this.timerActionSheet)
27 | 
28 |       this.$child('actionSheet').showSheet({
29 |         theme,
30 |         titleText: '三秒后自动关闭',
31 |         buttons: [{
32 |           text: '回到首页',
33 |           icon: {
34 |             type: 'share-alt',
35 |             position: 'right'
36 |           }
37 |         },{
38 |           text: 'Disabled',
39 |           disabled: true
40 |         }],
41 |         buttonClicked: (index,item)=>{
42 |           if(index==0){
43 |             const router = require('@system.router')
44 |             router.clear()
45 |             router.replace({uri: '/'})
46 |           }
47 |           return true
48 |         },
49 |         cancelText: '取消',
50 |         cancel: ()=>{
51 |           console.log('取消按钮或蒙层点击事件')
52 |         },
53 |         destructiveText: '删除',
54 |         destructiveButtonClicked: ()=>{
55 |           console.log('删除按钮点击事件')
56 |           return true
57 |         }
58 |       })
59 | 
60 |       this.timerActionSheet = setTimeout(()=>{
61 |         this.$child('actionSheet').hideSheet()
62 |       }, 3000)
63 |     }
64 |   }
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/pages/counter/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-button" src="apex-ui/components/button/index"></import>
 2 | <template>
 3 |   <div class="wrap">
 4 |     <div class="counter">
 5 |       <text>counter1: {{number1}}</text>
 6 |       <text>counter2: {{number2}}</text>
 7 |     </div>
 8 |     <my-button ontap="start()">开始</my-button>
 9 |     <my-button ontap="pauseResume()">暂停/恢复</my-button>
10 |     <my-button ontap="reset()">重置</my-button>
11 |     <my-button ontap="update()">更新</my-button>
12 |   </div>
13 | </template>
14 | <style lang="less">
15 |   .wrap {
16 |     flex-direction: column;
17 |     padding: 20px;
18 | 
19 |     .counter {
20 |       padding: 40px 0;
21 |       flex-direction: column;
22 | 
23 |       text {
24 |         font-size: 40px;
25 |       }
26 |     }
27 |   }
28 | </style>
29 | <script>
30 |     import prompt from '@system.prompt';
31 |     import Counter from 'apex-ui/components/counter/index';
32 | 
33 |     export default {
34 |         data() {
35 |             return {
36 |                 number1: 0,
37 |                 number2: 0
38 |             }
39 |         },
40 |         onInit() {
41 |             const that = this;
42 |             this.counter1 = new Counter(1, 1024, 0, 2, {
43 |                 printValue(value) {
44 |                     that.number1 = value;
45 |                 }
46 |             });
47 |             this.counter1.start();
48 | 
49 |             this.counter2 = new Counter(0, 666, 0, 5, {
50 |                 printValue(value) {
51 |                     that.number2 = value;
52 |                 }
53 |             });
54 |         },
55 |         start() {
56 |             this.counter2.start(() => {
57 |                 prompt.showToast({
58 |                     message: '已完成'
59 |                 })
60 |             })
61 |         },
62 |         reset() {
63 |             this.counter2.reset()
64 |         },
65 |         update() {
66 |             this.counter2.update(1314)
67 |         },
68 |         pauseResume() {
69 |             this.counter2.pauseResume()
70 |         },
71 |     }
72 | </script>
73 | 


--------------------------------------------------------------------------------
/src/pages/alert/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-alert" src="apex-ui/components/alert/index.ux"></import>
 2 | <template>
 3 |   <div class="wrap">
 4 |     <my-alert title="An alert info" type="info"></my-alert>
 5 |     <my-alert title="An alert info" type="success"></my-alert>
 6 |     <my-alert title="An alert info" type="warning"></my-alert>
 7 |     <my-alert title="An alert info" type="error"></my-alert>
 8 |     <my-alert title="An alert info" desc="Some description about alert component" type="info"></my-alert>
 9 |     <my-alert title="An alert info" desc="Some description about alert component" type="success"></my-alert>
10 |     <my-alert title="An alert info" desc="Some description about alert component" type="warning"></my-alert>
11 |     <my-alert title="An alert info" desc="Some description about alert component" type="error"></my-alert>
12 |     <my-alert title="An alert info" show-icon="true" type="info"></my-alert>
13 |     <my-alert title="An alert info" show-icon="true" type="success"></my-alert>
14 |     <my-alert title="An alert info" show-icon="true" type="warning"></my-alert>
15 |     <my-alert title="An alert info" show-icon="true" type="error"></my-alert>
16 |     <my-alert title="An alert info" show-icon="true" desc="Some description about alert component" type="info"></my-alert>
17 |     <my-alert title="An alert info" show-icon="true" desc="Some description about alert component" type="success"></my-alert>
18 |     <my-alert title="An alert info" show-icon="true" desc="Some description about alert component" type="warning"></my-alert>
19 |     <my-alert title="An alert info" show-icon="true" desc="Some description about alert component" type="error"></my-alert>
20 |     <my-alert title="An alert info" closable="true" type="info"></my-alert>
21 |     <my-alert title="An alert info" closable="true" show-icon="true" desc="Some description about alert component" type="success"></my-alert>
22 |   </div>
23 | </template>
24 | <style lang="less">
25 |   .wrap {
26 |     flex-direction: column;
27 |   }
28 | </style>
29 | <script>
30 |     export default {
31 | 
32 |     }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/src/pages/gallery/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-gallery" src="apex-ui/components/gallery/index"></import>
 2 | 
 3 | <template>
 4 |   <div class="wrap">
 5 |     <text class="title">default</text>
 6 |     <div class="image-wrap">
 7 |       <block for="{{(idx, image) in srcs}}">
 8 |         <image src="{{image}}" onclick="handleClick(idx)"></image>
 9 |       </block>
10 |     </div>
11 |     <text class="title">aotoplay</text>
12 |     <div class="image-wrap">
13 |       <block for="{{(idx, image) in srcs}}">
14 |         <image src="{{image}}" onclick="handleClick2(idx)"></image>
15 |       </block>
16 |     </div>
17 |     <text class="title">vertical</text>
18 |     <div class="image-wrap">
19 |       <block for="{{(idx, image) in srcs}}">
20 |         <image src="{{image}}" onclick="handleClick3(idx)"></image>
21 |       </block>
22 |     </div>
23 |     <my-gallery id="gallery"></my-gallery>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   data() {
30 |     return {
31 |       srcs: [
32 |         '/images/logo-d.png',
33 |         '/images/logo-d.png',
34 |         '/images/logo-d.png',
35 |         '/images/logo-d.png',
36 |       ],
37 |     }
38 |   },
39 | 
40 |   handleClick(idx, e) {
41 |     this.$child('gallery').showGallery({
42 |       srcs: this.srcs,
43 |       index: idx,
44 |     })
45 |   },
46 | 
47 |   handleClick2(idx, e) {
48 |     this.$child('gallery').showGallery({
49 |       srcs: this.srcs,
50 |       index: idx,
51 |       autoplay: true
52 |     })
53 |   },
54 | 
55 |   handleClick3(idx, e) {
56 |     this.$child('gallery').showGallery({
57 |       srcs: this.srcs,
58 |       index: idx,
59 |       vertical: true
60 |     })
61 |   }
62 | }
63 | </script>
64 | 
65 | <style lang="less">
66 | .wrap {
67 |   flex-direction: column;
68 |   background-color: #eee;
69 | }
70 | 
71 | .image-wrap {
72 |   display: flex;
73 |   flex-wrap: wrap;
74 |   background-color: #fff;
75 | }
76 | 
77 | .title{
78 |   font-size: 50px;
79 |   margin: 10px 20px;
80 | }
81 | 
82 | image {
83 |   width: 200px;
84 |   height: 200px;
85 |   object-fit: contain;
86 |   margin: 0 20px;
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/pages/button/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-button" src="apex-ui/components/button/index.ux"></import>
 2 | 
 3 | <template>
 4 |   <div class="wrap">
 5 |     <text class="title">一般用法</text>
 6 |     <div class="inline">
 7 |       <my-button type="info" inline="true">按钮</my-button>
 8 |       <my-button type="ghost" inline="true">按钮</my-button>
 9 |       <my-button type="success" inline="true">成功按钮</my-button>
10 |     </div>
11 |     <div class="inline">
12 |       <my-button type="info" shape="circle" inline="true" icon="add"></my-button>
13 |       <my-button type="warning" shape="circle" inline="true" icon="alarm"></my-button>
14 |       <my-button type="success" inline="true" icon="bug"></my-button>
15 |       <my-button type="ghost" inline="true" icon="gift"></my-button>
16 |     </div>
17 |     <my-button type="default" ontap="tap">按钮</my-button>
18 |     <my-button type="primary">按钮</my-button>
19 |     <my-button type="info">按钮</my-button>
20 |     <my-button type="ghost">按钮</my-button>
21 |     <my-button type="success">成功按钮</my-button>
22 |     <my-button type="warning">警告按钮</my-button>
23 |     <my-button type="error">错误按钮</my-button>
24 |     <text class="title">不同尺寸</text>
25 |     <my-button type="primary" size="large">按钮大</my-button>
26 |     <my-button type="primary" size="default">按钮默认</my-button>
27 |     <my-button type="primary" size="small">按钮小</my-button>
28 |     <text class="title">圆角的不同尺寸</text>
29 |     <my-button type="success" shape="round" size="large">按钮大</my-button>
30 |     <my-button type="success" shape="round" size="default">按钮默认</my-button>
31 |     <my-button type="success" shape="round" size="small">按钮小</my-button>
32 |     <my-button type="primary" loading="true">加载中按钮</my-button>
33 |     <my-button type="ghost" disabled="true">禁用按钮</my-button>
34 |   </div>
35 | </template>
36 | <style lang="less">
37 |   .wrap {
38 |     flex-direction: column;
39 |     padding: 10px 20px;
40 |     .inline {
41 |       flex-direction: row;
42 |       flex-wrap: wrap;
43 |     }
44 |   }
45 | </style>
46 | <script>
47 | export default {
48 |   data() {
49 |     return {}
50 |   },
51 |   tap() {
52 |     console.log(5555555);
53 |   }
54 | }
55 | </script>
56 | 


--------------------------------------------------------------------------------
/src/pages/segmented-control/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-segmented-control" src="apex-ui/components/segmented-control/index.ux"></import>
 2 | 
 3 | <template>
 4 |     <div class="wrap">
 5 |         <div class="sub-title"><text>默认</text></div>
 6 |         <my-segmented-control values="{{ segments2 }}" ></my-segmented-control>
 7 |         <div class="sub-title"><text>主题色</text></div>
 8 |         <my-segmented-control theme="light" values="{{ segments2 }}"></my-segmented-control>
 9 |         <my-segmented-control theme="stable" values="{{ segments2 }}" ></my-segmented-control>
10 |         <my-segmented-control theme="positive" values="{{ segments2 }}" ></my-segmented-control>
11 |         <my-segmented-control theme="calm" values="{{ segments2 }}" ></my-segmented-control>
12 |         <my-segmented-control theme="balanced" values="{{ segments2 }}" ></my-segmented-control>
13 |         <my-segmented-control theme="energized" values="{{ segments2 }}" ></my-segmented-control>
14 |         <my-segmented-control theme="assertive" values="{{ segments2 }}" ></my-segmented-control>
15 |         <my-segmented-control theme="royal" values="{{ segments2 }}" ></my-segmented-control>
16 |         <my-segmented-control theme="dark" values="{{ segments2 }}" ></my-segmented-control>
17 |         <div class="sub-title"><text>禁用</text></div>
18 |         <my-segmented-control disabled values="{{ segments2 }}" ></my-segmented-control>
19 |         <div class="sub-title"><text>默认当前页</text></div>
20 |         <my-segmented-control current="{{currentPage}}" values="{{ segments3 }}" onchange="changePage"></my-segmented-control>
21 |     </div>
22 | </template>
23 | <style lang="less">
24 | .wrap {
25 |   flex-direction: column;
26 |   padding: 20px;
27 |   .sub-title {
28 |     margin: 20px 0;
29 |   }
30 | }
31 | </style>
32 | <script>
33 | export default {
34 |     data() {
35 |         return {
36 |             currentPage: 1,
37 |             segments2: [
38 |               'Segment1', 'Segment2'
39 |             ],
40 |             segments3: [
41 |               'Segment1', 'Segment2', 'Segment3'
42 |             ],
43 |         }
44 |     },
45 |     changePage(e) {
46 |         console.log(e.detail.index)
47 |         this.currentPage = e.detail.index
48 |     }
49 | }
50 | </script>
51 | 


--------------------------------------------------------------------------------
/src/pages/popup/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-popup" src="apex-ui/components/popup/index"></import>
 2 | <import name="my-button" src="apex-ui/components/button/index.ux"></import>
 3 | 
 4 | <template>
 5 |   <div class="wrap">
 6 |     <my-button type="default" ontap="handleClickPopupCenter">Center Popup</my-button>
 7 |     <my-button type="default" ontap="handleClickPopupLeft">Left Popup</my-button>
 8 |     <my-button type="default" ontap="handleClickPopupBottom">Bottom Popup</my-button>
 9 | 
10 |     <my-popup 
11 |       id="popupCenter"
12 |       position="center"
13 |       title="提示"
14 |       content="确定关闭吗???"
15 |       closable="{{true}}"
16 |       onclose="onclose('Center Popup')"
17 |       onclosed="onclosed('Center Popup')"
18 |     >
19 |       <my-button type="success" ontap="handleClickClose('popupCenter')">确定</my-button>
20 |     </my-popup>
21 | 
22 |     <my-popup 
23 |       id="popupLeft" 
24 |       position="left"
25 |       title="提示"
26 |       content="确定关闭吗???"
27 |       onclose="onclose('Left Popup')"
28 |       onclosed="onclosed('Left Popup')"
29 |     >
30 |       <my-button type="success" ontap="handleClickClose('popupLeft')">确定</my-button>
31 |     </my-popup>
32 | 
33 |     <my-popup 
34 |       id="popupBottom" 
35 |       position="bottom"
36 |       title="提示"
37 |       content="确定关闭吗???"
38 |       onclose="onclose('Right Popup')"
39 |       onclosed="onclosed('Right Popup')"
40 |     >
41 |       <my-button type="success" ontap="handleClickClose('popupBottom')">确定</my-button>
42 |     </my-popup>
43 |   </div>
44 | </template>
45 | <style lang="less">
46 |   .wrap {
47 |     flex-direction: column;
48 |     justify-content: center;
49 |   }
50 | </style>
51 | <script>
52 |   export default {
53 |     data() {
54 |       return {}
55 |     },
56 |     handleClickPopupCenter(){
57 |       this.$child('popupCenter').show()
58 |     },
59 |     handleClickPopupLeft(){
60 |       this.$child('popupLeft').show()
61 |     },
62 |     handleClickPopupBottom(){
63 |       this.$child('popupBottom').show()
64 |     },
65 |     handleClickClose(popup){
66 |       this.$child(popup).hide()
67 |     },
68 |     onclose(popup){
69 |       console.log(`${popup} 触发 close 事件`)
70 |     },
71 |     onclosed(popup){
72 |       console.log(`${popup} 触发 closed 事件`)
73 |     }
74 |   } 
75 | </script>
76 | 


--------------------------------------------------------------------------------
/src/pages/steps/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-steps" src="apex-ui/components/steps/index.ux"></import>
 2 | <import name="my-step" src="apex-ui/components/step/index.ux"></import>
 3 | <import name="my-button" src="apex-ui/components/button/index.ux"></import>
 4 | 
 5 | <template>
 6 |   <div class="wrap">
 7 |     <text class="title">default</text>
 8 |     <my-steps id="steps1" current="{{1}}">
 9 |       <my-step group-id="steps1" title="finish" content="contentcontent" status="finish"></my-step>
10 |       <my-step group-id="steps1" title="process" content="contentcontent" status="process"></my-step>
11 |       <my-step group-id="steps1" title="wait" content="contentcontent" status="wait"></my-step>
12 |     </my-steps>
13 |     <text class="title">vertical</text>
14 |     <my-steps id="steps2" current="{{1}}" direction="vertical">
15 |       <my-step group-id="steps2" title="finish" content="contentcontent" status="finish"></my-step>
16 |       <my-step group-id="steps2" title="process" content="contentcontent" status="process"></my-step>
17 |       <my-step group-id="steps2" title="wait" content="contentcontent" status="wait"></my-step>
18 |     </my-steps>
19 |     <text class="title">icon</text>
20 |     <my-steps id="steps4" current="{{1}}">
21 |       <my-step group-id="steps4" title="step1" content="contentcontent" icon="airplane"></my-step>
22 |       <my-step group-id="steps4" title="step2" content="contentcontent" icon="snow"></my-step>
23 |       <my-step group-id="steps4" title="step3" content="contentcontent" icon="gift"></my-step>
24 |     </my-steps>
25 |     <text class="title">current</text>
26 |     <my-steps id="steps3" current="{{current}}">
27 |       <my-step group-id="steps3" title="step1"></my-step>
28 |       <my-step group-id="steps3" title="step2"></my-step>
29 |       <my-step group-id="steps3" title="step3"></my-step>
30 |     </my-steps>
31 |     <my-button type="default" ontap="tap">按钮</my-button>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | export default {
37 |   data() {
38 |     return {
39 |       current: 0
40 |     }
41 |   },
42 | 
43 |   tap() {
44 |     this.current = (this.current + 1) % 3
45 |   }
46 | }
47 | </script>
48 | 
49 | <style>
50 | .wrap {
51 |   flex-direction: column;
52 |   padding: 10px;
53 | }
54 | 
55 | .title{
56 |   margin:10px 20px;
57 |   margin-top: 50px;
58 |   font-size: 40px;
59 |   font-weight: bold;
60 |   color: #000000;
61 | }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/src/pages/fab-button/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-fab-button" src="apex-ui/components/fab-button/index"></import>
 2 | <import name="my-button" src="apex-ui/components/button/index"></import>
 3 | 
 4 | <template>
 5 |   <div>
 6 |     <my-fab-button theme="light" position="topLeft" buttons="{{buttons}}" direction="vertical" action-button-rotate="{{false}}"></my-fab-button>
 7 |     <my-fab-button theme="royal" position="bottomLeft" buttons="{{buttons}}" direction="vertical" reverse="{{true}}"></my-fab-button>
 8 |     <my-fab-button position="center" buttons="{{buttons}}" direction="circle"></my-fab-button>
 9 |     <my-fab-button theme="dark" position="topRight" buttons="{{buttons}}" reverse="{{true}}"></my-fab-button>
10 |     <my-fab-button theme="calm" position="bottomRight" buttons="{{buttons}}" reverse="{{true}}"></my-fab-button>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import prompt from '@system.prompt'
16 | import router from '@system.router'
17 | 
18 | export default {
19 |   data() {
20 |     return {
21 |       buttons: [
22 |         {
23 |           type: 'primary',
24 |           icon: 'airplane',
25 |           label: 'first label',
26 |           shape: 'circle',
27 |           click: () => {
28 |             console.log('button1')
29 |             prompt.showToast({
30 |               message: 'message' + this.num
31 |             })
32 |           }
33 |         },
34 |         {
35 |           type: 'primary',
36 |           icon: 'alarm',
37 |           label: 'label 2',
38 |           shape: 'circle',
39 |           disabled: true,
40 |           click: () => {
41 |             console.log('button2')
42 |           }
43 |         },
44 |         {
45 |           type: 'primary',
46 |           icon: 'bug',
47 |           label: 'a label 3',
48 |           shape: 'circle',
49 |           click: () => {
50 |             console.log('button3')
51 |             router.push({
52 |               uri: '/pages/accordion'
53 |             })
54 |           }
55 |         },
56 |         {
57 |           type: 'primary',
58 |           icon: 'build',
59 |           label: 'label 4',
60 |           shape: 'circle',
61 |           click: () => {
62 |             console.log('button4')
63 |             console.log(this.num)
64 |             this.test()
65 |           }
66 |         },
67 |       ],
68 |       num: 1
69 |     }
70 |   },
71 | 
72 |   test() {
73 |     console.log('test')
74 |   }
75 | }
76 | </script>
77 | 
78 | <style>
79 | </style>
80 | 


--------------------------------------------------------------------------------
/src/pages/radio/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-radio" src="apex-ui/components/radio/index"></import>
 2 | <import name="my-radio-group" src="apex-ui/components/radio-group/index"></import>
 3 | <import name="my-button" src="apex-ui/components/button/index"></import>
 4 | <template>
 5 |   <div class="wrap">
 6 |     <text class="title">组合</text>
 7 |     <my-radio-group id="myGroup" current="{{current}}" onchange="handleFruitChange">
 8 |       <my-radio group="myGroup" for="{{fruit}}" position="{{position}}" value="{{$item.name}}"></my-radio>
 9 |     </my-radio-group>
10 |     <my-button onclick="handleClick" type="ghost">切换单选框位置</my-button>
11 |     <text class="title">单个</text>
12 |     <my-radio value="{{animal}}" disabled="{{disabled}}" checked="{{checked}}" onchange="handleAnimalChange"></my-radio>
13 |     <my-button onclick="handleDisabled" type="ghost">切换disabled状态</my-button>
14 |   </div>
15 | </template>
16 | <style lang="less">
17 |   @import "~apex-ui/components/styles/base";
18 | 
19 |   .wrap {
20 |     flex-direction: column;
21 |     background-color: @background-color-base;
22 |     .title {
23 |       margin: 20px;
24 |     }
25 |   }
26 | </style>
27 | <script>
28 |     export default {
29 |         data() {
30 |             return {
31 |                 fruit: [{
32 |                     id: 1,
33 |                     name: '香蕉',
34 |                     checked: false
35 |                 }, {
36 |                     id: 2,
37 |                     name: '苹果',
38 |                     checked: true
39 |                 }, {
40 |                     id: 3,
41 |                     name: '西瓜',
42 |                     checked: false
43 |                 }, {
44 |                     id: 4,
45 |                     name: '葡萄',
46 |                     checked: false
47 |                 }],
48 |                 current: '苹果',
49 |                 position: 'left',
50 |                 animal: '熊猫',
51 |                 checked: false,
52 |                 disabled: false,
53 |             }
54 |         },
55 |         handleFruitChange({detail}) {
56 |             this.current = detail.value;
57 |         },
58 |         handleClick() {
59 |             this.position = this.position.indexOf('left') !== -1 ? 'right' : 'left';
60 |         },
61 |         handleDisabled() {
62 |             this.disabled = !this.disabled;
63 |         },
64 |         handleAnimalChange({detail}) {
65 |             this.checked = detail.current;
66 |         },
67 |     }
68 | </script>
69 | 


--------------------------------------------------------------------------------
/src/pages/spin/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-spin" src="apex-ui/components/spin/index.ux"></import>
 2 | <import name="my-button" src="apex-ui/components/button/index.ux"></import>
 3 | <import name="my-image" src="apex-ui/components/image/index"></import>
 4 | 
 5 | <template>
 6 |   <div class="wrap">
 7 |     <text class="title">基本用法</text>
 8 |     <div class="group">
 9 |       <my-spin ></my-spin>
10 |     </div>
11 |     <text class="title">tip</text>
12 |     <div class="group">
13 |       <my-spin tip="加载中..."></my-spin>
14 |       <my-spin tip="Loading..."></my-spin>
15 |     </div>
16 |     <text class="title">size</text>
17 |     <div class="group">
18 |       <my-spin size="small" tip="加载中..."></my-spin>
19 |       <my-spin tip="加载中..."></my-spin>
20 |       <my-spin size="large" tip="加载中..."></my-spin>
21 |     </div>
22 |     <text class="title">自定义color</text>
23 |     <div class="group">
24 |       <my-spin tip="加载中..." color="red"></my-spin>
25 |       <my-spin tip="加载中..." color="rgba(0,0,0,0.5)"></my-spin>
26 |       <my-spin tip="加载中..." color="#eee"></my-spin>
27 |     </div>
28 |     <text class="title">自定义加载样式</text>
29 |     <div class="group">
30 |       <my-spin>
31 |         <div slot="custom">
32 |           <text>loading...</text>
33 |         </div>
34 |       </my-spin>
35 |     </div>
36 |     <text class="title">nested</text>
37 |     <div style="flex-direction: column;">
38 |       <my-spin tip="加载中..." nested="{{true}}" loading="{{loading}}">
39 |         <div slot="nested" style="flex-direction: column;">
40 |           <text>参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本</text>
41 |           <text>参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本</text>
42 |           <text>参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本</text>
43 |           <text>参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本参考文本</text>
44 |         </div>
45 |       </my-spin>
46 |       <my-button type="info" inline="true" onclick="changeLoading">按钮</my-button>
47 |     </div>
48 |   </div>
49 | </template>
50 | 
51 | <script>
52 | export default {
53 |   data(){
54 |     return {
55 |       loading: true
56 |     }
57 |   },
58 |   
59 |   changeLoading(){
60 |     this.loading = !this.loading
61 |   }
62 | }
63 | </script>
64 | 
65 | <style lang="less">
66 | .wrap {
67 |   flex-direction: column;
68 |   .title{
69 |     padding: 10px 80px;
70 |   }
71 |   .group {
72 |     flex-direction: row;
73 |     justify-content: space-around;
74 |     margin: 10px 0;
75 |   }
76 | }
77 | 
78 | .demo-badge{
79 |   width: 80px;
80 |   height: 80px;
81 |   background-color: #eee;
82 |   border-radius: 6px;
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/src/pages/select/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-icon" src="apex-ui/components/icon/index"></import>
 2 | <import name="my-select" src="apex-ui/components/select/index"></import>
 3 | <template>
 4 |   <div class="wrap">
 5 |     <div class="item" onclick="singleSelect">
 6 |       <text class="type">单选</text>
 7 |       <div class="icon">
 8 |         <text>{{result1}}</text>
 9 |         <my-icon type="arrow-fwd" size="40"></my-icon>
10 |       </div>
11 |     </div>
12 |     <div class="item" onclick="multiSelect">
13 |       <text class="type">多选</text>
14 |       <div class="icon">
15 |         <text>{{result2}}</text>
16 |         <my-icon type="arrow-fwd" size="40"></my-icon>
17 |       </div>
18 |     </div>
19 |     <div class="item" onclick="customSelect">
20 |       <text class="type">自定义个数</text>
21 |       <div class="icon">
22 |         <text>{{result3}}</text>
23 |         <my-icon type="arrow-fwd" size="40"></my-icon>
24 |       </div>
25 |     </div>
26 |     <my-select id="select1" oncomfirm="singleClose"></my-select>
27 |     <my-select id="select2" oncomfirm="multiClose"></my-select>
28 |     <my-select id="select3" oncomfirm="customClose"></my-select>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | export default {
34 |   data: {
35 |     result1: "请选择",
36 |     result2: "请选择",
37 |     result3: "请选择",
38 |     opt1: []
39 |   },
40 |   singleSelect() {
41 |     let opt = ["苹果", "梨子", "西瓜", "荔枝", "榴莲", "番石榴"]
42 |     this.$child('select1').showSelect({
43 |       options: opt,
44 |     })
45 |   },
46 |   multiSelect() {
47 |     let opt = ["医生", "法官", "律师", "教师", "警察", "护士", "会计"]
48 |     this.$child('select2').showSelect({
49 |       options: opt,
50 |       type: 'checkBox'
51 |     })
52 |   },
53 |   customSelect() {
54 |     let opt = ["北京", "伦敦", "东京", "巴黎", "罗马", "柏林", "哥本哈根", "曼谷"]
55 |     this.$child('select3').showSelect({
56 |       options: opt,
57 |       type: 'checkBox',
58 |       max: 3
59 |     })
60 |   },
61 |   singleClose(evt) {
62 |     this.result1 = evt.detail.data || "请选择"
63 |   },
64 |   multiClose(evt) {
65 |     this.result2 = evt.detail.data || "请选择"
66 |   },
67 |   customClose(evt) {
68 |     this.result3 = evt.detail.data || "请选择"
69 |   },
70 | }
71 | </script>
72 | 
73 | <style lang="less">
74 | .wrap {
75 |   flex: 1;
76 |   width: 100%;
77 |   background-color: #f9f9f9;
78 |   flex-direction: column;
79 |   justify-content: center;
80 |   .item {
81 |     border: 1px solid #eeeeee;
82 |     background-color: #fff;
83 |     height: 80px;
84 |     width: 100%;
85 |     padding-left: 20px;
86 |     align-items: center;
87 |     justify-content: space-between;
88 |     .type {
89 |       height: 80px;
90 |       width: 40%;
91 |       justify-content: space-between;
92 |     }
93 |     .icon {
94 |       justify-content: space-between;
95 |     }
96 |   }
97 | }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/pages/toast/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-toast" src="apex-ui/components/toast/index"></import>
 2 | <import name="my-button" src="apex-ui/components/button/index.ux"></import>
 3 | 
 4 | <template>
 5 |   <div class="wrap">
 6 |     <my-button type="ghost" ontap="handleText">只显示文本</my-button>
 7 |     <my-button type="ghost" ontap="handleSuccess">成功</my-button>
 8 |     <my-button type="ghost" ontap="handleWarning">警告</my-button>
 9 |     <my-button type="ghost" ontap="handleError">错误</my-button>
10 |     <my-button type="ghost" ontap="handleLoading">Loading</my-button>
11 |     <my-button type="ghost" ontap="handleIcon">使用图标</my-button>
12 |     <my-button type="ghost" ontap="handleImage">使用自定义图片</my-button>
13 |     <my-button type="ghost" ontap="handleMask">无遮罩层</my-button>
14 | 
15 |     <my-toast id="toast"></my-toast>
16 |   </div>
17 | </template>
18 | <style lang="less">
19 |   .wrap {
20 |     flex-direction: column;
21 |     padding-top: 100px;
22 |   }
23 | </style>
24 | <script>
25 |     export default {
26 |         data() {
27 |         },
28 |         handleText() {
29 |             this.$child('toast').showToast({
30 |                 content: '这是文本提示'
31 |             });
32 |         },
33 |         handleSuccess() {
34 |             this.$child('toast').showToast({
35 |                 content: '成功的提示',
36 |                 type: 'success'
37 |             });
38 |         },
39 |         handleWarning() {
40 |             this.$child('toast').showToast({
41 |                 content: '警告的提示',
42 |                 type: 'warning'
43 |             });
44 |         },
45 |         handleError() {
46 |             this.$child('toast').showToast({
47 |                 content: '错误的提示',
48 |                 type: 'error'
49 |             });
50 |         },
51 |         handleLoading() {
52 |             this.$child('toast').showToast({
53 |                 content: '加载中',
54 |                 type: 'loading'
55 |             });
56 |         },
57 |         handleIcon() {
58 |             this.$child('toast').showToast({
59 |                 content: '使用内置的图标',
60 |                 icon: 'thumbs-up'
61 |             });
62 |         },
63 |         handleImage() {
64 |             this.$child('toast').showToast({
65 |                 content: '使用自定义图片',
66 |                 image: 'https://quickapp.vivo.com.cn/content/images/size/w1000/2019/03/quickapp-logo-4.png'
67 |             });
68 |         },
69 |         handleMask() {
70 |             const _this = this;
71 |             this.$child('toast').showToast({
72 |                 content: '5秒后自动关闭',
73 |                 icon: 'woman',
74 |                 duration: 0,
75 |                 mask: false
76 |             });
77 |             setTimeout(() => {
78 |                 _this.$child('toast').hideToast();
79 |             }, 5000);
80 |         },
81 |     }
82 | </script>
83 | 


--------------------------------------------------------------------------------
/src/pages/checkbox/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-checkbox" src="apex-ui/components/checkbox/index"></import>
 2 | <import name="my-checkbox-group" src="apex-ui/components/checkbox-group/index"></import>
 3 | <import name="my-button" src="apex-ui/components/button/index"></import>
 4 | <template>
 5 |   <div class="wrap">
 6 |     <text class="title">组合</text>
 7 |     <my-checkbox-group id="myGroup" current="{{ current }}" onchange="handleFruitChange">
 8 |       <my-checkbox group="myGroup" for="{{fruit}}" position="{{position}}" value="{{$item.name}}"></my-checkbox>
 9 |     </my-checkbox-group>
10 |     <my-button onclick="handleClick" type="ghost">切换复选框位置</my-button>
11 |     <text class="title">单个</text>
12 |     <my-checkbox value="{{animal}}" disabled="{{disabled}}" checked="{{checked}}"
13 |                  onchange="handleAnimalChange"></my-checkbox>
14 |     <my-button onclick="handleDisabled" type="ghost">切换disabled状态</my-button>
15 |     <text class="title">形状</text>
16 |     <my-checkbox value="{{animal}}" shape="square" disabled="{{disabled}}" checked="{{checked}}"
17 |                  onchange="handleAnimalChange"></my-checkbox>
18 |   </div>
19 | </template>
20 | <style lang="less">
21 |   @import "~apex-ui/components/styles/base";
22 | 
23 |   .wrap {
24 |     flex-direction: column;
25 |     background-color: @background-color-base;
26 |     .title {
27 |       margin: 20px;
28 |     }
29 |   }
30 | </style>
31 | <script>
32 |     export default {
33 |         data() {
34 |             return {
35 |                 fruit: [{
36 |                     id: 1,
37 |                     name: '香蕉',
38 |                     checked: false
39 |                 }, {
40 |                     id: 2,
41 |                     name: '苹果',
42 |                     checked: true
43 |                 }, {
44 |                     id: 3,
45 |                     name: '西瓜',
46 |                     checked: false
47 |                 }, {
48 |                     id: 4,
49 |                     name: '葡萄',
50 |                     checked: false
51 |                 }],
52 |                 current: ['苹果', '葡萄'],
53 |                 position: 'left',
54 |                 animal: '熊猫',
55 |                 checked: false,
56 |                 disabled: false,
57 |             }
58 |         },
59 |         handleFruitChange({detail = {}}) {
60 |             const index = this.current.indexOf(detail.value);
61 |             index === -1 ? this.current.push(detail.value) : this.current.splice(index, 1);
62 |         },
63 |         handleClick() {
64 |             this.position = this.position.indexOf('left') !== -1 ? 'right' : 'left';
65 |         },
66 |         handleDisabled() {
67 |             this.disabled = !this.disabled;
68 |         },
69 |         handleAnimalChange({detail}) {
70 |             this.checked = detail.current;
71 |         },
72 |     }
73 | </script>
74 | 


--------------------------------------------------------------------------------
/src/pages/image/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-image" src="apex-ui/components/image/index"></import>
 2 | 
 3 | <template>
 4 |   <div class="wrap">
 5 |     <text class="title">Shape</text>
 6 |     <div class="group">
 7 |       <my-image src="https://picsum.photos/200/200/?random&s=1" shape="rounded" width="200px" height="200px"></my-image>
 8 |       <my-image src="https://picsum.photos/200/200/?random&s=2" shape="circle" width="200px" height="200px"></my-image>
 9 |       <my-image src="https://picsum.photos/200/200/?random&s=3" shape="thumbnail" width="200px" height="200px"></my-image>
10 |     </div>
11 |     <text class="title">loading</text>
12 |     <div class="group">
13 |       <my-image src="https://picsum.photos/200/200/?random&s=4" width="200px" height="200px"></my-image>
14 |       <my-image src="https://picsum.photos/200/200/?random&s=5" loading="loading" width="200px" height="200px"></my-image>
15 |       <my-image src="https://picsum.photos/200/200/?random&s=6" width="200px" height="200px">
16 |         <div class="loading-message" slot="loading">
17 |           <image src="../../images/loading.gif"></image>
18 |         </div>
19 |       </my-image>
20 |     </div>
21 |     <text class="title">empty</text>
22 |     <div class="group">
23 |       <my-image src="" width="200px" height="200px"></my-image>
24 |       <my-image src="" empty="empty" width="200px" height="200px"></my-image>
25 |       <my-image src="" width="200px" height="200px">
26 |         <div class="empty-message" slot="empty">
27 |           <image src="../../images/ufo.svg"></image>
28 |           <text>图片不见了</text>
29 |         </div>
30 |       </my-image>
31 |     </div>
32 |     <text class="title">error</text>
33 |     <div class="group">
34 |       <my-image src="error" width="200px" height="200px"></my-image>
35 |       <my-image src="error" error="error" width="200px" height="200px"></my-image>
36 |       <my-image src="error" width="200px" height="200px">
37 |         <div class="empty-message" slot="error">
38 |           <image src="../../images/ufo.svg"></image>
39 |           <text>图片不见了</text>
40 |         </div>
41 |         <div class="loading-message" slot="loading">
42 |           <image src="../../images/loading.gif"></image>
43 |         </div>
44 |       </my-image>
45 |     </div>
46 |   </div>
47 | </template>
48 | <style lang="less">
49 | .wrap {
50 |   flex-direction: column;
51 |   .title{
52 |     padding: 10px 80px;
53 |   }
54 |   .group {
55 |     flex-direction: row;
56 |     justify-content: space-around;
57 |     margin: 10px 0;
58 |   }
59 | }
60 | 
61 | .empty-message{
62 |   flex-direction: column;
63 |   justify-content: center;
64 |   image{
65 |     align-self: center;
66 |     width:100px;
67 |     height:100px;
68 |   }
69 | }
70 | 
71 | .loading-message{
72 |   justify-content: center;
73 |   image{
74 |     align-self: center;
75 |     width:100px;
76 |     height:100px;
77 |   }
78 | }
79 | </style>
80 | <script>
81 | export default {
82 |   data() {
83 |   }
84 | }
85 | </script>
86 | 


--------------------------------------------------------------------------------
/src/pages/circle/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-circle" src="apex-ui/components/circle/index"></import>
 2 | <import name="my-button" src="apex-ui/components/button/index.ux"></import>
 3 | <import name="my-icon" src="apex-ui/components/icon/index.ux"></import>
 4 | 
 5 | <template>
 6 |   <div class="wrap">
 7 |     <text class="title">基本用法</text>
 8 |     <div class="group">
 9 |       <my-circle percent="80" size="200">
10 |         <text class="basic-use-text">80%</text>
11 |       </my-circle>
12 |       <my-circle percent="100" stroke-color="#19be6b" size="200">
13 |         <my-icon type="checkmark" size="80" color="#19be6b"></my-icon>
14 |       </my-circle>
15 |       <my-circle percent="75" stroke-color="#ed3f14" size="200">
16 |         <my-icon type="close" size="80" color="#ed3f14"></my-icon>
17 |       </my-circle>
18 |     </div>
19 |     <text class="title">不同样式</text>
20 |     <div class="group">
21 |       <my-circle percent="80" size="200" stroke-linecap="square" stroke-width="30" trail-width="10" trail-color="#ed3f14"></my-circle>
22 |       <my-circle percent="80" size="200" show-trail="{{false}}"></my-circle>
23 |     </div>
24 |     <text class="title">起始角度及旋转方向</text>
25 |     <div class="group">
26 |       <my-circle percent="80" size="200" anticlockwise="{{true}}"></my-circle>
27 |       <my-circle percent="80" size="200" s-angle="{{90}}"></my-circle>
28 |       <my-circle percent="80" size="200" anticlockwise="{{true}}" s-angle="{{90}}"></my-circle>
29 |     </div>
30 |     <text class="title">与外部组件配合</text>
31 |     <div class="group">
32 |       <my-circle percent="{{percent}}" stroke-color="{{color}}" s-angle="{{270}}" >
33 |         <div>
34 |           <my-icon if="{{percent >= 100}}" type="checkmark" size="80" color="#19be6b" ></my-icon>
35 |           <text else class="basic-use-text">{{percent}}%</text>
36 |         </div>
37 |       </my-circle>
38 |       <div>
39 |         <my-button type="success" ontap="handleClickAdd">+</my-button>
40 |         <my-button type="success" ontap="handleClickMinus">-</my-button>
41 |       </div>
42 |     </div>
43 |   </div>
44 | </template>
45 | 
46 | <script>
47 | export default {
48 |   data(){
49 |     return {
50 |       percent: 40,
51 |     }
52 |   },
53 | 
54 |   computed: {
55 |     color(){
56 |       let color = '#2db7f5'
57 |       if (this.percent >= 100) {
58 |         color = '#5cb85c'
59 |       }
60 |       return color
61 |     }
62 |   },
63 |   
64 |   handleClickAdd(){
65 |     if(this.percent < 100){
66 |       this.percent += 10
67 |     }
68 |   },
69 | 
70 |   handleClickMinus(){
71 |     if(this.percent > 0){
72 |       this.percent -= 10
73 |     }
74 |   }
75 | }
76 | </script>
77 | 
78 | <style lang="less">
79 | .wrap {
80 |   flex-direction: column;
81 |   .title{
82 |     padding: 10px 80px;
83 |   }
84 |   .group {
85 |     flex-direction: row;
86 |     justify-content: space-around;
87 |     margin: 10px 0;
88 |   }
89 | }
90 | 
91 | .basic-use-text{
92 |   font-size: 40px;
93 |   font-weight: bold;
94 | }
95 | </style>
96 | 
97 | 


--------------------------------------------------------------------------------
/src/pages/accordion/index.ux:
--------------------------------------------------------------------------------
 1 | <import name="my-accordion" src="apex-ui/components/accordion/index.ux"></import>
 2 | <import name="my-accordion-group" src="apex-ui/components/accordion-group/index.ux"></import>
 3 | 
 4 | <template>
 5 |   <div class="wrap">
 6 |     <my-accordion-group id="default" title="Default" default-open="{{ ['0', '1'] }}" onchange="handleChange">
 7 |       <my-accordion group-id="default" title="Accordion 1" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
 8 |       <my-accordion group-id="default" title="Accordion 2" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
 9 |       <my-accordion group-id="default" title="Accordion 3" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
10 |     </my-accordion-group>
11 |     <my-accordion-group id="default2" title="thumb" default-open="{{ ['0'] }}">
12 |       <my-accordion group-id="default2" thumb="../../images/logo-d.png" title="Accordion 4" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
13 |       <my-accordion group-id="default2" thumb="../../images/logo-d.png" title="Accordion 5" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
14 |       <my-accordion group-id="default2" thumb="../../images/logo-d.png" title="Accordion 6" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
15 |     </my-accordion-group>
16 |     <my-accordion-group id="default3" title="disabled">
17 |       <my-accordion group-id="default3" disabled="{{true}}" title="Accordion 7" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
18 |       <my-accordion group-id="default3" disabled="{{true}}" title="Accordion 8" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
19 |       <my-accordion group-id="default3" disabled="{{true}}" title="Accordion 9" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
20 |     </my-accordion-group>
21 |     <my-accordion-group id="default4" title="accordion模式" accordion="{{true}}" default-open="{{ ['0'] }}">
22 |       <my-accordion group-id="default4" title="Accordion 10" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
23 |       <my-accordion group-id="default4" title="Accordion 11" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
24 |       <my-accordion group-id="default4" title="Accordion 12" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
25 |     </my-accordion-group>
26 |     <my-accordion-group id="default5" title="custom key" label="label" default-open="{{ ['0', '2'] }}">
27 |       <my-accordion group-id="default5" key="key1" title="Accordion 13" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
28 |       <my-accordion group-id="default5" key="key2" title="Accordion 14" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
29 |       <my-accordion group-id="default5" key="key3" title="Accordion 15" content="自定义组件自定义组件自定义组件自定义组件自定义组件"></my-accordion>
30 |     </my-accordion-group>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | export default {
36 |   handleChange(e){
37 |     console.log('index',e.detail.key)
38 |   }
39 | }
40 | </script>
41 | 
42 | <style>
43 | .wrap{
44 |   flex-direction: column;
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/pages/textarea/index.ux:
--------------------------------------------------------------------------------
  1 | <import name="my-textarea" src="apex-ui/components/textarea/index.ux"></import>
  2 | <import name="my-icon" src="apex-ui/components/icon/index.ux"></import>
  3 | 
  4 | <template>
  5 |   <div class="wrap">
  6 |     <text class="title">基础用法</text>
  7 |     <div class="group">
  8 |       <div class="cell">
  9 |         <my-textarea placeholder="请输入内容"></my-textarea>
 10 |       </div>
 11 |       <div class="cell">
 12 |         <my-textarea label="label" placeholder="请输入内容"></my-textarea>
 13 |       </div>
 14 |       <div class="cell">
 15 |         <my-textarea label="label" placeholder="请输入内容" rows="{{3}}"></my-textarea>
 16 |       </div>
 17 |     </div>
 18 |     <text class="title">focus</text>
 19 |     <div class="group">
 20 |       <div class="cell">
 21 |         <my-textarea label="label" placeholder="请输入内容" focus="{{true}}"></my-textarea>
 22 |       </div>
 23 |     </div>
 24 |     <text class="title">count</text>
 25 |     <div class="group">
 26 |       <div class="cell">
 27 |         <my-textarea placeholder="请输入内容" rows="{{3}}" has-count="{{true}}"></my-textarea>
 28 |       </div>
 29 |     </div>
 30 |     <text class="title">clear</text>
 31 |     <div class="group">
 32 |       <div class="cell">
 33 |         <my-textarea label="label" placeholder="请输入内容" clear="{{true}}" default-value="文本"></my-textarea>
 34 |       </div>
 35 |     </div>
 36 |     <text class="title">disabled</text>
 37 |     <div class="group">
 38 |       <div class="cell">
 39 |         <my-textarea label="label" placeholder="请输入内容" default-value="undisabled"></my-textarea>
 40 |       </div>
 41 |       <div class="cell">
 42 |         <my-textarea label="label" placeholder="请输入内容" disabled="{{true}}" default-value="disabled"></my-textarea>
 43 |       </div>
 44 |     </div>
 45 |     <text class="title">extra</text>
 46 |     <div class="group">
 47 |       <div class="cell">
 48 |         <my-textarea label="Dollar" extra="$" default-value="1024"></my-textarea>
 49 |       </div>
 50 |       <div class="cell">
 51 |         <my-textarea label="RMB" extra="¥" default-value="1024"></my-textarea>
 52 |       </div>
 53 |     </div>
 54 |     <text class="title">slot</text>
 55 |     <div class="group">
 56 |       <div class="cell">
 57 |         <my-textarea placeholder="请输入内容">
 58 |           <div slot="label" style="padding-right:50px;">
 59 |             <my-icon type="paper-plane" size="50"></my-icon>
 60 |           </div>
 61 |         </my-textarea>
 62 |       </div>
 63 |       <div class="cell">
 64 |         <my-textarea placeholder="请输入内容">
 65 |           <my-icon type="cut" size="50" slot="extra"></my-icon>
 66 |         </my-textarea>
 67 |       </div>
 68 |     </div>
 69 |   </div>
 70 | </template>
 71 | <style lang="less">
 72 | @import '~apex-ui/components//styles/base.less';
 73 | 
 74 | .wrap {
 75 |   flex-direction: column;
 76 |   background-color: @background-color-base;
 77 | 
 78 |   .title {
 79 |     margin: 20px;
 80 |   }
 81 | 
 82 |   .group{
 83 |     flex-direction: column;
 84 |     background-color: #ffffff;
 85 |     border-bottom: 1px solid #eee;
 86 |     border-top: 1px solid #eee;
 87 |     
 88 |     .cell{
 89 |       margin-left: 20px;
 90 |       padding: 20px 0;
 91 |       border-bottom: 1px solid #eee;
 92 |     }
 93 |   }
 94 | }
 95 | </style>
 96 | <script>
 97 | export default {
 98 |   data() {
 99 |     return {
100 |     }
101 |   }
102 | }
103 | </script>
104 | 


--------------------------------------------------------------------------------
/src/pages/countdown/index.ux:
--------------------------------------------------------------------------------
  1 | <import name="my-button" src="apex-ui/components/button/index"></import>
  2 | <import name="my-input" src="apex-ui/components/input/index"></import>
  3 | <template>
  4 |   <div class="wrap">
  5 |     <div class="countdown">
  6 |       <text>距离2077年还剩:</text>
  7 |       <text>{{number1}}</text>
  8 |     </div>
  9 |     <div class="vcode">
 10 |       <my-input title="手机号" type="number" placeholder="请输入手机号"></my-input>
 11 |       <my-button if="number2 === 0" ontap="vcode()">获取验证码</my-button>
 12 |       <my-button if="number2 !== 0" type="ghost">{{number2}}</my-button>
 13 |     </div>
 14 |     <div class="countdown">
 15 |       <text>距离这个页面消失还剩:{{number3}}</text>
 16 |     </div>
 17 |     <my-button ontap="start()">开始</my-button>
 18 |     <my-button ontap="stop()">停止</my-button>
 19 |     <my-button ontap="update()">更新</my-button>
 20 |   </div>
 21 | </template>
 22 | <style lang="less">
 23 |   .wrap {
 24 |     flex-direction: column;
 25 |     padding: 20px;
 26 | 
 27 |     .countdown {
 28 |       padding: 40px 0;
 29 |       flex-direction: column;
 30 | 
 31 |       text {
 32 |         font-size: 40px;
 33 |       }
 34 |     }
 35 | 
 36 |     .vcode {
 37 |       margin: 30px 0;
 38 |       justify-content: space-between;
 39 |     }
 40 |   }
 41 | </style>
 42 | <script>
 43 |     import Countdown from 'apex-ui/components/countdown/index';
 44 | 
 45 |     export default {
 46 |         data() {
 47 |             return {
 48 |                 number1: 0,
 49 |                 number2: 0,
 50 |                 number3: 0
 51 |             }
 52 |         },
 53 |         onInit() {
 54 |             const that = this;
 55 | 
 56 |             this.countdown1 = new Countdown({
 57 |                 date: 'June 7, 2077 17:07:07',
 58 |                 render(date) {
 59 |                     const years = date.years + ' 年 ';
 60 |                     const days = this.leadingZeros(date.days, 3) + ' 天 ';
 61 |                     const hours = this.leadingZeros(date.hours, 2) + ' 时 ';
 62 |                     const min = this.leadingZeros(date.min, 2) + ' 分 ';
 63 |                     const sec = this.leadingZeros(date.sec, 2) + ' 秒 ';
 64 | 
 65 |                     that.number1 = years + days + hours + min + sec;
 66 |                 },
 67 |             });
 68 | 
 69 |             this.countdown3 = new Countdown({
 70 |                 date: +(new Date()) + 60000 * 20,
 71 |                 render(date) {
 72 |                     const min = this.leadingZeros(date.min, 2) + ' 分 ';
 73 |                     const sec = this.leadingZeros(date.sec, 2) + ' 秒 ';
 74 | 
 75 |                     that.number3 = min + sec;
 76 |                 },
 77 |             })
 78 |         },
 79 |         start() {
 80 |             this.countdown3.start()
 81 |         },
 82 |         stop() {
 83 |             this.countdown3.stop()
 84 |         },
 85 |         update() {
 86 |             this.countdown3.update(+(new Date) + 60000 * 30)
 87 |         },
 88 |         vcode() {
 89 |             const that = this;
 90 |             if (this.number2 && this.number2.interval) return !1;
 91 |             new Countdown({
 92 |                 date: +(new Date) + 60000,
 93 |                 onEnd() {
 94 |                     that.number2 = 0;
 95 |                 },
 96 |                 render(date) {
 97 |                     const sec = this.leadingZeros(date.sec, 2) + ' 秒 ';
 98 |                     date.sec !== 0 && (that.number2 = sec);
 99 |                 },
100 |             })
101 |         }
102 |     }
103 | </script>
104 | 


--------------------------------------------------------------------------------
/src/pages/card/index.ux:
--------------------------------------------------------------------------------
  1 | <import name="my-card" src="apex-ui/components/card/index"></import>
  2 | <import name="my-icon" src="apex-ui/components/icon/index"></import>
  3 | <template>
  4 |   <div class="wrap">
  5 |     <text class="title">默认</text>
  6 |     <my-card title="卡片标题" thumb="/images/logo-d.png" extra="额外内容" footer="卡片底部">
  7 |       <text>卡片内容</text>
  8 |     </my-card>
  9 |     <text class="title">通栏</text>
 10 |     <my-card title="卡片标题卡片标题卡片标题卡片标题卡片标题卡片标题卡片标题卡片标题" full="true" thumb="/images/logo-d.png" extra="额外内容" footer="卡片底部">
 11 |       <text class="demo">卡片内容</text>
 12 |     </my-card>
 13 |     <text class="title">使用slot</text>
 14 |     <my-card>
 15 |       <div slot="title">
 16 |         <my-icon type="gift" size="48"></my-icon>
 17 |         <text class="slot-demo-title">礼物清单</text>
 18 |       </div>
 19 |       <div slot="extra" @click="changeRandomGiftList">
 20 |         <my-icon type="refresh" size="48" color="#3086FE"></my-icon>
 21 |         <text style="color:#3086FE ">换一批</text>
 22 |       </div>
 23 |       <list class="slot-demo-list">
 24 |         <list-item class="slot-demo-list-item" type="listItem" for="{{ randomGiftList }}">
 25 |           <text>{{ $item.name }}</text>
 26 |           <text>¥{{ $item.price }}</text>
 27 |         </list-item>
 28 |       </list>
 29 |     </my-card>
 30 |   </div>
 31 | </template>
 32 | <style lang="less">
 33 |   .wrap {
 34 |     background-color: #f7f7f7;
 35 |     flex-direction: column;
 36 |     .title {
 37 |       padding: 20px;
 38 |     }
 39 |   }
 40 |   .demo{
 41 |     font-size: 100px;
 42 |   }
 43 |   .slot-demo-title{
 44 |     font-size: 35px;
 45 |     color: #1c2438; 
 46 |   }
 47 |   .slot-demo-list{
 48 |     height: 300px;
 49 |     &-item{
 50 |       justify-content: space-between;
 51 |       text{
 52 |         font-size: 35px;
 53 |         padding: 5px 0;
 54 |       }
 55 |     }
 56 |   }
 57 | </style>
 58 | <script>
 59 | export default {
 60 |   data() {
 61 |     return{
 62 |       giftList: [{
 63 |         id: 1,
 64 |         name: '鞋子',
 65 |         price: 300
 66 |       }, {
 67 |         id: 2,
 68 |         name: '衣服',
 69 |         price: 150
 70 |       }, {
 71 |         id: 3,
 72 |         name: '裤子',
 73 |         price: 200
 74 |       }, {
 75 |         id: 4,
 76 |         name: '项链',
 77 |         price: 500
 78 |       }, {
 79 |         id: 5,
 80 |         name: '耳环',
 81 |         price: 100
 82 |       }, {
 83 |         id: 6,
 84 |         name: '巧克力',
 85 |         price: 50
 86 |       }, {
 87 |         id: 7,
 88 |         name: '鲜花',
 89 |         price: 40
 90 |       }, {
 91 |         id: 8,
 92 |         name: '糖果',
 93 |         price: 50
 94 |       }, {
 95 |         id: 9,
 96 |         name: '乐高积木',
 97 |         price: 200
 98 |       }, {
 99 |         id: 10,
100 |         name: '飞机模型',
101 |         price: 300
102 |       }],
103 |       randomGiftList: []
104 |     }
105 |   },
106 | 
107 |   onInit() {
108 |     this.changeRandomGiftList()
109 |   },
110 | 
111 |   changeRandomGiftList(){
112 |     const tempArray = []
113 |     const arr = this.giftList
114 |     for (let index in arr) {
115 |       tempArray.push(arr[index])
116 |     }
117 |     const returnArray = []
118 |     for (let i = 0; i < 5; i++) {
119 |       if (tempArray.length>0) {
120 |         const arrIndex = Math.floor(Math.random()*tempArray.length)
121 |         returnArray[i] = tempArray[arrIndex]
122 |         tempArray.splice(arrIndex, 1)
123 |       } else {
124 |         break
125 |       }
126 |     }
127 |     this.randomGiftList = returnArray
128 |   }
129 | }
130 | </script>
131 | 


--------------------------------------------------------------------------------
/src/pages/dialog/index.ux:
--------------------------------------------------------------------------------
  1 | <import name="my-dialog" src="apex-ui/components/dialog/index"></import>
  2 | <import name="my-icon" src="apex-ui/components/icon/index"></import>
  3 |  
  4 | <template>
  5 |   <div class="wrap">
  6 |     <text class="btn" onclick="openDialog1">Default Dialog</text>
  7 |     <text class="btn" onclick="openDialog2">Alter Dialog</text>
  8 |     <text class="btn" onclick="openDialog3">Prompt Dialog</text>
  9 |     <text class="btn" onclick="openDialog4">Custom Dialog</text>
 10 |     <text class="btn" onclick="openDialog5">Vertical Buttons Dialog</text>
 11 |     <my-dialog visible="{{open1}}" title="三秒后自动关闭" content="弹窗内容，告知当前状态、信息和解决方法。详细描述内容：" onaffirm="close" oncancel="close"></my-dialog>
 12 |     <my-dialog visible="{{open2}}" title="冷知识" onclose="close" content="奶牛打嗝会加剧温室效应！" oncancel="close" options="{{opt1}}" dialog-type='alter' onaffirm="close"></my-dialog>
 13 |     <my-dialog visible="{{open3}}" dialog-type='prompt' onaffirm="close" oncancel="close" prompt="{{obj}}" onenter="enter"></my-dialog>
 14 |     <my-dialog visible="{{open4}}" onclick0="btn0" onclick1="btn1" onclick2="btn2" options="{{opt2}}"></my-dialog>
 15 |     <my-dialog visible="{{open5}}" vertical="{{true}}" options="{{opt4}}" onclick0="close" onclick1="close"></my-dialog>
 16 |     <my-dialog visible="{{open6}}" dialog-type='alter' onaffirm="close" options="{{opt3}}"></my-dialog>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | export default {
 22 |   data: {
 23 |     open1: false,
 24 |     open2: false,
 25 |     open3: false,
 26 |     open4: false,
 27 |     open5: false,
 28 |     open6: false,
 29 |     opt1: {},
 30 |     opt2: {},
 31 |     opt3: {},
 32 |     opt4: {},
 33 |     obj: {}
 34 |   },
 35 |   openDialog1() {
 36 |     this.open1 = true
 37 |     setTimeout(() => {
 38 |       this.open1 = false
 39 |     }, 3000);
 40 |   },
 41 |   openDialog2() {
 42 |     this.open2 = true
 43 |     this.opt1 = {
 44 |       closable: true,
 45 |       affirm: '知道了'
 46 |     }
 47 |   },
 48 |   openDialog3() {
 49 |     this.open3 = true
 50 |     this.obj = {
 51 |       title:'提示',
 52 |       content:'请猜出八位数字，按enter键查看结果！',
 53 |       fieldtype: 'password',
 54 |     }
 55 |   },
 56 |   openDialog4() {
 57 |     this.open4 = true
 58 |     this.opt2 = {
 59 |       title: "我是标题",
 60 |       content: "我是自定义对话框",
 61 |       buttons: [
 62 |         {
 63 |           btn: '支付宝支付',
 64 |           style: {
 65 |             color: '#58b4ff',
 66 |           }
 67 |         },
 68 |         {
 69 |           btn: '微信支付',
 70 |           style: {
 71 |             color: '#58b4ff',
 72 |           }
 73 |         },
 74 |         '关闭'
 75 |       ]
 76 |     }
 77 |   },
 78 |   openDialog5() {
 79 |     this.open5 = true
 80 |     this.opt4 = {
 81 |       title: '2选1',
 82 |       content: '下面选项中任选一项',
 83 |       buttons: ['选项1', '选项2']
 84 |     }
 85 |   },
 86 |   close() {
 87 |     this.open1 = false
 88 |     this.open2 = false
 89 |     this.open3 = false
 90 |     this.open4 = false
 91 |     this.open5 = false
 92 |     this.open6 = false
 93 |     this.open7 = false
 94 |   },
 95 |   enter(evt) {
 96 |     this.open3 = false
 97 |     if (evt.detail.event.value === '123456') {
 98 |       console.log(111111)
 99 |       this.opt3 = {
100 |         title: "提示",
101 |         content: "密码正确!"
102 |       }
103 |       this.open6 = true
104 |     } else {
105 |       console.log(222222)
106 |       this.opt3 = {
107 |         title: "提示",
108 |         content: "密码错误!"
109 |       }
110 |       this.open6 = true
111 |     }
112 |   },
113 |   btn0(evt) {
114 |     this.open4 = false
115 |     this.opt3 = {
116 |       title: "提示",
117 |       content: "你选择了支付宝支付!"
118 |     }
119 |     this.open6 = true
120 |   },
121 |   btn1(evt) {
122 |     this.open4 = false
123 |     this.opt3 = {
124 |       title: "提示",
125 |       content: "你选择了微信支付!"
126 |     }
127 |     this.open6 = true
128 |   },
129 |   btn2() {
130 |     this.open4 = false
131 |   }
132 | }
133 | </script>
134 | 
135 | <style lang="less">
136 | .wrap {
137 |   flex-direction: column;
138 |   background-color: #f7f7f7;
139 |   align-items: center;
140 |   padding-top: 80px;
141 |   .btn {
142 |     height: 80px;
143 |     width: 90%;
144 |     margin: 10px;
145 |     background-color: #fff;
146 |     text-align: center;
147 |     color: #000000;
148 |   }
149 | }
150 | </style>
151 | 


--------------------------------------------------------------------------------
/src/pages/popover/index.ux:
--------------------------------------------------------------------------------
  1 | <import name="my-popover" src="apex-ui/components/popover/index.ux"></import>
  2 | <template>
  3 |   <div class="wrap">
  4 |     <div class="sample">
  5 |       <text class="title">Placement</text>
  6 |       <div class="item top">
  7 |         <my-popover size="{{btn}}" orientation='topLeft' title="top" content='content'>
  8 |           <text class="btn">topLeft</text>
  9 |         </my-popover>
 10 |         <my-popover size="{{btn}}" orientation='top' title="top" content='content'>
 11 |           <text class="btn">top</text>
 12 |         </my-popover>
 13 |         <my-popover size="{{btn}}" orientation='topRight' title="topRight" content='content'>
 14 |           <text class="btn">topRight</text>
 15 |         </my-popover>
 16 |       </div>
 17 |       <div class="item right">
 18 |         <my-popover size="{{btn}}" orientation='rightTop' title="rightTop" content='content'>
 19 |           <text class="btn">rightTop</text>
 20 |         </my-popover>
 21 |         <my-popover size="{{btn}}" orientation='right' title="right" content='content'>
 22 |           <text class="btn">right</text>
 23 |         </my-popover>
 24 |         <my-popover size="{{btn}}" orientation='rightBottom' title="rightBottom" content='content'>
 25 |           <text class="btn">rightBottom</text>
 26 |         </my-popover>
 27 |       </div>
 28 |       <div class="item bottom">
 29 |         <my-popover size="{{btn}}" orientation='bottomRight' title="bottomRight" content='content'>
 30 |           <text class="btn">bottomRight</text>
 31 |         </my-popover>
 32 |         <my-popover size="{{btn}}" orientation='bottom' title="bottom" content='content'>
 33 |           <text class="btn">bottom</text>
 34 |         </my-popover>
 35 |         <my-popover size="{{btn}}" orientation='bottomLeft' title="bottomLeft" content='content'>
 36 |           <text class="btn">bottomLeft</text>
 37 |         </my-popover>
 38 |       </div>
 39 |       <div class="item left">
 40 |         <my-popover size="{{btn}}" orientation='leftTop' title="leftTop" content='content'>
 41 |           <text class="btn">leftTop</text>
 42 |         </my-popover>
 43 |         <my-popover size="{{btn}}" orientation='left' title="left" content='content'>
 44 |           <text class="btn">left</text>
 45 |         </my-popover>
 46 |         <my-popover size="{{btn}}" orientation='leftBottom' title="leftBottom" content='content'>
 47 |           <text class="btn">leftBottom</text>
 48 |         </my-popover>
 49 |       </div>
 50 |     </div>
 51 |     <div class="sample">
 52 |     <div class="sample" style="margin-top:100px;">
 53 |       <text class="title">Custom Style</text>
 54 |       <div class="item">
 55 |         <my-popover popover-color="#d8bfd8" popover-width="400" popover-height="200" size="{{btn}}" title="title" content="content">
 56 |           <text class="btn">top</text>
 57 |         </my-popover>
 58 |       </div>
 59 |     </div>
 60 |     <div class="sample">
 61 |     <div class="sample" style="margin-top:100px;">
 62 |       <text class="title">Slot Style</text>
 63 |       <div class="item">
 64 |         <my-popover size="{{btn}}">
 65 |           <text class="btn">top</text>
 66 |           <text slot="title" class="slot-title" onclick="jump('custom title!')">Title</text>
 67 |           <text slot="content" class="slot-content" onclick="jump('custom content!')">content</text>
 68 |         </my-popover>
 69 |       </div>
 70 |     </div>
 71 |   </div>
 72 | </template>
 73 | 
 74 | <script>
 75 | import prompt from '@system.prompt'
 76 | export default {
 77 |   data: {
 78 |     btn: [200, 80],
 79 |   },
 80 |   jump(type) {
 81 |     prompt.showToast({
 82 |       message: type
 83 |     })
 84 |   }
 85 | }
 86 | </script>
 87 | 
 88 | <style lang="less">
 89 | .wrap {
 90 |   flex-direction: column;
 91 |   flex: 1;
 92 |   width: 100%;
 93 |   padding: 20px 20px 60px;
 94 |   background-color: #f7f7f7;
 95 |   padding: 20px;
 96 |   padding-top: 100px;
 97 |   .sample {
 98 |     flex-direction: column;
 99 |     width: 100%;
100 |     .title {
101 |       margin-top: 20px;
102 |       color: #b8b8b8;
103 |       font-size: 40px;
104 |     }
105 |     .item {
106 |       width: 100%;
107 |       flex-direction: column;
108 |       margin-top: 50px;
109 |       align-content: center;
110 |       align-items: center;
111 |       .btn {
112 |         color: #000000;
113 |         height: 80px;
114 |         width: 200px;
115 |         border: 1px solid #e4e4e4;
116 |         border-radius: 12px;
117 |         text-align: center;
118 |         background-color: #fff;
119 |       }
120 |       .btn:active {
121 |         background-color: #e4e4e4;
122 |       }
123 |     }
124 |     .right {
125 |       align-items: flex-start;
126 |     }
127 |     .left {
128 |       align-items: flex-end;
129 |     }
130 |     .slot-title {
131 |       color: #ff4500;
132 |       font-size: 30px;
133 |       padding: 20px;
134 |       width: 100%;
135 |     }
136 |     .slot-content {
137 |       padding: 20px;
138 |       width: 100%;
139 |       border-top: 1px solid #e4e4e4;
140 |     }
141 |   }
142 | }
143 | </style>
144 | 


--------------------------------------------------------------------------------
/src/pages/calendar/index.ux:
--------------------------------------------------------------------------------
  1 | <import name="my-card" src="apex-ui/components/card/index.ux"></import>
  2 | <import name="my-icon" src="apex-ui/components/icon/index.ux"></import>
  3 | <import name="my-calendar" src="apex-ui/components/calendar/index.ux"></import>
  4 |  
  5 | <template>
  6 |   <div class="wrap">
  7 |     <my-card>
  8 |       <div slot="title">
  9 |         <div class="calendar-title">
 10 |           <my-icon type="time" size="48" color="#11c1f3"></my-icon>
 11 |           <text>单程</text>
 12 |         </div>
 13 |       </div>
 14 |       <div class="card-content">
 15 |         <div class="currentDate" onclick="openCalendar('single')">
 16 |           <div class="date">
 17 |             <text class="day">{{singleTrip.month}}月{{singleTrip.day}}日</text>
 18 |             <text class="week">周{{singleTrip.week}}</text>
 19 |           </div>
 20 |           <my-icon type="arrow-fwd" size="32"></my-icon>
 21 |         </div>
 22 |       </div>
 23 |     </my-card>
 24 |     <my-card>
 25 |       <div slot="title">
 26 |         <div class="calendar-title">
 27 |           <my-icon type="time" size="48" color="#11c1f3"></my-icon>
 28 |           <text>联程</text>
 29 |         </div>
 30 |       </div>
 31 |       <div class="card-content">
 32 |         <div class="currentDate" onclick="openCalendar('round')">
 33 |           <div class="date">
 34 |             <text class="day">{{roundTrip.start.month}}月{{roundTrip.start.day}}日</text>
 35 |             <text class="week">周{{roundTrip.start.week}}</text>
 36 |           </div>
 37 |           <my-icon type="arrow-fwd" size="32"></my-icon>
 38 |           <div class="date">
 39 |             <text class="day">{{roundTrip.end.month}}月{{roundTrip.end.day}}日</text>
 40 |             <text class="week">周{{roundTrip.end.week}}</text>
 41 |           </div>
 42 |           <my-icon type="arrow-fwd" size="32"></my-icon>
 43 |         </div>
 44 |       </div>
 45 |     </my-card>
 46 |     <my-calendar visible="{{open}}" trip="{{tripType}}" onschedule="getSchedule"></my-calendar>
 47 |   </div>
 48 | </template>
 49 | 
 50 | <script>
 51 | export default {
 52 |   data() {
 53 |     return {
 54 |       currentPage: 0,
 55 |       roundTrip: {},
 56 |       singleTrip: {},
 57 |       open: false,
 58 |       tripType: '',
 59 |       moreTrip: {},
 60 |     }
 61 |   },
 62 |   onInit() {
 63 |     this.sendToComponent()
 64 |   },
 65 | 
 66 |   getDateObj() {
 67 |     const date = new Date()
 68 |     let year = date.getFullYear()
 69 |     let month = date.getMonth() + 1
 70 |     let day = date.getDate()
 71 |     let week = date.getDay()
 72 |     const lastDay = new Date(`${year}`, `${month}`, 0).getDate()
 73 |     let obj = {
 74 |       year,
 75 |       month,
 76 |       day,
 77 |       week: this.getWeek(week)
 78 |     }
 79 |     return { obj, lastDay, week }
 80 |   },
 81 | 
 82 |   sendToComponent() {
 83 |     let obj = this.getDateObj().obj
 84 |     let lastDay = this.getDateObj().lastDay
 85 |     let week = this.getDateObj().week
 86 |     this.singleTrip = obj
 87 |     let defalutObj = {}
 88 |     if (obj.day + 1 > lastDay) {
 89 |       if (obj.month < 12) {
 90 |         defalutObj.month = obj.month + 1
 91 |       } else {
 92 |         defalutObj.year = obj.year + 1
 93 |         defalutObj.month = 1
 94 |       }
 95 |       defalutObj.day = 1
 96 |     } else {
 97 |       defalutObj = {
 98 |         year: obj.year,
 99 |         month: obj.month,
100 |         day: obj.day + 1
101 |       }
102 |     }
103 |     week + 1 > 6 ? defalutObj.week = this.getWeek(0) : defalutObj.week = this.getWeek(week + 1)
104 |     this.roundTrip = {
105 |       start: obj,
106 |       end: defalutObj
107 |     }
108 |   },
109 | 
110 |   openCalendar(type) {
111 |     this.tripType = type
112 |     this.open = !this.open
113 |   },
114 | 
115 |   getWeek(date) {
116 |     const weekArr = ['日', '一', '二', '三', '四', '五', '六']
117 |     return weekArr[date]
118 |   },
119 | 
120 |   getSchedule(e) {
121 |     console.log(JSON.parse(e.detail.data))
122 |     if (this.tripType === 'round') {
123 |       this.roundTrip = JSON.parse(e.detail.data)
124 |     }
125 |     if (this.tripType === 'single') {
126 |       this.singleTrip = JSON.parse(e.detail.data)
127 |     }
128 |   }
129 | }
130 | 
131 | </script>
132 | 
133 | <style lang="less">
134 | .wrap {
135 |   align-content: center;
136 |   width: 100%;
137 |   flex-direction: column;
138 |   .calendar-title {
139 |     width: 100%;
140 |     padding-left: 20px;
141 |     align-items: center;
142 |     text {
143 |       margin-left: 20px;
144 |     }
145 |   }
146 |   .card-content {
147 |     width: 100%;
148 |     flex-direction: column;
149 |     align-content: center;
150 |     justify-content: center;
151 |     .currentDate {
152 |       width: 100%;
153 |       padding: 20px;
154 |       justify-content: space-between;
155 |       align-items: center;
156 |       .line {
157 |         height: 1px;
158 |         width: 80%;
159 |         background-color: #ff0000;
160 |       }
161 |       .date {
162 |         align-items: flex-end;
163 |         .week {
164 |           margin-left: 10px;
165 |           margin-right: 20px;
166 |         }
167 |       }
168 |     }
169 |   }
170 | }
171 | </style>
172 | 


--------------------------------------------------------------------------------
/src/pages/color/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="wrap column">
  3 |     <div class="type">
  4 |       <text>主色</text>
  5 |     </div>
  6 |     <div class="color primary-bg column">
  7 |       <div class="color-title">
  8 |         <text>Primary</text>
  9 |       </div>
 10 |       <div class="color-label">
 11 |         <text>#2d8cf0</text>
 12 |       </div>
 13 |     </div>
 14 |     <div class="color light-primary-bg column">
 15 |       <div class="color-title">
 16 |         <text>Light Primary</text>
 17 |       </div>
 18 |       <div class="color-label">
 19 |         <text>#5cadff</text>
 20 |       </div>
 21 |     </div>
 22 |     <div class="color dark-primary-bg column">
 23 |       <div class="color-title">
 24 |         <text>Dark Primary</text>
 25 |       </div>
 26 |       <div class="color-label">
 27 |         <text>#2b85e4</text>
 28 |       </div>
 29 |     </div>
 30 |     <div class="type">
 31 |       <text>辅助色</text>
 32 |     </div>
 33 |     <div class="color success-bg column">
 34 |       <div class="color-title">
 35 |         <text>Success</text>
 36 |       </div>
 37 |       <div class="color-label">
 38 |         <text>#19be6b</text>
 39 |       </div>
 40 |     </div>
 41 |     <div class="color warning-bg column">
 42 |       <div class="color-title">
 43 |         <text>Warning</text>
 44 |       </div>
 45 |       <div class="color-label">
 46 |         <text>#ff9900</text>
 47 |       </div>
 48 |     </div>
 49 |     <div class="color error-bg column">
 50 |       <div class="color-title">
 51 |         <text>Error</text>
 52 |       </div>
 53 |       <div class="color-label">
 54 |         <text>#ed3f14</text>
 55 |       </div>
 56 |     </div>
 57 |     <div class="type">
 58 |       <text>中性色</text>
 59 |     </div>
 60 |     <div class="color title-bg column">
 61 |       <div class="color-title">
 62 |         <text>标题 title</text>
 63 |       </div>
 64 |       <div class="color-label">
 65 |         <text>#1c2438</text>
 66 |       </div>
 67 |     </div>
 68 |     <div class="color content-bg column">
 69 |       <div class="color-title">
 70 |         <text>正文 content</text>
 71 |       </div>
 72 |       <div class="color-label">
 73 |         <text>#495060</text>
 74 |       </div>
 75 |     </div>
 76 |     <div class="color sub-color-bg column">
 77 |       <div class="color-title">
 78 |         <text>辅助 sub-color</text>
 79 |       </div>
 80 |       <div class="color-label">
 81 |         <text>#ed3f14</text>
 82 |       </div>
 83 |     </div>
 84 |     <div class="color disabled-bg column">
 85 |       <div class="color-title">
 86 |         <text>失效 disabled</text>
 87 |       </div>
 88 |       <div class="color-label">
 89 |         <text>#bbbec4</text>
 90 |       </div>
 91 |     </div>
 92 |     <div class="color border-bg column">
 93 |       <div class="color-title">
 94 |         <text style="color: #495060;">边框 border</text>
 95 |       </div>
 96 |       <div class="color-label">
 97 |         <text style="color: #495060;">#dddee1</text>
 98 |       </div>
 99 |     </div>
100 |     <div class="color divider-bg column">
101 |       <div class="color-title">
102 |         <text style="color: #495060;">分割线 divider</text>
103 |       </div>
104 |       <div class="color-label">
105 |         <text style="color: #495060;">#e9eaec</text>
106 |       </div>
107 |     </div>
108 |     <div class="color background-bg column">
109 |       <div class="color-title">
110 |         <text style="color: #495060;">背景 background</text>
111 |       </div>
112 |       <div class="color-label">
113 |         <text style="color: #495060;">#f8f8f9</text>
114 |       </div>
115 |     </div>
116 |   </div>
117 | </template>
118 | <style lang="less">
119 |   @import '~apex-ui/components/styles/base.less';
120 | 
121 |   .primary-bg {
122 |     background-color: @primary-color;
123 |   }
124 | 
125 |   .light-primary-bg {
126 |     background-color: #5cadff;
127 |   }
128 | 
129 |   .dark-primary-bg {
130 |     background-color: #2b85e4;
131 |   }
132 | 
133 |   .success-bg {
134 |     background-color: @success-color;
135 |   }
136 | 
137 |   .warning-bg {
138 |     background-color: @warning-color;
139 |   }
140 | 
141 |   .error-bg {
142 |     background-color: @error-color;
143 |   }
144 | 
145 |   .title-bg {
146 |     background-color: @title-color;
147 |   }
148 | 
149 |   .content-bg {
150 |     background-color: @text-color;
151 |   }
152 | 
153 |   .sub-color-bg {
154 |     background-color: @subsidiary-color;
155 |   }
156 | 
157 |   .disabled-bg {
158 |     background-color: ;
159 |   }
160 | 
161 |   .border-bg {
162 |     background-color: @border-color-base;
163 |   }
164 | 
165 |   .divider-bg {
166 |     background-color: @border-color-split;
167 |   }
168 | 
169 |   .background-bg {
170 |     background-color: @background-color-base;
171 |   }
172 | 
173 |   .column {
174 |     flex-direction: column;
175 |   }
176 | 
177 |   .wrap {
178 |     padding: 20px;
179 |     .type {
180 |       padding-bottom: 20px;
181 |       text {
182 |         font-size: 30px;
183 |       }
184 |     }
185 |     .color {
186 |       border-radius: 5px;
187 |       padding: 20px;
188 |       margin-bottom: 20px;
189 |       text {
190 |         color: #ffffff;
191 |       }
192 |     }
193 |   }
194 | </style>
195 | <script>
196 |     export default {
197 |         data: {}
198 |     }
199 | </script>
200 | 


--------------------------------------------------------------------------------
/src/pages/home/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="wrap">
  3 |     <div class="logo">
  4 |       <image src="../../images/logo-d.png"></image>
  5 |     </div>
  6 |     <div class="type">
  7 |       <text>基础组件</text>
  8 |     </div>
  9 |     <div class="component">
 10 |       <div class="item"><a href="/pages/color">色彩 color</a></div>
 11 |       <div class="item"><a href="/pages/icon">图标 icon</a></div>
 12 |       <div class="item"><a href="/pages/button">按钮 button</a></div>
 13 |     </div>
 14 |     <div class="type">
 15 |       <text>导航组件</text>
 16 |     </div>
 17 |     <div class="component">
 18 |       <div class="item"><a href="/pages/navbar">导航栏 navbar</a></div>
 19 |       <div class="item"><a href="/pages/tabbar">标签栏 tabbar</a></div>
 20 |       <div class="item"><a href="/pages/pagination">分页器 pagination</a></div>
 21 |       <div class="item"><a href="/pages/segmented-control">分段器 segmented-control</a></div>
 22 |       <div class="item"><a href="/pages/popover">气泡框 popover</a></div>
 23 |     </div>
 24 |     <div class="type">
 25 |       <text>表单数据</text>
 26 |     </div>
 27 |     <div class="component">
 28 |       <div class="item"><a href="/pages/input">文本输入框 input</a></div>
 29 |       <div class="item"><a href="/pages/input-number">数字输入框 input-number</a></div>
 30 |       <div class="item"><a href="/pages/radio">单选框 radio</a></div>
 31 |       <div class="item"><a href="/pages/checkbox">复选框 checkbox</a></div>
 32 |       <div class="item"><a href="/pages/switch">滑动按钮 switch</a></div>
 33 |       <div class="item"><a href="/pages/rating">评分 rating</a></div>
 34 |       <div class="item"><a href="/pages/textarea">多行输入框 textarea</a></div>
 35 |       <div class="item"><a href="/pages/calendar">日历 calendar</a></div>
 36 |       <div class="item"><a href="/pages/search-bar">搜索栏 searchBar</a></div>
 37 |       <div class="item"><a href="/pages/upload">上传 upload</a></div>
 38 |       <div class="item"><a href="/pages/slider">滑动选择器 slider</a></div>
 39 |     </div>
 40 |      <div class="type">
 41 |       <text>数据展示</text>
 42 |     </div>
 43 |     <div class="component">
 44 |       <div class="item"><a href="/pages/alert">警告提示 alert</a></div>
 45 |       <div class="item"><a href="/pages/prompt">提示消息 prompt</a></div>
 46 |       <div class="item"><a href="/pages/avatar">头像 avatar</a></div>
 47 |       <div class="item"><a href="/pages/card">卡片 card</a></div>
 48 |       <div class="item"><a href="/pages/divider">分隔符 divider</a></div>
 49 |       <div class="item"><a href="/pages/badge">徽章 badge</a></div>
 50 |       <div class="item"><a href="/pages/image">图片 image</a></div>
 51 |       <div class="item"><a href="/pages/media">媒体对象 media</a></div>
 52 |       <div class="item"><a href="/pages/accordion">手风琴 accordion</a></div>
 53 |       <div class="item"><a href="/pages/select">下拉框 select</a></div>
 54 |       <div class="item"><a href="/pages/counter">计数器 counter</a></div>
 55 |       <div class="item"><a href="/pages/countdown">倒计时 countdown</a></div>
 56 |       <div class="item"><a href="/pages/steps">步骤 steps</a></div>
 57 |       <div class="item"><a href="/pages/sticky">吸顶容器 sticky</a></div>
 58 |       <div class="item"><a href="/pages/index">索引选择器 index</a></div>
 59 |       <div class="item"><a href="/pages/fab-button">浮动按钮 fab-button</a></div>
 60 |     </div>
 61 |     <div class="type">
 62 |       <text>操作反馈</text>
 63 |     </div>
 64 |     <div class="component">
 65 |       <div class="item"><a href="/pages/message">全局提示 message</a></div>
 66 |       <div class="item"><a href="/pages/toast">提示框 toast</a></div>
 67 |       <div class="item"><a href="/pages/load-more">页底提示 loadMore</a></div>
 68 |       <div class="item"><a href="/pages/dialog">对话框 dialog</a></div>
 69 |       <div class="item"><a href="/pages/spin">加载中 spin</a></div>
 70 |       <div class="item"><a href="/pages/circle">进度环 circle</a></div>
 71 |       <div class="item"><a href="/pages/gallery">画廊 gallery</a></div>
 72 |       <div class="item"><a href="/pages/action-sheet">上拉菜单 actionSheet</a></div>
 73 |       <div class="item"><a href="/pages/popup">弹出框 popup</a></div>
 74 |       <div class="item"><a href="/pages/mask">背景幕 mask</a></div>
 75 |     </div>
 76 |     <div class="type">
 77 |       <text>拓展组件</text>
 78 |     </div>
 79 |     <div class="component">
 80 |       <div class="item"><a href="/pages/barcode">条形码 barcode</a></div>
 81 |       <div class="item"><a href="/pages/qrcode">二维码 qrcode</a></div>
 82 |       <div class="item"><a href="/pages/vcode">验证码 vcode</a></div>
 83 |       <div class="item"><a href="/pages/keyboard">数字键盘 keyboard</a></div>
 84 |       <div class="item"><a href="/pages/result">结果页 result</a></div>
 85 |       <div class="item"><a href="/pages/filter-bar">筛选栏 filterBar</a></div>
 86 |     </div>
 87 |   </div>
 88 | </template>
 89 | <style lang="less">
 90 | .wrap {
 91 |   flex-direction: column;
 92 |   background-color: #f7f7f7;
 93 |   .logo {
 94 |     justify-content: center;
 95 |     padding: 50px 0;
 96 |     image {
 97 |       height: 100px;
 98 |     }
 99 |   }
100 |   .type {
101 |     padding: 20px;
102 |   }
103 |   .component {
104 |     background-color: #ffffff;
105 |     border-style: solid;
106 |     border-top-width: 1px;
107 |     border-top-color: #dddee1;
108 |     border-bottom-width: 1px;
109 |     flex-direction: column;
110 |     .item {
111 |       height: 100px;
112 |       justify-content: space-between;
113 |       margin-left: 20px;
114 |       border-bottom-width: 1px;
115 |       border-bottom-color: #dddee1;
116 |       border-style: solid;
117 |       a {
118 |         width: 100%;
119 |       }
120 |       a :active {
121 |         width: 100%;
122 |       }
123 |     }
124 |   }
125 | }
126 | </style>
127 | <script>
128 | export default {
129 |   data() {
130 |       return {}
131 |   },
132 |   onInit() {
133 |     console.log('home page init!!')
134 |   },
135 | }
136 | </script>
137 | 


--------------------------------------------------------------------------------
/src/pages/filter-bar/index.ux:
--------------------------------------------------------------------------------
  1 | <import name="my-filterBar" src="apex-ui/components/filter-bar/index"></import>
  2 | <template>
  3 |   <div>
  4 |     <my-filterBar items="{{items}}" onfilter="handleFilter"></my-filterBar>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | export default {
 10 |   data: {
 11 |     items: [
 12 |       {
 13 |         type: 'radio',
 14 |         label: 'Updated',
 15 |         value: 'updated',
 16 |         checked: true,
 17 |         children: [{
 18 |           label: 'Recently updated',
 19 |           value: 'desc',
 20 |           checked: true, // 默认选中
 21 |         },
 22 |         {
 23 |           label: 'Least recently updated',
 24 |           value: 'asc',
 25 |         }],
 26 |       },
 27 |       {
 28 |         type: 'text',
 29 |         label: 'Forks',
 30 |         value: 'forks'
 31 |       },
 32 |       {
 33 |         type: 'sort',
 34 |         label: 'Stars',
 35 |         value: 'stars'
 36 |       },
 37 |       {
 38 |         type: 'filter',
 39 |         label: '筛选',
 40 |         value: 'filter',
 41 |         checked: true,
 42 |         children: [{
 43 |           type: 'radio',
 44 |           label: 'Languages（单选）',
 45 |           value: 'language',
 46 |           children: [{
 47 |             label: 'JavaScript',
 48 |             value: 'javascript',
 49 |           },
 50 |           {
 51 |             label: 'HTML',
 52 |             value: 'html',
 53 |           },
 54 |           {
 55 |             label: 'CSS',
 56 |             value: 'css',
 57 |           },
 58 |           {
 59 |             label: 'TypeScript',
 60 |             value: 'typescript',
 61 |           },
 62 |           ],
 63 |         },
 64 |         {
 65 |           type: 'checkbox',
 66 |           label: 'Query（复选）',
 67 |           value: 'query',
 68 |           checked: true,
 69 |           children: [{
 70 |             label: 'Angular',
 71 |             value: 'angular',
 72 |           },
 73 |           {
 74 |             label: 'Vue',
 75 |             value: 'vue',
 76 |           },
 77 |           {
 78 |             label: 'React',
 79 |             value: 'react',
 80 |             checked: true, // 默认选中
 81 |           },
 82 |           {
 83 |             label: 'Avalon',
 84 |             value: 'avalon',
 85 |           },
 86 |           ],
 87 |         },
 88 |         {
 89 |           type: 'checkbox',
 90 |           label: '配送方式',
 91 |           value: 'away',
 92 |           children: [{
 93 |             label: '京东配送',
 94 |             value: '1',
 95 |           },
 96 |           {
 97 |             label: '货到付款',
 98 |             value: '2',
 99 |           },
100 |           {
101 |             label: '仅看有货',
102 |             value: '3',
103 |           },
104 |           {
105 |             label: '促销',
106 |             value: '4',
107 |           },
108 |           {
109 |             label: '全球购',
110 |             value: '5',
111 |           },
112 |           {
113 |             label: 'PLUS专享价',
114 |             value: '6',
115 |           },
116 |           {
117 |             label: '新品',
118 |             value: '7',
119 |           },
120 |           {
121 |             label: '配送全球',
122 |             value: '8',
123 |           },
124 |           ],
125 |         },
126 |         {
127 |           type: 'radio',
128 |           label: '性别',
129 |           value: 'gander',
130 |           children: [{
131 |             label: '男',
132 |             value: '0',
133 |           },
134 |           {
135 |             label: '女',
136 |             value: '1',
137 |           },
138 |           {
139 |             label: '通用',
140 |             value: '2',
141 |           },
142 |           ],
143 |         },
144 |         {
145 |           type: 'checkbox',
146 |           label: '闭合方式',
147 |           value: 'closed_mode',
148 |           children: [{
149 |             label: '卡扣',
150 |             value: '0',
151 |           },
152 |           {
153 |             label: '拉链',
154 |             value: '1',
155 |           },
156 |           {
157 |             label: '其他',
158 |             value: '2',
159 |           },
160 |           ],
161 |         },
162 |         {
163 |           type: 'checkbox',
164 |           label: '轮子种类',
165 |           value: 'wheel_type',
166 |           children: [{
167 |             label: '万向轮',
168 |             value: '0',
169 |           },
170 |           {
171 |             label: '单向轮',
172 |             value: '1',
173 |           },
174 |           {
175 |             label: '飞机轮',
176 |             value: '2',
177 |           },
178 |           {
179 |             label: '其他',
180 |             value: '3',
181 |           },
182 |           ],
183 |         },
184 |         {
185 |           type: 'checkbox',
186 |           label: '箱包硬度',
187 |           value: 'wheel_type',
188 |           children: [{
189 |             label: '硬箱',
190 |             value: '0',
191 |           },
192 |           {
193 |             label: '软硬结合',
194 |             value: '1',
195 |           },
196 |           {
197 |             label: '软箱',
198 |             value: '2',
199 |           },
200 |           {
201 |             label: '其他',
202 |             value: '3',
203 |           },
204 |           ],
205 |         },
206 |         {
207 |           type: 'checkbox',
208 |           label: '适用场景',
209 |           value: 'wheel_type',
210 |           children: [{
211 |             label: '旅行',
212 |             value: '0',
213 |           },
214 |           {
215 |             label: '婚庆',
216 |             value: '1',
217 |           },
218 |           {
219 |             label: '出差',
220 |             value: '2',
221 |           },
222 |           {
223 |             label: '其他',
224 |             value: '3',
225 |           },
226 |           ],
227 |         },
228 |         ],
229 |       },
230 |     ],
231 |   },
232 | 
233 |   handleFilter(e) {
234 |     console.log('barResult', JSON.parse(e.detail.barResult))
235 |     console.log('sideResult', JSON.parse(e.detail.sideResult))
236 |   }
237 | }
238 | </script>
239 | 
240 | <style>
241 | </style>
242 | 


--------------------------------------------------------------------------------
/src/pages/sticky/index.ux:
--------------------------------------------------------------------------------
  1 | <import name="my-sticky" src="apex-ui/components/sticky/index.ux"></import>
  2 | <import name="my-sticky-item" src="apex-ui/components/sticky-item/index.ux"></import>
  3 | 
  4 | <template>
  5 |   <div>
  6 |     <my-sticky id="sticky1">
  7 |       <my-sticky-item group-id="sticky1" title="🐶🐶🐶🐶">
  8 |         <div class="my-content" slot="content">
  9 |           <div class="demo-item"><text>呦呦呦呦呦呦呦呦呦呦呦呦</text></div>
 10 |           <div class="demo-item"><text>啦啦啦啦啦啦啦啦啦啦</text></div>
 11 |           <div class="demo-item"><text>哔卟哔卟哔卟哔卟哔卟哔卟哔卟</text></div>
 12 |           <div class="demo-item"><text>略略略略略略略略略略略略略略略略</text></div>
 13 |           <div class="demo-item"><text>嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</text></div>
 14 |           <div class="demo-item"><text>吱吱喳喳吱吱喳喳</text></div>
 15 |           <div class="demo-item"><text>哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦</text></div>
 16 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
 17 |         </div>
 18 |       </my-sticky-item>
 19 |       <my-sticky-item group-id="sticky1" title="🐱🐱🐱🐱">
 20 |         <div class="my-content" slot="content">
 21 |           <div class="demo-item"><text>呦呦呦呦呦呦呦呦呦呦呦呦</text></div>
 22 |           <div class="demo-item"><text>啦啦啦啦啦啦啦啦啦啦</text></div>
 23 |           <div class="demo-item"><text>哔卟哔卟哔卟哔卟哔卟哔卟哔卟</text></div>
 24 |           <div class="demo-item"><text>略略略略略略略略略略略略略略略略</text></div>
 25 |           <div class="demo-item"><text>嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</text></div>
 26 |           <div class="demo-item"><text>吱吱喳喳吱吱喳喳</text></div>
 27 |           <div class="demo-item"><text>吱吱喳喳吱吱喳喳</text></div>
 28 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
 29 |           <div class="demo-item"><text>哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦</text></div>
 30 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
 31 |         </div>
 32 |       </my-sticky-item>
 33 |       <my-sticky-item group-id="sticky1" title="🐭🐭🐭🐭">
 34 |         <div class="my-content" slot="content">
 35 |           <div class="demo-item"><text>呦呦呦呦呦呦呦呦呦呦呦呦</text></div>
 36 |           <div class="demo-item"><text>啦啦啦啦啦啦啦啦啦啦</text></div>
 37 |           <div class="demo-item"><text>哔卟哔卟哔卟哔卟哔卟哔卟哔卟</text></div>
 38 |           <div class="demo-item"><text>略略略略略略略略略略略略略略略略</text></div>
 39 |           <div class="demo-item"><text>嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</text></div>
 40 |           <div class="demo-item"><text>吱吱喳喳吱吱喳喳</text></div>
 41 |           <div class="demo-item"><text>吱吱喳喳吱吱喳喳</text></div>
 42 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
 43 |           <div class="demo-item"><text>哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦</text></div>
 44 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
 45 |         </div>
 46 |       </my-sticky-item>
 47 |       <my-sticky-item group-id="sticky1" title="🐹🐹🐹🐹">
 48 |         <div class="my-content" slot="content">
 49 |           <div class="demo-item"><text>呦呦呦呦呦呦呦呦呦呦呦呦</text></div>
 50 |           <div class="demo-item"><text>啦啦啦啦啦啦啦啦啦啦</text></div>
 51 |           <div class="demo-item"><text>哔卟哔卟哔卟哔卟哔卟哔卟哔卟</text></div>
 52 |           <div class="demo-item"><text>略略略略略略略略略略略略略略略略</text></div>
 53 |           <div class="demo-item"><text>嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</text></div>
 54 |           <div class="demo-item"><text>吱吱喳喳吱吱喳喳</text></div>
 55 |           <div class="demo-item"><text>哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦</text></div>
 56 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
 57 |         </div>
 58 |       </my-sticky-item>
 59 |       <my-sticky-item group-id="sticky1" title="🐸🐸🐸🐸">
 60 |         <div class="my-content" slot="content">
 61 |           <div class="demo-item"><text>呦呦呦呦呦呦呦呦呦呦呦呦</text></div>
 62 |           <div class="demo-item"><text>啦啦啦啦啦啦啦啦啦啦</text></div>
 63 |           <div class="demo-item"><text>哔卟哔卟哔卟哔卟哔卟哔卟哔卟</text></div>
 64 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
 65 |           <div class="demo-item"><text>略略略略略略略略略略略略略略略略</text></div>
 66 |           <div class="demo-item"><text>嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</text></div>
 67 |           <div class="demo-item"><text>吱吱喳喳吱吱喳喳</text></div>
 68 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
 69 |           <div class="demo-item"><text>哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦</text></div>
 70 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
 71 |         </div>
 72 |       </my-sticky-item>
 73 |       <my-sticky-item group-id="sticky1" title="🥺🥺🥺🥺">
 74 |         <div class="my-content" slot="content">
 75 |           <div class="demo-item"><text>呦呦呦呦呦呦呦呦呦呦呦呦</text></div>
 76 |           <div class="demo-item"><text>啦啦啦啦啦啦啦啦啦啦</text></div>
 77 |           <div class="demo-item"><text>哔卟哔卟哔卟哔卟哔卟哔卟哔卟</text></div>
 78 |           <div class="demo-item"><text>略略略略略略略略略略略略略略略略</text></div>
 79 |           <div class="demo-item"><text>嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</text></div>
 80 |           <div class="demo-item"><text>吱吱喳喳吱吱喳喳</text></div>
 81 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
 82 |           <div class="demo-item"><text>哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦</text></div>
 83 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
 84 |         </div>
 85 |       </my-sticky-item>
 86 |       <my-sticky-item group-id="sticky1" title="🤩🤩🤩🤩">
 87 |         <div class="my-content" slot="content">
 88 |           <div class="demo-item"><text>呦呦呦呦呦呦呦呦呦呦呦呦</text></div>
 89 |           <div class="demo-item"><text>啦啦啦啦啦啦啦啦啦啦</text></div>
 90 |           <div class="demo-item"><text>哔卟哔卟哔卟哔卟哔卟哔卟哔卟</text></div>
 91 |           <div class="demo-item"><text>略略略略略略略略略略略略略略略略</text></div>
 92 |           <div class="demo-item"><text>嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</text></div>
 93 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
 94 |           <div class="demo-item"><text>吱吱喳喳吱吱喳喳</text></div>
 95 |           <div class="demo-item"><text>哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦</text></div>
 96 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
 97 |         </div>
 98 |       </my-sticky-item>
 99 |       <my-sticky-item group-id="sticky1" title="🤯🤯🤯🤯">
100 |         <div class="my-content" slot="content">
101 |           <div class="demo-item"><text>呦呦呦呦呦呦呦呦呦呦呦呦</text></div>
102 |           <div class="demo-item"><text>啦啦啦啦啦啦啦啦啦啦</text></div>
103 |           <div class="demo-item"><text>哔卟哔卟哔卟哔卟哔卟哔卟哔卟</text></div>
104 |           <div class="demo-item"><text>略略略略略略略略略略略略略略略略</text></div>
105 |           <div class="demo-item"><text>嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</text></div>
106 |           <div class="demo-item"><text>吱吱喳喳吱吱喳喳</text></div>
107 |           <div class="demo-item"><text>吱吱喳喳吱吱喳喳</text></div>
108 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
109 |           <div class="demo-item"><text>哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦</text></div>
110 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
111 |         </div>
112 |       </my-sticky-item>
113 |       <my-sticky-item group-id="sticky1" title="🤔🤔🤔🤔">
114 |         <div class="my-content" slot="content">
115 |           <div class="demo-item"><text>呦呦呦呦呦呦呦呦呦呦呦呦</text></div>
116 |           <div class="demo-item"><text>啦啦啦啦啦啦啦啦啦啦</text></div>
117 |           <div class="demo-item"><text>哔卟哔卟哔卟哔卟哔卟哔卟哔卟</text></div>
118 |           <div class="demo-item"><text>略略略略略略略略略略略略略略略略</text></div>
119 |           <div class="demo-item"><text>嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</text></div>
120 |           <div class="demo-item"><text>吱吱喳喳吱吱喳喳</text></div>
121 |           <div class="demo-item"><text>吱吱喳喳吱吱喳喳</text></div>
122 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
123 |           <div class="demo-item"><text>哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦哗啦啦</text></div>
124 |           <div class="demo-item"><text>红红火火恍恍惚惚红红火火恍恍惚惚</text></div>
125 |         </div>
126 |       </my-sticky-item>
127 |     </my-sticky>
128 |   </div>
129 | </template>
130 | 
131 | <script>
132 | export default {
133 | 
134 | }
135 | </script>
136 | 
137 | <style>
138 | .my-content {
139 |   flex-direction: column;
140 |   background-color: #fff;
141 |   width: 100%;
142 | }
143 | 
144 | .demo-item {
145 |   border-bottom: 1px solid #ddd;
146 |   padding: 20px;
147 | }
148 | 
149 | text {
150 |   color: #000;
151 | }
152 | </style>
153 | 


--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "package": "com.apex.ui.quickapp",
  3 |   "name": "apex-ui",
  4 |   "versionName": "1.0.0",
  5 |   "versionCode": "1",
  6 |   "minPlatformVersion": "1050",
  7 |   "icon": "/images/logo-d.png",
  8 |   "features": [
  9 |     {
 10 |       "name": "system.prompt"
 11 |     },
 12 |     {
 13 |       "name": "system.router"
 14 |     },
 15 |     {
 16 |       "name": "system.shortcut"
 17 |     },
 18 |     {
 19 |       "name": "system.image"
 20 |     }
 21 |   ],
 22 |   "permissions": [
 23 |     {
 24 |       "origin": "*"
 25 |     }
 26 |   ],
 27 |   "config": {
 28 |     "logLevel": "debug",
 29 |     "designWidth": 750
 30 |   },
 31 |   "router": {
 32 |     "entry": "pages/home",
 33 |     "pages": {
 34 |       "pages/home": {
 35 |         "component": "index"
 36 |       },
 37 |       "pages/color": {
 38 |         "component": "index"
 39 |       },
 40 |       "pages/icon": {
 41 |         "component": "index"
 42 |       },
 43 |       "pages/button": {
 44 |         "component": "index"
 45 |       },
 46 |       "pages/input": {
 47 |         "component": "index"
 48 |       },
 49 |       "pages/input-number": {
 50 |         "component": "index"
 51 |       },
 52 |       "pages/radio": {
 53 |         "component": "index"
 54 |       },
 55 |       "pages/checkbox": {
 56 |         "component": "index"
 57 |       },
 58 |       "pages/navbar": {
 59 |         "component": "index"
 60 |       },
 61 |       "pages/pagination": {
 62 |         "component": "index"
 63 |       },
 64 |       "pages/segmented-control": {
 65 |         "component": "index"
 66 |       },
 67 |       "pages/tabbar": {
 68 |         "component": "index"
 69 |       },
 70 |       "pages/tabbar/page1": {
 71 |         "component": "index"
 72 |       },
 73 |       "pages/tabbar/page2": {
 74 |         "component": "index"
 75 |       },
 76 |       "pages/divider": {
 77 |         "component": "index"
 78 |       },
 79 |       "pages/switch": {
 80 |         "component": "index"
 81 |       },
 82 |       "pages/rating": {
 83 |         "component": "index"
 84 |       },
 85 |       "pages/alert": {
 86 |         "component": "index"
 87 |       },
 88 |       "pages/prompt": {
 89 |         "component": "index"
 90 |       },
 91 |       "pages/avatar": {
 92 |         "component": "index"
 93 |       },
 94 |       "pages/card": {
 95 |         "component": "index"
 96 |       },
 97 |       "pages/message": {
 98 |         "component": "index"
 99 |       },
100 |       "pages/toast": {
101 |         "component": "index"
102 |       },
103 |       "pages/load-more": {
104 |         "component": "index"
105 |       },
106 |       "pages/badge": {
107 |         "component": "index"
108 |       },
109 |       "pages/barcode": {
110 |         "component": "index"
111 |       },
112 |       "pages/image": {
113 |         "component": "index"
114 |       },
115 |       "pages/spin": {
116 |         "component": "index"
117 |       },
118 |       "pages/circle": {
119 |         "component": "index"
120 |       },
121 |       "pages/accordion": {
122 |         "component": "index"
123 |       },
124 |       "pages/calendar": {
125 |         "component": "index"
126 |       },
127 |       "pages/popover": {
128 |         "component": "index"
129 |       },
130 |       "pages/search-bar": {
131 |         "component": "index"
132 |       },
133 |       "pages/dialog": {
134 |         "component": "index"
135 |       },
136 |       "pages/textarea": {
137 |         "component": "index"
138 |       },
139 |       "pages/media": {
140 |         "component": "index"
141 |       },
142 |       "pages/gallery": {
143 |         "component": "index"
144 |       },
145 |       "pages/qrcode": {
146 |         "component": "index"
147 |       },
148 |       "pages/steps": {
149 |         "component": "index"
150 |       },
151 |       "pages/vcode": {
152 |         "component": "index"
153 |       },
154 |       "pages/counter": {
155 |         "component": "index"
156 |       },
157 |       "pages/countdown": {
158 |         "component": "index"
159 |       },
160 |       "pages/keyboard": {
161 |         "component": "index"
162 |       },
163 |       "pages/result": {
164 |         "component": "index"
165 |       },
166 |       "pages/upload": {
167 |         "component": "index"
168 |       },
169 |       "pages/action-sheet": {
170 |         "component": "index"
171 |       },
172 |       "pages/sticky": {
173 |         "component": "index"
174 |       },
175 |       "pages/index": {
176 |         "component": "index"
177 |       },
178 |       "pages/fab-button": {
179 |         "component": "index"
180 |       },
181 |       "pages/popup": {
182 |         "component": "index"
183 |       },
184 |       "pages/filter-bar": {
185 |         "component": "index"
186 |       },
187 |       "pages/mask": {
188 |         "component": "index"
189 |       }
190 |     }
191 |   },
192 |   "display": {
193 |     "titleBarBackgroundColor": "#f2f2f2",
194 |     "titleBarTextColor": "#414141",
195 |     "menu": true,
196 |     "pages": {
197 |       "pages/home": {
198 |         "titleBarText": "apex组件示例",
199 |         "menu": false
200 |       },
201 |       "pages/color": {
202 |         "titleBarText": "推荐色彩 color",
203 |         "menu": false
204 |       },
205 |       "pages/icon": {
206 |         "titleBarText": "图标 icon",
207 |         "menu": false
208 |       },
209 |       "pages/button": {
210 |         "titleBarText": "按钮 button",
211 |         "menu": false
212 |       },
213 |       "pages/navbar": {
214 |         "titleBarText": "导航栏 navbar",
215 |         "menu": false
216 |       },
217 |       "pages/input": {
218 |         "titleBarText": "文本输入框 input",
219 |         "menu": false
220 |       },
221 |       "pages/input-number": {
222 |         "titleBarText": "数字输入框 input-number",
223 |         "menu": false
224 |       },
225 |       "pages/tabbar": {
226 |         "titleBarText": "标签栏 tabbar",
227 |         "menu": false
228 |       },
229 |       "pages/tabbar/page1": {
230 |         "titleBarText": "示例页面一",
231 |         "menu": false
232 |       },
233 |       "pages/tabbar/page2": {
234 |         "titleBarText": "示例页面二",
235 |         "menu": false
236 |       },
237 |       "pages/divider": {
238 |         "titleBarText": "分隔符 divider",
239 |         "menu": false
240 |       },
241 |       "pages/pagination": {
242 |         "titleBarText": "分页器 pagination",
243 |         "menu": false
244 |       },
245 |       "pages/tag": {
246 |         "titleBarText": "标签 tag",
247 |         "menu": false
248 |       },
249 |       "pages/segmented-control": {
250 |         "titleBarText": "分段器 segmentedControl",
251 |         "menu": false
252 |       },
253 |       "pages/radio": {
254 |         "titleBarText": "单选框 radio",
255 |         "menu": false
256 |       },
257 |       "pages/checkbox": {
258 |         "titleBarText": "复选框 checkbox",
259 |         "menu": false
260 |       },
261 |       "pages/switch": {
262 |         "titleBarText": "滑动按钮 switch",
263 |         "menu": false
264 |       },
265 |       "pages/rating": {
266 |         "titleBarText": "评分 rating",
267 |         "menu": false
268 |       },
269 |       "pages/alert": {
270 |         "titleBarText": "警告提示 alert",
271 |         "menu": false
272 |       },
273 |       "pages/prompt": {
274 |         "titleBarText": "提示消息 prompt",
275 |         "menu": false
276 |       },
277 |       "pages/avatar": {
278 |         "titleBarText": "头像 avatar",
279 |         "menu": false
280 |       },
281 |       "pages/card": {
282 |         "titleBarText": "卡片 card",
283 |         "menu": false
284 |       },
285 |       "pages/message": {
286 |         "titleBarText": "全局提示 message",
287 |         "menu": false
288 |       },
289 |       "pages/toast": {
290 |         "titleBarText": "提示框 toast",
291 |         "menu": false
292 |       },
293 |       "pages/load-more": {
294 |         "titleBarText": "底部提示 loadMore",
295 |         "menu": false
296 |       },
297 |       "pages/badge": {
298 |         "titleBarText": "徽章 badge",
299 |         "menu": false
300 |       },
301 |       "pages/image": {
302 |         "titleBarText": "图片 image",
303 |         "menu": false
304 |       },
305 |       "pages/spin": {
306 |         "titleBarText": "加载中 spin",
307 |         "menu": false
308 |       },
309 |       "pages/circle": {
310 |         "titleBarText": "进度环 circle",
311 |         "menu": false
312 |       },
313 |       "pages/textarea": {
314 |         "titleBarText": "多行输入框 textarea",
315 |         "menu": false
316 |       },
317 |       "pages/gallery": {
318 |         "titleBarText": "画廊 gallery",
319 |         "menu": false
320 |       },
321 |       "pages/accordion": {
322 |         "titleBarText": "手风琴 accordion",
323 |         "menu": false
324 |       },
325 |       "pages/calendar": {
326 |         "titleBarText": "日历 calendar",
327 |         "menu": false
328 |       },
329 |       "pages/popover": {
330 |         "titleBarText": "气泡框 popover",
331 |         "menu": false
332 |       },
333 |       "pages/search-bar": {
334 |         "titleBarText": "搜索栏 searchBar",
335 |         "menu": false
336 |       },
337 |       "pages/dialog": {
338 |         "titleBarText": "对话框 dialog",
339 |         "menu": false
340 |       },
341 |       "pages/qrcode": {
342 |         "titleBarText": "二维码 qrcode",
343 |         "menu": false
344 |       },
345 |       "pages/steps": {
346 |         "titleBarText": "步骤 steps",
347 |         "menu": false
348 |       },
349 |       "pages/vcode": {
350 |         "titleBarText": "验证码 vcode",
351 |         "menu": false
352 |       },
353 |       "pages/counter": {
354 |         "titleBarText": "计数器 counter",
355 |         "menu": false
356 |       },
357 |       "pages/countdown": {
358 |         "titleBarText": "倒计时 countdown",
359 |         "menu": false
360 |       },
361 |       "pages/keyboard": {
362 |         "titleBarText": "数字键盘 keyboard",
363 |         "menu": false
364 |       },
365 |       "pages/result": {
366 |         "titleBarText": "结果页 result",
367 |         "menu": false
368 |       },
369 |       "pages/upload": {
370 |         "titleBarText": "上传 upload",
371 |         "menu": false
372 |       },
373 |       "pages/action-sheet": {
374 |         "titleBarText": "上拉菜单 actionSheet",
375 |         "menu": false
376 |       },
377 |       "pages/sticky": {
378 |         "titleBarText": "吸顶容器 sticky",
379 |         "menu": false
380 |       },
381 |       "pages/index": {
382 |         "titleBarText": "索引选择器 index",
383 |         "menu": false
384 |       },
385 |       "pages/fab-button": {
386 |         "titleBarText": "浮动按钮 fab-button",
387 |         "menu": false
388 |       },
389 |       "pages/popup": {
390 |         "titleBarText": "弹出框 popup",
391 |         "menu": false
392 |       },
393 |       "pages/filter-bar": {
394 |         "titleBarText": "筛选栏 filterBar",
395 |         "menu": false
396 |       },
397 |       "pages/mask": {
398 |         "titleBarText": "背景幕 mask",
399 |         "menu": false
400 |       }
401 |     }
402 |   }
403 | }
404 | 


--------------------------------------------------------------------------------