├── .env.development ├── .env.production ├── .github └── workflows │ └── ci.yml ├── .gitignore ├── LICENSE ├── README.md ├── lerna.json ├── miniprogram ├── app.json ├── app.less ├── app.ts ├── components │ ├── ActionSheet │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── package.json │ │ └── readme.md │ ├── Button │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── index.wxs │ │ ├── package.json │ │ └── readme.md │ ├── Card │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── index.wxs │ │ ├── package.json │ │ └── readme.md │ ├── Dialog │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── package.json │ │ └── readme.md │ ├── DialogQueue │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── package.json │ │ └── readme.md │ ├── Icon │ │ ├── data.ts │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── index.wxs │ │ ├── package.json │ │ ├── readme.md │ │ └── rest │ │ │ └── icon_types.ts │ ├── Landing │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── package.json │ │ └── readme.md │ ├── Line │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── index.wxs │ │ ├── package.json │ │ └── readme.md │ ├── Loading │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── package.json │ │ ├── readme.md │ │ └── style │ │ │ ├── loading.less │ │ │ ├── loading.wxss │ │ │ ├── refresh.less │ │ │ └── refresh.wxss │ ├── Modal │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── package.json │ │ └── readme.md │ ├── NoticeBar │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── index.wxs │ │ ├── package.json │ │ ├── readme.md │ │ └── rest │ │ │ └── icons.ts │ ├── Period │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── package.json │ │ └── readme.md │ ├── Popover │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── index.wxs │ │ ├── package.json │ │ └── readme.md │ ├── Ripple │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── package.json │ │ └── readme.md │ ├── SnackBar │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── index.wxs │ │ ├── package.json │ │ └── readme.md │ ├── Sticky │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── index.wxs │ │ ├── package.json │ │ └── readme.md │ ├── Tab │ │ ├── Sticky │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.ts │ │ │ ├── index.wxml │ │ │ └── index.wxs │ │ ├── TabItem │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.ts │ │ │ └── index.wxml │ │ ├── behavior.ts │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── index.wxs │ │ ├── package.json │ │ └── readme.md │ ├── Text │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── index.wxs │ │ ├── package.json │ │ └── readme.md │ └── Toast │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── package.json │ │ └── readme.md ├── data │ └── menu_items.ts ├── image │ ├── icon_add_person.svg │ ├── icon_add_person_black.svg │ ├── icon_chat.svg │ ├── icon_chat_black.svg │ ├── icon_close.svg │ ├── icon_feedback.svg │ ├── icon_feedback_black.svg │ ├── icon_info.svg │ ├── icon_pay.svg │ ├── icon_pay_black.svg │ ├── icon_right.svg │ ├── icon_scan.svg │ ├── icon_scan_black.svg │ ├── logo_dingding.svg │ ├── logo_instagram.svg │ ├── logo_pengyouquan.svg │ ├── logo_qq.svg │ ├── logo_qzone.svg │ ├── logo_wechat.svg │ ├── logo_weibo.svg │ ├── logo_yixin.svg │ └── logo_zhihu.svg ├── page_components │ └── _Tips │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml ├── pages │ ├── ActionSheet │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Button │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Card │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Dialog │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── DialogQueue │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Icon │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Landing │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Line │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Loading │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Modal │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── NoticeBar │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Period │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Popover │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Ripple │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── SnackBar │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Sticky │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Tab │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Text │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ ├── Toast │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml │ └── index │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ └── index.wxml ├── sitemap.json ├── styles │ ├── atom-miniapp.min.wxss │ ├── init.less │ └── vars.less └── utils │ ├── util.js │ └── util.ts ├── package.json ├── project.config.json ├── tsconfig.json ├── typings └── index.d.ts ├── webpack ├── es5 │ ├── build.js │ ├── compile.tsconfig.json │ ├── loaders.js │ ├── plugins.js │ └── webpack.config.js ├── loaders.js ├── plugins.js ├── resolve.js ├── utils.js ├── webpack.config.common.js ├── webpack.config.dev.js └── webpack.config.prod.js └── yarn.lock /.env.development: -------------------------------------------------------------------------------- 1 | MODE='dev' -------------------------------------------------------------------------------- /.env.production: -------------------------------------------------------------------------------- 1 | MODE='prod' -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Deploy Actions 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | paths-ignore: 8 | - test 9 | - README.md 10 | - LICENSE 11 | 12 | jobs: 13 | Deploy: 14 | runs-on: ubuntu-20.04 15 | steps: 16 | - name: Checkout Repo 17 | uses: actions/checkout@v2 18 | 19 | - name: Start Service 20 | uses: appleboy/ssh-action@master 21 | with: 22 | port: '22' 23 | host: ${{ secrets.SSH_HOST }} 24 | username: ${{ secrets.SSH_USERNAME }} 25 | key: ${{ secrets.DEPLOY_KEY }} 26 | script: cd /App/light-design-server/ && npm run update:submodule && npm run d:prod && docker system prune -af -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | */node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /miniprogram/pages_components/*.js 13 | /miniprogram/pages_components/*.wxss 14 | /miniprogram/components/*.js 15 | /miniprogram/components/*.wxss 16 | /miniprogram/pages/*.js 17 | /miniprogram/pages/*.wxss 18 | /dist 19 | /build 20 | /miniprogram/components_es5 21 | *.zip 22 | *.lock 23 | project.private.config.json 24 | 25 | # env 26 | .DS_Store 27 | .env.local 28 | .env.development.local 29 | .env.test.local 30 | .env.production.local 31 | 32 | # log 33 | *-debug.log* 34 | node_modules 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Dark 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

logo_light_design

2 | 3 | #

Light Design

4 | 5 | _

[lightd.matrixages.com](https://lightd.matrixages.com/)

_ 6 | 7 | _

可能是世界上最漂亮的微信小程序组件库

_ 8 | 9 |

10 | style_img 11 | version_img 12 | size_img 13 | License 14 | attitude_img 15 |

16 | 17 | 18 | ### Light Design Rules 19 | 20 | - 自然的（natural） 21 | - 原子化（atomic） 22 | - 环保（economical） 23 | - 贴近现实（reality） 24 | - 友好的 25 | - 人格化（personality） 26 | - 符合习惯（conventional） 27 | - 尊重人的（respectful） 28 | - 美的 29 | - 富有创意（creative） 30 | - 简约的（zen） 31 | - 风格化（stylized） 32 | 33 | ![Light Design Rules](https://matrixage.github.io/img/projects/lightd/light_design_rules.jpg) 34 | 35 | ### Dev Route 36 | 37 | - Demo site made by Vuejs. 38 | - The number of components increased to 36+. 39 | - Components of React version. 40 | - Unit test for all components. 41 | - DSL of components which transforming a miniprogram component to Web Component / Vue Component / React Component 42 | 43 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "miniprogram/components/*" 4 | ], 5 | "version": "independent", 6 | "npmClient": "yarn", 7 | "useWorkspaces": true, 8 | "command": { 9 | "publish": { 10 | "ignoreChanges": [ 11 | "ignored-file" 12 | ] 13 | }, 14 | "bootstrap": { 15 | "npmClientArgs": [ 16 | "--no-package-lock" 17 | ] 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /miniprogram/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/Button/index", 5 | "pages/ActionSheet/index", 6 | "pages/Card/index", 7 | "pages/Dialog/index", 8 | "pages/DialogQueue/index", 9 | "pages/Landing/index", 10 | "pages/Loading/index", 11 | "pages/Modal/index", 12 | "pages/SnackBar/index", 13 | "pages/Ripple/index", 14 | "pages/Line/index", 15 | "pages/Toast/index", 16 | "pages/Popover/index", 17 | "pages/Sticky/index", 18 | "pages/Text/index", 19 | "pages/Icon/index", 20 | "pages/NoticeBar/index", 21 | "pages/Period/index", 22 | "pages/Tab/index" 23 | ], 24 | "window": { 25 | "backgroundTextStyle": "light", 26 | "navigationBarBackgroundColor": "#fff", 27 | "navigationBarTitleText": "Light Design", 28 | "navigationBarTextStyle": "black" 29 | }, 30 | "style": "v2", 31 | "sitemapLocation": "sitemap.json", 32 | "usingComponents": { 33 | "light-button": "components/Button/index", 34 | "light-action-sheet": "components/ActionSheet/index", 35 | "light-card": "components/Card/index", 36 | "light-dialog": "components/Dialog/index", 37 | "light-dialog-queue": "components/DialogQueue/index", 38 | "light-landing": "components/Landing/index", 39 | "light-loading": "components/Loading/index", 40 | "light-modal": "components/Modal/index", 41 | "light-snack-bar": "components/SnackBar/index", 42 | "light-ripple": "components/Ripple/index", 43 | "light-line": "components/Line/index", 44 | "light-toast": "components/Toast/index", 45 | "light-popover": "components/Popover/index", 46 | "light-sticky": "components/Sticky/index", 47 | "light-text": "components/Text/index", 48 | "light-icon": "components/Icon/index", 49 | "light-notice-bar": "components/NoticeBar/index", 50 | "light-period": "components/Period/index", 51 | "light-tab": "components/Tab/index", 52 | "light-tab-item": "components/Tab/TabItem/index", 53 | "tips": "page_components/_Tips/index" 54 | } 55 | } -------------------------------------------------------------------------------- /miniprogram/app.less: -------------------------------------------------------------------------------- 1 | @import './styles/atom-miniapp.min.wxss'; 2 | @import './styles/init.less'; 3 | @import './styles/vars.less'; 4 | 5 | page { 6 | background-color: var(--color_background); 7 | overflow-x: hidden; 8 | text-align: left; 9 | } 10 | 11 | .mini_items { 12 | display: flex; 13 | flex-direction: row; 14 | flex-wrap: wrap; 15 | border-top: 2rpx solid var(--color_border); 16 | 17 | &.no_border { 18 | border-top: none; 19 | } 20 | 21 | &.column_2 { 22 | .example_item { 23 | width: 100%/2; 24 | 25 | &:nth-of-type(2n) { 26 | border-right: none; 27 | } 28 | 29 | &:nth-of-type(3n) { 30 | border-right: 2rpx solid var(--color_border); 31 | } 32 | 33 | .examples { 34 | flex-direction: column; 35 | 36 | .example { 37 | align-items: center; 38 | } 39 | } 40 | } 41 | } 42 | 43 | &.visible_items { 44 | .example_item { 45 | flex-direction: row; 46 | justify-content: space-between; 47 | align-items: center; 48 | 49 | .title_wrap { 50 | margin-bottom: 0; 51 | } 52 | } 53 | } 54 | 55 | .example_item { 56 | width: 100%/3; 57 | padding: 60rpx 48rpx; 58 | border-right: 2rpx solid var(--color_border); 59 | 60 | &:nth-of-type(3n) { 61 | border-right: none; 62 | } 63 | 64 | &:last-child { 65 | border-bottom: 2rpx solid var(--color_border); 66 | } 67 | 68 | .title_wrap { 69 | flex-direction: column; 70 | 71 | .title { 72 | font-size: 24rpx; 73 | margin-bottom: 12rpx; 74 | } 75 | } 76 | 77 | .examples { 78 | height: 100%; 79 | 80 | .example { 81 | padding: 12rpx 0; 82 | } 83 | } 84 | } 85 | } 86 | 87 | .example_items { 88 | padding: 0; 89 | padding-bottom: calc(~'0px + 'env(safe-area-inset-bottom)); 90 | 91 | &.mini_items { 92 | .mini_items(); 93 | } 94 | 95 | .example_item { 96 | flex-direction: column; 97 | padding: 60rpx; 98 | background-color: var(--color_background); 99 | border-bottom: 2rpx solid var(--color_border); 100 | transition: all ease 0.3s; 101 | 102 | &:last-child { 103 | border-bottom: none; 104 | } 105 | 106 | .title_wrap { 107 | flex-direction: row; 108 | justify-content: space-between; 109 | width: 100%; 110 | margin-bottom: 36rpx; 111 | 112 | .title { 113 | font-weight: 500; 114 | line-height: 1; 115 | } 116 | 117 | .attr { 118 | font-size: 26rpx; 119 | line-height: 1; 120 | color: var(--color_text_desc); 121 | } 122 | } 123 | 124 | .examples { 125 | width: 100%; 126 | box-sizing: border-box; 127 | } 128 | } 129 | 130 | .mini_items { 131 | .mini_items(); 132 | } 133 | } -------------------------------------------------------------------------------- /miniprogram/app.ts: -------------------------------------------------------------------------------- 1 | App({ 2 | globalData: {}, 3 | onLaunch () {} 4 | }) 5 | -------------------------------------------------------------------------------- /miniprogram/components/ActionSheet/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/ActionSheet/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/actionsheet", 3 | "cname":"抽屉", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/ActionSheet", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Button/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /miniprogram/components/Button/index.ts: -------------------------------------------------------------------------------- 1 | Component( { 2 | options: { 3 | multipleSlots: true 4 | }, 5 | properties: { 6 | type: { 7 | type: String, 8 | value: 'default' 9 | } as { 10 | type: StringConstructor 11 | value: 12 | | 'default' 13 | | 'primary' 14 | | 'border' 15 | | 'dashed' 16 | | 'warning' 17 | | 'success' 18 | | 'error' 19 | }, 20 | size: { 21 | type: String, 22 | value: 'normal' 23 | } as { 24 | type: StringConstructor 25 | value: 'normal' | 'small' | 'large' 26 | }, 27 | shape: { 28 | type: String, 29 | value: 'normal' 30 | } as { 31 | type: StringConstructor 32 | value: 'normal' | 'circle' | 'rect' 33 | }, 34 | autoWidth: { 35 | type: Boolean, 36 | value: false 37 | }, 38 | width: { 39 | type: String, 40 | value: '' 41 | }, 42 | height: { 43 | type: String, 44 | value: '' 45 | }, 46 | color: { 47 | type: String, 48 | value: '' 49 | }, 50 | bgColor: { 51 | type: String, 52 | value: '' 53 | }, 54 | iconPath: { 55 | type: String, 56 | value: '' 57 | }, 58 | ghost: Boolean, 59 | disabled: Boolean, 60 | loading: Boolean 61 | } 62 | } ) 63 | -------------------------------------------------------------------------------- /miniprogram/components/Button/index.wxml: -------------------------------------------------------------------------------- 1 | 5 | 6 | -------------------------------------------------------------------------------- /miniprogram/components/Button/index.wxs: -------------------------------------------------------------------------------- 1 | function getClasses( props ) { 2 | var classes = '' 3 | 4 | if ( !props.autoWidth ) classes += ' mode_fixed' 5 | if ( props.autoWidth ) classes += ' mode_padding' 6 | if ( props.size ) classes += ' size_' + props.size 7 | if ( props.type ) classes += ' type_' + props.type 8 | if ( props.shape ) classes += ' shape_' + props.shape 9 | if ( props.ghost ) classes += ' ghost' 10 | if ( props.disabled ) classes += ' disabled' 11 | 12 | return classes 13 | } 14 | 15 | function getStyles( props ) { 16 | var styles = '' 17 | 18 | if ( props.width ) styles += ';width:' + props.width 19 | if ( props.height ) styles += ';height:' + props.height 20 | if ( props.color ) styles += ';color:' + props.color 21 | if ( props.bgColor ) styles += ';background:' + props.bgColor 22 | 23 | return styles 24 | } 25 | 26 | module.exports = { 27 | getClasses: getClasses, 28 | getStyles: getStyles 29 | } -------------------------------------------------------------------------------- /miniprogram/components/Button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/button", 3 | "cname":"按钮", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Button", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Card/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Card/index.less: -------------------------------------------------------------------------------- 1 | .init { 2 | color: black; 3 | font-size: 30rpx; 4 | line-height: 1.6; 5 | } 6 | 7 | .card_wrap { 8 | display: flex; 9 | overflow: hidden; 10 | box-sizing: border-box; 11 | width: 100%; 12 | border-radius: 0; 13 | background-color: white; 14 | transition: all ease 0.3s; 15 | 16 | .init(); 17 | 18 | &.bordered { 19 | border: 2rpx solid rgba(245, 245, 245, 0.72); 20 | } 21 | 22 | &.shadow { 23 | box-shadow: 0 0 30rpx rgba(238, 238, 238, 1); 24 | } 25 | 26 | .card { 27 | display: flex; 28 | flex-direction: column; 29 | width: 100%; 30 | } 31 | } -------------------------------------------------------------------------------- /miniprogram/components/Card/index.ts: -------------------------------------------------------------------------------- 1 | Component( { 2 | options: { 3 | multipleSlots: true 4 | }, 5 | properties: { 6 | width: String, 7 | padding: String, 8 | margin: String, 9 | radius: Number, 10 | fontSize: Number, 11 | color: String, 12 | bgColor: String, 13 | textAlign: String, 14 | bordered: Boolean, 15 | shadow: Boolean, 16 | style: String 17 | } 18 | } ) 19 | -------------------------------------------------------------------------------- /miniprogram/components/Card/index.wxml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /miniprogram/components/Card/index.wxs: -------------------------------------------------------------------------------- 1 | function getClasses( props ) { 2 | var classes = '' 3 | 4 | if ( props.bordered ) classes += ' bordered' 5 | if ( props.shadow ) classes += ' shadow' 6 | 7 | return classes 8 | } 9 | 10 | function getStyles( props ) { 11 | var styles = '' 12 | 13 | if ( props.width ) styles += ';width:' + props.width 14 | if ( props.padding ) styles += ';padding:' + props.padding 15 | if ( props.margin ) styles += ';margin:' + props.margin 16 | if ( props.radius ) styles += ';border-radius:' + props.radius + 'rpx' 17 | if ( props.fontSize ) styles += ';font-size:' + props.fontSize + 'rpx' 18 | if ( props.color ) styles += ';color:' + props.color 19 | if ( props.bgColor ) styles += ';background:' + props.bgColor 20 | if ( props.textAlign ) styles += ';text-align:' + props.textAlign 21 | 22 | return styles 23 | } 24 | 25 | module.exports = { 26 | getClasses: getClasses, 27 | getStyles: getStyles 28 | } -------------------------------------------------------------------------------- /miniprogram/components/Card/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/card", 3 | "cname":"卡片", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Card", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Card/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 卡片是UI的一个标准部分，她是获取更详细信息的入口点。卡片可以是一个单独的组件，但通常由一些标题、副标题和内容组成。 4 | 5 | 使用场景 6 | 11 | 12 | 13 | | 属性 | 说明 | 类型 | 默认值 | 必填 | 版本 | 14 | | - | - | - | - | - | - | 15 | | width | 宽度 | string | '100%' | 否 | 1.0.0 | 16 | | padding | 内边距 | string | '' | 否 | 1.0.0 | 17 | | margin | 外边距 | string | '' | 否 | 1.0.0 | 18 | | radius | 圆角 | number | 0 | 否 | 1.0.0 | 19 | | fontSize | 文字排版 | number | 30 | 否 | 1.0.0 | 20 | | color | 字体颜色 | string | 'black' | 否 | 1.0.0 | 21 | | bgColor | 背景颜色 | string | '' | 否 | 1.0.0 | 22 | | textAlign | 文字排版 | string | '' | 否 | 1.0.0 | 23 | | bordered | 边框 | boolean | false | 否 | 1.0.0 | 24 | | shadow | 阴影 | boolean | false | 否 | 1.0.0 | 25 | | style | 自定义样式 | string | '' | 否 | 1.0.0 | 26 | 27 | 默认效果 28 | 29 | ```html 30 | 37 | 南山经之首曰䧿山。其首曰招摇之山，临于西海之上，多桂，多金玉。有草焉，其状如韭而青华，其名曰祝馀，食之不饥。有木焉，其状如榖而黑理，其华四照。其名曰迷榖，佩之不迷。有兽焉，其状如禺而白耳，伏行人走，其名曰狌狌，食之善走。丽麂之水出焉，而西流注于海，其中多育沛，佩之无瘕疾。 38 | 39 | ``` 40 | 41 | 设置样式 42 | 43 | ```html 44 | 54 | 西山经华山之首，曰钱来之山，其上多松，其下多洗石。有兽焉，其状如羊而马尾，名曰羬羊，其脂可以已腊。 56 | 西四十五里，曰松果之山。濩水出焉，北流注于渭，其中多铜。有鸟焉，其名曰䳋渠，其状如山鸡，黑身赤足，可以已[月暴]。 58 | 又西六十里，曰太华之山，削成而四方，其高五千仞，其广十里，鸟兽莫居。有蛇焉，名曰肥（虫遗），六足四翼，见则天下大旱。 59 | 60 | ``` 61 | 62 | 悬浮阴影 63 | 64 | ```html 65 | 72 | 《中山经》薄山之首，曰甘枣之山。共水出焉，而西流注于河。其上多杻木，其下有草焉，葵本而杏叶，黄华而荚实，名曰箨，可以已懵。有兽焉，其状如囗鼠而文题，其名曰㔮，食之已瘿。 73 | 74 | ``` -------------------------------------------------------------------------------- /miniprogram/components/Dialog/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Dialog/index.wxml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 17 | 22 | 23 | 24 | 25 | 29 | {{title}} 33 | 37 | 38 | 39 | 40 | 44 | 45 | 49 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /miniprogram/components/Dialog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/dialog", 3 | "cname":"对话框", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Dialog", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/DialogQueue/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/DialogQueue/index.wxml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 12 | 16 | 17 | 25 | 29 | 30 | 38 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | {{_list[current].title?_list[current].title:''}} 50 | 51 | 58 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /miniprogram/components/DialogQueue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/dialogqueue", 3 | "cname":"对话框队列", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/DialogQueue", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/DialogQueue/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 对话框队列是并不是来自于对话框，原型来源于 Steam 客户端的首页“新闻”弹窗。她用于展示多个的媒体内容，通常是首页的优惠信息，以队列的方式而非多个弹窗的形式对用户更加友好。 4 | 5 | 使用场景 6 | 10 | 11 | 12 | | 属性 | 说明 | 类型 | 默认值 | 必填 | 版本 | 13 | | - | - | - | - | - | - | 14 | | visible | 是否可见 | boolean | false | 否 | 1.0.0 | 15 | | list | 数据项 | Array`` | [] | 是 | 1.0.0 | 16 | | zIndex | 层级 | number | 100 | 否 | 1.0.0 | 17 | 18 | types 19 | 20 | ```typescript 21 | type List = { 22 | rank:number 23 | title:string 24 | imgSrc: string 25 | target: string 26 | url: string 27 | appId: string 28 | version: string 29 | path: string 30 | daily: boolean 31 | durations: Array<{ 32 | startTime: string 33 | endTime: string 34 | }> 35 | } 36 | ``` 37 | 38 | list 39 | 40 | | 值 | 说明 | 版本 | 41 | | - | - | - | 42 | | rank | 排序值 | 1.0.0 | 43 | | title | 弹窗标题 | 1.0.0 | 44 | | imgSrc | 弹窗图片 | 1.0.0 | 45 | | target | 跳转类型 | 1.0.0 | 46 | | url | 跳转链接 | 1.0.0 | 47 | | appId | appId | 1.0.0 | 48 | | version | 版本 | 1.0.0 | 49 | | path | 路径 | 1.0.0 | 50 | | daily | 是否为每日弹窗 | 1.0.0 | 51 | | durations | 弹出时间 | 1.0.0 | 52 | 53 | > 当daily为true时，durations中startTime、endTime格式为18:00:00，当daily为false时，durations中startTime、endTime格式为2020/8/1 00:00:00 54 | 55 | 默认效果 56 | 57 | ```html 58 | 62 | ``` 63 | -------------------------------------------------------------------------------- /miniprogram/components/Icon/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Icon/index.less: -------------------------------------------------------------------------------- 1 | .icon_wrap { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | box-sizing: border-box; 6 | } 7 | 8 | .icon { 9 | display: inline-block; 10 | background: black; 11 | vertical-align: middle; 12 | 13 | mask-repeat: no-repeat; 14 | mask-size: cover; 15 | } -------------------------------------------------------------------------------- /miniprogram/components/Icon/index.ts: -------------------------------------------------------------------------------- 1 | Component( { 2 | options: { 3 | pureDataPattern: /^(type)$/ 4 | }, 5 | properties: { 6 | icon: { 7 | type: Object, 8 | value: {} 9 | } as { 10 | type: ObjectConstructor 11 | value: { outline: string; filled: string } 12 | }, 13 | type: { 14 | type: String, 15 | value: 'outline' 16 | } as { 17 | type: StringConstructor 18 | value: 'outline' | 'filled' 19 | }, 20 | size: { 21 | type: Number, 22 | value: 20 23 | }, 24 | color: { 25 | type: String, 26 | value: '#000000' 27 | }, 28 | visibleWrap: { 29 | type: Boolean, 30 | value: false 31 | }, 32 | bordered: { 33 | type: Boolean, 34 | value: false 35 | }, 36 | filled: { 37 | type: Boolean, 38 | value: false 39 | }, 40 | round: { 41 | type: Boolean, 42 | value: false 43 | }, 44 | borderColor: { 45 | type: String, 46 | value: 'whitesmoke' 47 | }, 48 | fillColor: { 49 | type: String, 50 | value: 'whitesmoke' 51 | } 52 | }, 53 | observers: { 54 | type ( v ) { 55 | this.getSrc( this.data.icon[ v ] ) 56 | }, 57 | icon ( v ) { 58 | if ( !v ) return 59 | if ( !this.data.type ) return 60 | 61 | this.getSrc( v[ this.data.type ] ) 62 | } 63 | }, 64 | data: { 65 | src: '', 66 | height: 20, 67 | width: 20 68 | }, 69 | methods: { 70 | getSrc ( svg: string ) { 71 | if ( !svg ) return 72 | 73 | this.setData( { 74 | src: 'data:image/svg+xml,' + svg.replace( //g, '%3E' ) 75 | } ) 76 | } 77 | } 78 | } ) 79 | -------------------------------------------------------------------------------- /miniprogram/components/Icon/index.wxml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 11 | 15 | 16 | -------------------------------------------------------------------------------- /miniprogram/components/Icon/index.wxs: -------------------------------------------------------------------------------- 1 | function getWrapStyles( props ) { 2 | var styles = '' 3 | 4 | if ( props.bordered ) styles += ';border:2rpx solid ' + props.borderColor 5 | if ( props.filled ) styles += ';background:' + props.fillColor 6 | if ( props.round ) styles += ';border-radius:50%' 7 | 8 | styles += ';width:' + props.size * 1.5 + 'px' 9 | styles += ';height:' + props.size * 1.5 + 'px' 10 | 11 | return styles 12 | } 13 | 14 | function getStyles( props ) { 15 | var styles = '' 16 | 17 | styles += ';width:' + props.size + 'px' 18 | styles += ';height:' + props.size + 'px' 19 | styles += ';background:' + props.color 20 | styles += ';mask-image:url("' + props.src + '")' 21 | styles += ';-webkit-mask-image:url("' + props.src + '")' 22 | 23 | return styles 24 | } 25 | 26 | module.exports = { 27 | getWrapStyles: getWrapStyles, 28 | getStyles: getStyles 29 | } -------------------------------------------------------------------------------- /miniprogram/components/Icon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/icon", 3 | "cname":"图标", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Icon", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Icon/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 图标是对事物的一种抽象，用于对用户进行信息暗示，通过颜色和大小变化，对人的注意力进行不同程度的影响。图标在现代UI设计种是一种十分好用的元素。 4 | 5 | 使用场景 6 |
    7 |
  • 配合按钮和表单项使用。
    • 8 |
  • 配合菜单项目，对菜单内容进行暗示。
    • 9 |
  • 作为超链接使用。
    • 10 |
11 | 12 | 13 | | 属性 | 说明 | 类型 | 默认值 | 必填 | 版本 | 14 | | - | - | - | - | - | - | 15 | | icon | 图标 | Icon | {} | 是 | 1.0.0 | 16 | | type | 样式 | 'outline' or 'filled' | 'outline' | 否 | 1.0.0 | 17 | | size | 大小 | number | 20 | 否 | 1.0.0 | 18 | | color | 颜色 | string | '#000000' | 否 | 1.0.0 | 19 | | visibleWrap | 包裹 | boolean | false | 否 | 1.0.0 | 20 | | bordered | 边框 | boolean | false | 否 | 1.0.0 | 21 | | filled | 填充 | boolean | false | 否 | 1.0.0 | 22 | | round | 圆形 | boolean | false | 否 | 1.0.0 | 23 | | borderColor | 边框颜色 | string | 'whitesmoke' | 否 | 1.0.0 | 24 | | fillColor | 填充颜色 | string | 'whitesmoke' | 否 | 1.0.0 | 25 | 26 | 默认效果 27 | 28 | ```html 29 | 34 | ``` 35 | 36 | 样式 37 | 38 | ```html 39 | 45 | ``` 46 | 47 | 颜色 48 | 49 | ```html 50 | 56 | ``` 57 | 58 | 渐变色 59 | 60 | ```html 61 | 67 | ``` 68 | 69 | 大小 70 | 71 | ```html 72 | 78 | ``` 79 | 80 | 包裹 81 | 82 | ```html 83 | 91 | ``` 92 | 93 | 包裹样式 94 | 95 | ```html 96 | 106 | ``` -------------------------------------------------------------------------------- /miniprogram/components/Icon/rest/icon_types.ts: -------------------------------------------------------------------------------- 1 | export type Icon = 2 | | '' 3 | | 'add' 4 | | 'remove' 5 | | 'reload' 6 | | 'resize' 7 | | 'blockUp' 8 | | 'blockDown' 9 | | 'blockLeft' 10 | | 'blockRight' 11 | | 'arrowUp' 12 | | 'arrowDown' 13 | | 'arrowLeft' 14 | | 'arrowRight' 15 | | 'lineUp' 16 | | 'lineDown' 17 | | 'lineLeft' 18 | | 'lineRight' 19 | | 'alert' 20 | | 'close' 21 | | 'check' 22 | | 'sync' 23 | | 'arrowUpDown' 24 | | 'arrowLeftRight' 25 | | 'help' 26 | | 'ellipsisVert' 27 | | 'ellipsisHorizon' 28 | | 'toggle' 29 | | 'tag' 30 | | 'eye' 31 | | 'eyeOff' 32 | | 'doc' 33 | | 'cube' 34 | | 'create' 35 | | 'closeCircle' 36 | | 'checkCircle' 37 | | 'chat' 38 | | 'cart' 39 | | 'card' 40 | | 'camera' 41 | | 'call' 42 | | 'calendar' 43 | | 'location' 44 | | 'build' 45 | | 'book' 46 | | 'chart' 47 | | 'bag' 48 | | 'apps' 49 | | 'alarm' 50 | | 'circles' 51 | | 'ticket' 52 | | 'warning' 53 | | 'wallet' 54 | | 'unlink' 55 | | 'trash' 56 | | 'clock' 57 | | 'thumbUp' 58 | | 'thumbDown' 59 | | 'store' 60 | | 'star' 61 | | 'square' 62 | | 'share' 63 | | 'settings' 64 | | 'search' 65 | | 'save' 66 | | 'ribbon' 67 | | 'reader' 68 | | 'qrcode' 69 | | 'person' 70 | | 'options' 71 | | 'notification' 72 | | 'notificationOff' 73 | | 'navigate' 74 | | 'music' 75 | | 'mic' 76 | | 'micOff' 77 | | 'menu' 78 | | 'mail' 79 | | 'lockOpen' 80 | | 'lock' 81 | | 'locate' 82 | | 'list' 83 | | 'helpCircle' 84 | | 'heart' 85 | | 'headset' 86 | | 'happy' 87 | | 'grid' 88 | | 'gift' 89 | | 'game' 90 | | 'filter' 91 | | 'glag' 92 | | 'film' 93 | | 'woman' 94 | | 'man' 95 | | 'male' 96 | | 'female' 97 | | 'circle' 98 | | 'bluetooth' 99 | 100 | export type Data = Record 101 | -------------------------------------------------------------------------------- /miniprogram/components/Landing/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Landing/index.less: -------------------------------------------------------------------------------- 1 | @bg_color_landing: rgba(0, 0, 0, 0.9); 2 | @img_landing: url('data:image/svg+xml;base64,PHN2ZyBpZD0i57uEXzEiIGRhdGEtbmFtZT0i57uEIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQwMCIgaGVpZ2h0PSI0MDAiIHZpZXdCb3g9IjAgMCA0MDAgNDAwIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxyZWN0IGlkPSLlm77lsYJfMV/mi7fotJ0iIGRhdGEtbmFtZT0i5Zu+5bGCIDEg5ou36LSdIiBjbGFzcz0iY2xzLTEiIHg9Ii0xOTAiIHk9Ii0xOTAiIHdpZHRoPSI3ODAiIGhlaWdodD0iNzgwIi8+CiAgPHJlY3QgaWQ9IuefqeW9ol8xX+aLt+i0nV8yIiBkYXRhLW5hbWU9IuefqeW9oiAxIOaLt+i0nSAyIiBjbGFzcz0iY2xzLTIiIHg9IjgiIHk9IjgiIHdpZHRoPSIzODQiIGhlaWdodD0iMTkyIi8+CiAgPHJlY3QgaWQ9IuefqeW9ol8xIiBkYXRhLW5hbWU9IuefqeW9oiAxIiBjbGFzcz0iY2xzLTIiIHg9IjgiIHk9IjgiIHdpZHRoPSIxOTIiIGhlaWdodD0iMzg0Ii8+Cjwvc3ZnPgo='); 3 | 4 | @keyframes light { 5 | from { 6 | clip: rect(60rpx 60rpx 60rpx 0); 7 | } 8 | 9 | to { 10 | clip: rect(0 60rpx 60rpx 0); 11 | } 12 | } 13 | 14 | .landing_wrap { 15 | position: fixed; 16 | top: 0; 17 | left: 0; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | width: 100vw; 22 | height: 100vh; 23 | 24 | .landing { 25 | position: relative; 26 | display: flex; 27 | align-items: center; 28 | flex-direction: column; 29 | justify-content: center; 30 | width: 180rpx; 31 | height: 180rpx; 32 | border-radius: 24rpx; 33 | background-color: @bg_color_landing; 34 | 35 | .icon { 36 | width: 60rpx; 37 | height: 60rpx; 38 | } 39 | 40 | .icon_source { 41 | width: 60rpx; 42 | height: 60rpx; 43 | background-image: @img_landing; 44 | background-size: 100% 100%; 45 | transform-origin: center bottom; 46 | } 47 | 48 | .icon_source_bottom { 49 | position: absolute; 50 | opacity: 0.3; 51 | } 52 | 53 | .icon_source_top { 54 | position: absolute; 55 | animation: light 1s infinite; 56 | } 57 | } 58 | } -------------------------------------------------------------------------------- /miniprogram/components/Landing/index.ts: -------------------------------------------------------------------------------- 1 | Component( { 2 | options: { 3 | pureDataPattern: /^(visible|delay|timeout|timer_show|timer_hide)$/ 4 | }, 5 | properties: { 6 | visible: { 7 | type: Boolean, 8 | value: false 9 | }, 10 | zIndex: { 11 | type: Number, 12 | value: 100 13 | }, 14 | maskVisible: { 15 | type: Boolean, 16 | value: false 17 | }, 18 | maskColor: { 19 | type: String, 20 | value: 'white' 21 | }, 22 | delay: { 23 | type: Number, 24 | value: 0 25 | }, 26 | timeout: { 27 | type: Number, 28 | value: 0 29 | } 30 | }, 31 | data: { 32 | _visible: false, 33 | timer_show: 0, 34 | timer_hide: 0 35 | }, 36 | observers: { 37 | visible ( new_val ) { 38 | const _that = this 39 | const { delay, timeout, timer_show, timer_hide } = _that.data 40 | 41 | clearTimeout( timer_show ) 42 | clearTimeout( timer_hide ) 43 | 44 | if ( new_val ) { 45 | const timer_show = setTimeout( () => { 46 | _that.setData( { _visible: true } ) 47 | }, delay ) 48 | 49 | _that.setData( { timer_show } ) 50 | } else { 51 | const timer_hide = setTimeout( () => { 52 | _that.setData( { _visible: false } ) 53 | }, timeout ) 54 | 55 | _that.setData( { timer_hide } ) 56 | } 57 | } 58 | }, 59 | methods: { 60 | catchtouchmove () { }, 61 | onShow () { 62 | const _that = this 63 | 64 | _that.setData( { visible: true } ) 65 | 66 | _that.triggerEvent( 'onShow' ) 67 | }, 68 | onClose () { 69 | const _that = this 70 | 71 | _that.setData( { visible: false } ) 72 | 73 | _that.triggerEvent( 'onClose' ) 74 | } 75 | } 76 | } ) 77 | -------------------------------------------------------------------------------- /miniprogram/components/Landing/index.wxml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /miniprogram/components/Landing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/landing", 3 | "cname":"页面加载", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Landing", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Landing/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 页面加载的作用相当于一个落地页，避免应用在加载数据和渲染的过程中出现肉眼可见的闪烁，排版错乱。通过将品牌 Logo 设定为 Landing 的展示内容，加强用户对品牌的认知。 4 | 5 | 使用场景 6 |
    7 |
  • 用户访问应用首页时。
    • 8 |
  • 切换到新的页面数据还未加载完成时，用以代替占位符。
    • 9 |
10 | 11 | 12 | | 属性 | 说明 | 类型 | 默认值 | 必填 | 版本 | 13 | | - | - | - | - | - | - | 14 | | visible | 是否可见 | boolean | false | 是 | 1.0.0 | 15 | | zIndex | 层级 | number | 100 | 否 | 1.0.0 | 16 | | maskVisible | 遮罩是否可见 | boolean | false | 否 | 1.0.0 | 17 | | maskColor | 遮罩颜色 | string | 'white' | 否 | 1.0.0 | 18 | | delay | 延迟显示时间 | number | 0 | 否 | 1.0.0 | 19 | | timeout | 延迟关闭时间 | number | 0 | 否 | 1.0.0 | 20 | 21 | 默认效果 22 | 23 | ```html 24 | 25 | ``` 26 | 27 | 显示遮罩 28 | 29 | ```html 30 | 34 | ``` 35 | 36 | 遮罩颜色 37 | 38 | ```html 39 | 44 | ``` -------------------------------------------------------------------------------- /miniprogram/components/Line/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Line/index.less: -------------------------------------------------------------------------------- 1 | .init { 2 | color: black; 3 | font-size: 30rpx; 4 | line-height: 1.6; 5 | } 6 | 7 | .line_wrap { 8 | .init (); 9 | 10 | &.thin { 11 | transform: scaleY(0.5); 12 | } 13 | 14 | &.box { 15 | position: relative; 16 | display: flex; 17 | box-sizing: border-box; 18 | 19 | &.thin { 20 | transform: scaleY(1); 21 | } 22 | } 23 | 24 | .box { 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | display: flex; 29 | box-sizing: border-box; 30 | width: 100%; 31 | height: 100%; 32 | 33 | &.thin { 34 | width: 200%; 35 | height: 200%; 36 | transform: scale(0.5); 37 | transform-origin: left top; 38 | } 39 | } 40 | 41 | } -------------------------------------------------------------------------------- /miniprogram/components/Line/index.ts: -------------------------------------------------------------------------------- 1 | Component( { 2 | properties: { 3 | width: { 4 | type: String, 5 | value: '100%' 6 | }, 7 | height: { 8 | type: String, 9 | value: '2rpx' 10 | }, 11 | radius: { 12 | type: Number, 13 | value: 0 14 | }, 15 | color: { 16 | type: String, 17 | value: 'black' 18 | }, 19 | thin: { 20 | type: Boolean, 21 | value: false 22 | }, 23 | box: { 24 | type: Boolean, 25 | value: false 26 | }, 27 | borderSize: { 28 | type: Number, 29 | value: 2 30 | }, 31 | } 32 | } ) 33 | -------------------------------------------------------------------------------- /miniprogram/components/Line/index.wxml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /miniprogram/components/Line/index.wxs: -------------------------------------------------------------------------------- 1 | function getClasses( props ) { 2 | var classes = '' 3 | 4 | if ( props.thin ) classes += ' thin' 5 | if ( props.box ) classes += ' box' 6 | 7 | return classes 8 | } 9 | 10 | function getStyles( props ) { 11 | var styles = '' 12 | 13 | if ( props.box ) { 14 | styles += ';width:auto' 15 | styles += ';height:auto' 16 | styles += ';background-color:transparent' 17 | } else { 18 | if ( props.width ) styles += ';width:' + props.width 19 | if ( props.height ) styles += ';height:' + props.height 20 | if ( props.color ) styles += ';background-color:' + props.color 21 | } 22 | 23 | styles += ';border-radius:' + props.radius + 'rpx' 24 | 25 | return styles 26 | } 27 | 28 | function getContentStyles( props ) { 29 | var styles = '' 30 | 31 | styles += ';border:' + props.borderSize + 'rpx solid ' + props.color 32 | styles += ';border-radius:' + props.radius * ( props.thin ? 2 : 1 ) + 'rpx' 33 | 34 | return styles 35 | } 36 | 37 | module.exports = { 38 | getClasses: getClasses, 39 | getStyles: getStyles, 40 | getContentStyles: getContentStyles 41 | } -------------------------------------------------------------------------------- /miniprogram/components/Line/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/line", 3 | "cname":"线条", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Line", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Line/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 线条是原子化的元素，可用来包裹其他任何类型的子元素，且能够单独使用。 4 | 5 | 使用场景 6 |
    7 |
  • 需要设定0.5px线条时。
    • 8 |
  • 包裹内容，以代替 border。
    • 9 |
10 | 11 | 12 | | 属性 | 说明 | 类型 | 默认值 | 必填 | 版本 | 13 | | - | - | - | - | - | - | 14 | | width | 宽度 | string | '100%' | 否 | 1.0.0 | 15 | | height | 高度 | string | '2rpx' | 否 | 1.0.0 | 16 | | radius | 圆角 | number | 0 | 否 | 1.0.0 | 17 | | color | 颜色 | string | 'black' | 否 | 1.0.0 | 18 | | thin | 0.5px边界 | boolean | false | 否 | 1.0.0 | 19 | | box | 包裹对象 | boolean | false | 否 | 1.0.0 | 20 | | borderSize | 边界大小 | number | 2 | 否 | 1.0.0 | 21 | 22 | 默认效果 23 | 24 | ```html 25 | 26 | ``` 27 | 28 | 设定宽度 29 | 30 | ```html 31 | 32 | ``` 33 | 34 | 设定高度 35 | 36 | ```html 37 | 38 | ``` 39 | 40 | 0.5px线条 41 | 42 | ```html 43 | 44 | ``` 45 | 46 | 设定圆角 47 | 48 | ```html 49 | 53 | ``` 54 | 55 | 配合使用 56 | 57 | ```html 58 | 65 | 66 | 67 | ``` 68 | 69 | 包裹对象 70 | 71 | ```html 72 | 76 | 80 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 81 | incididunt 82 | ut labore et dolore magna aliqua. 83 | 84 | 85 | ``` 86 | 87 | 0.5px边界 88 | 89 | ```html 90 | 95 | 99 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 100 | incididunt 101 | ut labore et dolore magna aliqua. 102 | 103 | 104 | ``` 105 | 106 | 边界颜色 107 | 108 | ```html 109 | 114 | 118 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 119 | incididunt 120 | ut labore et dolore magna aliqua. 121 | 122 | 123 | ``` 124 | -------------------------------------------------------------------------------- /miniprogram/components/Loading/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Loading/index.less: -------------------------------------------------------------------------------- 1 | @import './style/refresh.wxss'; 2 | @import './style/loading.wxss'; 3 | 4 | .loading_wrap { 5 | display: flex; 6 | align-items: center; 7 | flex-direction: column; 8 | 9 | .text { 10 | margin-top: 20rpx; 11 | color: black; 12 | font-size: 24rpx; 13 | } 14 | } -------------------------------------------------------------------------------- /miniprogram/components/Loading/index.ts: -------------------------------------------------------------------------------- 1 | Component( { 2 | options: { 3 | pureDataPattern: /^(visible|delay|timeout|timer_show|timer_hide)$/ 4 | }, 5 | properties: { 6 | visible: { 7 | type: Boolean, 8 | value: false 9 | }, 10 | type: { 11 | type: String, 12 | value: 'refresh' 13 | } as { 14 | type: StringConstructor 15 | value: 'refresh' | 'loading' 16 | }, 17 | size: { 18 | type: Number, 19 | value: 1 20 | }, 21 | text: { 22 | type: String, 23 | value: '' 24 | }, 25 | delay: { 26 | type: Number, 27 | value: 0 28 | }, 29 | timeout: { 30 | type: Number, 31 | value: 0 32 | } 33 | }, 34 | data: { 35 | _visible: false, 36 | timer_show: 0, 37 | timer_hide: 0 38 | }, 39 | observers: { 40 | visible ( new_val ) { 41 | const _that = this 42 | const { delay, timeout, timer_show, timer_hide } = _that.data 43 | 44 | clearTimeout( timer_show ) 45 | clearTimeout( timer_hide ) 46 | 47 | if ( new_val ) { 48 | const timer_show = setTimeout( () => { 49 | _that.setData( { _visible: true } ) 50 | }, delay ) 51 | 52 | _that.setData( { timer_show } ) 53 | } else { 54 | const timer_hide = setTimeout( () => { 55 | _that.setData( { _visible: false } ) 56 | }, timeout ) 57 | 58 | _that.setData( { timer_hide } ) 59 | } 60 | } 61 | }, 62 | methods: { 63 | onShow () { 64 | const _that = this 65 | 66 | _that.setData( { visible: true } ) 67 | 68 | _that.triggerEvent( 'onShow' ) 69 | }, 70 | onClose () { 71 | const _that = this 72 | 73 | _that.setData( { visible: false } ) 74 | 75 | _that.triggerEvent( 'onClose' ) 76 | } 77 | } 78 | } ) 79 | -------------------------------------------------------------------------------- /miniprogram/components/Loading/index.wxml: -------------------------------------------------------------------------------- 1 | 6 | 7 | {{text}} 11 | -------------------------------------------------------------------------------- /miniprogram/components/Loading/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/loading", 3 | "cname":"加载中", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Loading", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Loading/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 加载中用来表示数据加载状态，主要用来缓解用户焦虑，她时连续性设计的一部分。 4 | 5 | 使用场景 6 |
    7 |
  • 配合按钮进行使用。
    • 8 |
  • 当加载列表数据项时。
    • 9 |
10 | 11 | 12 | | 属性 | 说明 | 类型 | 默认值 | 必填 | 版本 | 13 | | - | - | - | - | - | - | 14 | | visible | 是否可见 | boolean | false | 否 | 1.0.0 | 15 | | type | 类型 | 'refresh' or 'loading' | 'refresh' | 否 | 1.0.0 | 16 | | size | 大小 | number | 1 | 否 | 1.0.0 | 17 | | text | 文字 | string | '' | 否 | 1.0.0 | 18 | | delay | 延迟显示时间 | number | 0 | 否 | 1.0.0 | 19 | | timeout | 延迟关闭时间 | number | 0 | 否 | 1.0.0 | 20 | 21 | 默认效果 22 | 23 | ```html 24 | 28 | ``` 29 | 30 | 加载中 31 | 32 | ```html 33 | 37 | ``` -------------------------------------------------------------------------------- /miniprogram/components/Loading/style/loading.less: -------------------------------------------------------------------------------- 1 | @color: black; 2 | @color_bg: whitesmoke; 3 | @size: 16rpx; 4 | 5 | @keyframes loading_loading { 6 | 0% { 7 | background: fade(@color, 10); 8 | } 9 | 10 | 20% { 11 | background: fade(@color, 100); 12 | } 13 | 14 | 60% { 15 | background: fade(@color, 10); 16 | } 17 | } 18 | 19 | .loading_loading:not(:required) { 20 | position: relative; 21 | display: inline-block; 22 | width: @size; 23 | height: @size; 24 | border-radius: 50%; 25 | background: @color_bg; 26 | text-indent: -9999px; 27 | animation: loading_loading 2000ms 300ms infinite ease-out; 28 | } 29 | 30 | .loading_loading:not(:required):before, 31 | .loading_loading:not(:required):after { 32 | position: absolute; 33 | top: 0; 34 | display: inline-block; 35 | width: @size; 36 | height: @size; 37 | border-radius: 50%; 38 | background: @color_bg; 39 | content: ''; 40 | } 41 | 42 | .loading_loading:not(:required):before { 43 | left: -@size*2; 44 | animation: loading_loading 2000ms 150ms infinite ease-out; 45 | } 46 | 47 | .loading_loading:not(:required):after { 48 | right: -@size*2; 49 | animation: loading_loading 2000ms 450ms infinite ease-out; 50 | } -------------------------------------------------------------------------------- /miniprogram/components/Loading/style/loading.wxss: -------------------------------------------------------------------------------- 1 | @keyframes loading_loading { 2 | 0% { 3 | background: rgba(0, 0, 0, 0.1); 4 | } 5 | 6 | 20% { 7 | background: rgba(0, 0, 0, 1.0); 8 | } 9 | 10 | 60% { 11 | background: rgba(18, 18, 18, 0.1); 12 | } 13 | } 14 | 15 | .loading_loading:not(:required) { 16 | position: relative; 17 | display: inline-block; 18 | width: 16rpx; 19 | height: 16rpx; 20 | border-radius: 50%; 21 | background: whitesmoke; 22 | text-indent: -9999px; 23 | animation: loading_loading 2000ms 300ms infinite ease-out; 24 | } 25 | 26 | .loading_loading:not(:required):before, 27 | .loading_loading:not(:required):after { 28 | position: absolute; 29 | top: 0; 30 | display: inline-block; 31 | width: 16rpx; 32 | height: 16rpx; 33 | border-radius: 50%; 34 | background: whitesmoke; 35 | content: ''; 36 | } 37 | 38 | .loading_loading:not(:required):before { 39 | left: -32rpx; 40 | animation: loading_loading 2000ms 150ms infinite ease-out; 41 | } 42 | 43 | .loading_loading:not(:required):after { 44 | right: -32rpx; 45 | animation: loading_loading 2000ms 450ms infinite ease-out; 46 | } -------------------------------------------------------------------------------- /miniprogram/components/Loading/style/refresh.less: -------------------------------------------------------------------------------- 1 | @color: fade(black, 100); 2 | 3 | @keyframes loading_refresh { 4 | 0% { 5 | transform: rotate(0deg); 6 | } 7 | 8 | 100% { 9 | transform: rotate(360deg); 10 | } 11 | } 12 | 13 | .loading_refresh:not(:required) { 14 | display: inline-block; 15 | width: 48rpx; 16 | height: 48rpx; 17 | border: 8rpx solid @color; 18 | border-left-color: transparent; 19 | border-radius: 50%; 20 | color: transparent; 21 | text-indent: 100%; 22 | line-height: 1.2; 23 | animation: loading_refresh 1000ms infinite linear; 24 | } -------------------------------------------------------------------------------- /miniprogram/components/Loading/style/refresh.wxss: -------------------------------------------------------------------------------- 1 | @keyframes loading_refresh { 2 | 0% { 3 | transform: rotate(0deg); 4 | } 5 | 6 | 100% { 7 | transform: rotate(360deg); 8 | } 9 | } 10 | 11 | .loading_refresh:not(:required) { 12 | display: inline-block; 13 | width: 48rpx; 14 | height: 48rpx; 15 | border: 8rpx solid rgba(0, 0, 0, 1.0); 16 | border-left-color: transparent; 17 | border-radius: 50%; 18 | color: transparent; 19 | text-indent: 100%; 20 | line-height: 1.2; 21 | animation: loading_refresh 1000ms infinite linear; 22 | } -------------------------------------------------------------------------------- /miniprogram/components/Modal/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Modal/index.less: -------------------------------------------------------------------------------- 1 | .init { 2 | color: black; 3 | font-size: 30rpx; 4 | line-height: 1.6; 5 | } 6 | 7 | .fixed_dialog_wrap { 8 | position: fixed; 9 | top: 0; 10 | left: 0; 11 | width: 100vw; 12 | height: 100vh; 13 | 14 | .init(); 15 | 16 | .dialog_wrap { 17 | position: relative; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | width: 100%; 22 | height: 100%; 23 | 24 | .mask { 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 100%; 30 | transition: all ease 0.3s; 31 | } 32 | 33 | .dialog { 34 | display: flex; 35 | transition: all ease 0.3s; 36 | 37 | &.top { 38 | position: absolute; 39 | top: 0; 40 | } 41 | 42 | &.bottom { 43 | position: absolute; 44 | bottom: 0; 45 | padding-bottom: env(safe-area-inset-bottom); 46 | } 47 | 48 | &.left { 49 | position: absolute; 50 | left: 0; 51 | } 52 | 53 | &.right { 54 | position: absolute; 55 | right: 0; 56 | } 57 | } 58 | } 59 | } -------------------------------------------------------------------------------- /miniprogram/components/Modal/index.wxml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /miniprogram/components/Modal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/modal", 3 | "cname":"弹层", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Modal", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Modal/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 加载中用来表示数据加载状态，对页面的不同内容之间进行过渡，她是连续性设计的一部分。 4 | 5 | 使用场景 6 |
    7 |
  • 配合按钮进行使用。
    • 8 |
  • 当加载列表数据项时。
    • 9 |
10 | 11 | 12 | | 属性 | 说明 | 类型 | 默认值 | 必填 | 版本 | 13 | | - | - | - | - | - | - | 14 | | visible | 是否可见 | boolean | false | 否 | 1.0.0 | 15 | | position | 弹出位置 | enum_position | false | 否 | 1.0.0 | 16 | | zIndex | 层级 | number | 100 | 否 | 1.0.0 | 17 | | duration | 过渡时间 | number | 300 | 否 | 1.0.0 | 18 | | maskVisible | 遮罩是否可见 | boolean | true | 否 | 1.0.0 | 19 | | maskClosable | 点击遮罩关闭 | boolean | true | 否 | 1.0.0 | 20 | 21 | types 22 | 23 | ```typescript 24 | type enum_position = 'center' | 'top' | 'bottom' | 'left' | 'right' 25 | ``` 26 | 27 | triggerEvents 28 | 29 | ```typescript 30 | // 展示时触发 31 | onShow:()=>void 32 | 33 | // 隐藏时触发 34 | onClose:()=>void 35 | 36 | ``` 37 | 38 | 默认效果 39 | 40 | ```html 41 | 42 | 居中显示的内容 43 | 44 | ``` 45 | 46 | 顶部弹出 47 | 48 | ```html 49 | 53 | 居中显示的内容 54 | 55 | ``` 56 | 57 | 底部弹出 58 | 59 | ```html 60 | 64 | 居中显示的内容 65 | 66 | ``` 67 | 68 | 左侧弹出 69 | 70 | ```html 71 | 75 | 居中显示的内容 76 | 77 | ``` 78 | 79 | 右侧弹出 80 | 81 | ```html 82 | 86 | 居中显示的内容 87 | 88 | ``` 89 | 90 | 没有遮罩 91 | 92 | ```html 93 | 97 | 居中显示的内容 98 | 99 | ``` 100 | 101 | 蒙层关闭 102 | 103 | ```html 104 | 108 | 居中显示的内容 109 | 110 | ``` -------------------------------------------------------------------------------- /miniprogram/components/NoticeBar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/NoticeBar/index.less: -------------------------------------------------------------------------------- 1 | @height: 60rpx; 2 | 3 | .notice_wrap { 4 | display: flex; 5 | align-items: center; 6 | box-sizing: border-box; 7 | padding: 0 12rpx; 8 | width: 100%; 9 | 10 | .left_wrap { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | width: 60rpx; 15 | 16 | .icon_notice { 17 | width: 40rpx; 18 | height: 40rpx; 19 | } 20 | } 21 | 22 | .content { 23 | box-sizing: border-box; 24 | padding: 0 8rpx; 25 | width: calc(~'100% - 60rpx - 40rpx'); 26 | 27 | .swiper { 28 | height: @height; 29 | 30 | &.horizontal { 31 | .swiper_item { 32 | .item { 33 | display: inline; 34 | overflow: visible; 35 | box-sizing: border-box; 36 | padding-left: 24rpx; 37 | width: auto; 38 | 39 | &:nth-of-type(1){ 40 | padding-left: 0; 41 | } 42 | } 43 | } 44 | } 45 | 46 | .swiper_item { 47 | width: 100%; 48 | height: 100%; 49 | 50 | .item { 51 | display: -webkit-box; 52 | overflow: hidden; 53 | -webkit-box-orient: vertical; 54 | width: 100%; 55 | height: @height; 56 | font-size: 24rpx; 57 | line-height: @height; 58 | 59 | -webkit-line-clamp: 1; 60 | } 61 | } 62 | } 63 | } 64 | 65 | .right_wrap { 66 | display: flex; 67 | align-items: center; 68 | justify-content: flex-end; 69 | width: 40rpx; 70 | 71 | .icon_right { 72 | width: 32rpx; 73 | height: 32rpx; 74 | opacity: 0.6; 75 | } 76 | } 77 | } -------------------------------------------------------------------------------- /miniprogram/components/NoticeBar/index.ts: -------------------------------------------------------------------------------- 1 | import icons from './rest/icons' 2 | 3 | Component( { 4 | properties: { 5 | list: { 6 | type: Array, 7 | value: [] 8 | } as { 9 | type: ArrayConstructor 10 | value: Array 11 | }, 12 | horizontal: { 13 | type: Boolean, 14 | value: false 15 | }, 16 | color: { 17 | type: String, 18 | value: 'black' 19 | }, 20 | bgColor: { 21 | type: String, 22 | value: 'whitesmoke' 23 | }, 24 | styles: { 25 | type: String, 26 | value: '' 27 | }, 28 | interval: { 29 | type: Number, 30 | value: 3000 31 | } 32 | }, 33 | data: { 34 | icon_notice: `"data:image/svg+xml,${ icons.iconNotice 35 | .replace( //g, '%3E' ) }"`, 37 | icon_right: `"data:image/svg+xml,${ icons.iconRight 38 | .replace( //g, '%3E' ) }"` 40 | }, 41 | methods: { 42 | catchtouchmove () { }, 43 | onDetail ( { mark: { index } } ) { 44 | if ( index === undefined ) return 45 | 46 | this.triggerEvent( 'onDetail', { index } ) 47 | }, 48 | onMore () { 49 | this.triggerEvent( 'onMore' ) 50 | } 51 | } 52 | } ) 53 | -------------------------------------------------------------------------------- /miniprogram/components/NoticeBar/index.wxml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | 15 | 16 | 20 | 29 | 33 | 38 | {{item}} 44 | 45 | 46 | 47 | 48 | 52 | 56 | 57 | -------------------------------------------------------------------------------- /miniprogram/components/NoticeBar/index.wxs: -------------------------------------------------------------------------------- 1 | function getStyles( props ) { 2 | var styles = '' 3 | 4 | if ( props.color ) styles += ';color:' + props.color 5 | if ( props.bgColor ) styles += ';background:' + props.bgColor 6 | 7 | return styles 8 | } 9 | 10 | module.exports = { 11 | getStyles: getStyles 12 | } -------------------------------------------------------------------------------- /miniprogram/components/NoticeBar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/noticebar", 3 | "cname":"提示栏", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/NoticeBar", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/NoticeBar/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 公告栏的灵感来源于现实世界的文字滚动LED屏幕，她是公告中心的功能延伸。 4 | 5 | 使用场景 6 |
    7 |
  • 在应用首页展示滚动新闻。
    • 8 |
  • 作为悬浮栏固定在页面顶部，展示公告信息。
    • 9 |
10 | 11 | 12 | | 属性 | 说明 | 类型 | 默认值 | 必填 | 版本 | 13 | | - | - | - | - | - | - | 14 | | list | 数据项 | boolean | false | 否 | 1.0.0 | 15 | | horizontal | 横向滚动 | boolean | false | 否 | 1.0.0 | 16 | | color | 颜色 | string | 'black' | 否 | 1.0.0 | 17 | | bgColor | 背景 | string | 'whitesmoke' | 否 | 1.0.0 | 18 | | styles | 自定义样式 | string | '' | 否 | 1.0.0 | 19 | | interval | 时间间隔 | number | 3000 | 否 | 1.0.0 | 20 | | duration | 时间间隔 | number | 3000 | 否 | 1.0.0 | 21 | 22 | triggerEvents 23 | 24 | ```typescript 25 | // 点击滚动项时触发 26 | onDetail:( 27 | { 28 | detail: { 29 | index 30 | }:{ 31 | index：number 32 | } 33 | } 34 | )=>void 35 | 36 | // 点击更多时触发 37 | onMore:()=>void 38 | ``` 39 | 40 | 默认效果 41 | 42 | ```html 43 | 44 | ``` 45 | 46 | 横向滚动 47 | 48 | ```html 49 | 54 | ``` 55 | 56 | 颜色 57 | 58 | ```html 59 | 64 | ``` 65 | 66 | 背景 67 | 68 | ```html 69 | 74 | ``` 75 | 76 | 时间间隔 77 | 78 | ```html 79 | 83 | ``` 84 | 85 | 自定义样式 86 | 87 | ```html 88 | 92 | ``` -------------------------------------------------------------------------------- /miniprogram/components/NoticeBar/rest/icons.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | iconNotice:``, 3 | iconRight:`` 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Period/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Period/index.wxml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 12 | 13 | 17 | 18 | {{title}} 19 | 20 | 21 | 27 | 34 | 35 | 41 | 48 | 49 | 50 | 51 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /miniprogram/components/Period/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/period", 3 | "cname":"预约选择器", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Period", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Period/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 预约选择器来自于快递预约业务，是用来预约时间的组件。 4 | 5 | 使用场景 6 |
    7 |
  • 快递提交包裹时，预约时间选择。
    • 8 |
  • 提前预定外卖。
    • 9 |
  • 预约送货上门时间。
    • 10 |
11 | 12 | 13 | | 属性 | 说明 | 类型 | 默认值 | 必填 | 版本 | 14 | | - | - | - | - | - | - | 15 | | visible | 是否可见 | boolean | false | 否 | 1.0.0 | 16 | | title | 标题 | string | '预约上门时间' | 否 | 1.0.0 | 17 | | zIndex | 层级 | number | 100 | 否 | 1.0.0 | 18 | | showTwoHours | 两小时以内 | boolean | false | 否 | 1.0.0 | 19 | | timeItems | 时间范围 | Array`` | [] | 否 | 1.0.0 | 20 | | days | 天数 | number | 0 | 否 | 1.0.0 | 21 | | startTime | 开始时间 | number | 0 | 否 | 1.0.0 | 22 | | endTime | 结束时间 | number | 0 | 否 | 1.0.0 | 23 | | duration | 时间间隔 | number | 0 | 否 | 1.0.0 | 24 | 25 | types 26 | 27 | ```typescript 28 | interface IDate { 29 | raw: Date 30 | text: string 31 | } 32 | 33 | type ITime = { 34 | raw: { from: number; to: number } 35 | text: string 36 | } 37 | ``` 38 | 39 | triggerEvents 40 | 41 | ```ts 42 | onSelectedPeriod:( 43 | { 44 | detail: { 45 | date, 46 | time 47 | }:{ 48 | date:Array 49 | time:Array 50 | } 51 | } 52 | )=>void 53 | ``` 54 | 55 | 默认效果 56 | 57 | ```html 58 | 65 | 66 | ``` 67 | 68 | 设置日期范围 69 | 70 | ```html 71 | 78 | 79 | ``` 80 | 81 | 设置时间范围 82 | 83 | ```html 84 | 91 | 92 | ``` 93 | 94 | 直接设置时间 95 | 96 | ```html 97 | 102 | 103 | ``` 104 | 105 | 两小时以内 106 | 107 | ```html 108 | 116 | 117 | ``` 118 | 119 | 获取数据 120 | 121 | ```html 122 | 131 | 132 | ``` 133 | 134 | -------------------------------------------------------------------------------- /miniprogram/components/Popover/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Popover/index.less: -------------------------------------------------------------------------------- 1 | .init { 2 | font-size: 14px; 3 | line-height: 1; 4 | } 5 | 6 | .fixed_dialog_wrap { 7 | position: fixed; 8 | top: 0; 9 | left: 0; 10 | 11 | .init(); 12 | 13 | .mask { 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | width: 100vw; 18 | height: 100vh; 19 | } 20 | 21 | .dialog { 22 | position: fixed; 23 | display: flex; 24 | flex-direction: column; 25 | border-radius: 12rpx; 26 | transition: all ease 0.15s; 27 | 28 | &.visible { 29 | opacity: 1; 30 | transform: scale(1); 31 | } 32 | 33 | &.hidden { 34 | opacity: 0; 35 | transform: scale(0.72); 36 | } 37 | 38 | .mark { 39 | position: absolute; 40 | width: 20rpx; 41 | height: 20rpx; 42 | border-radius: 4rpx; 43 | transform: rotate(45deg); 44 | } 45 | 46 | .action_item { 47 | display: flex; 48 | align-items: center; 49 | margin: 0; 50 | padding: 0; 51 | padding-left: 32rpx; 52 | width: auto; 53 | height: auto; 54 | border: none; 55 | border-radius: 0; 56 | background-color: transparent; 57 | text-align: left; 58 | font-weight: normal; 59 | transition: all ease 0s; 60 | 61 | .init(); 62 | 63 | &:first-of-type { 64 | border-top-left-radius: 12rpx; 65 | border-top-right-radius: 12rpx; 66 | } 67 | 68 | &:last-child { 69 | border-bottom-right-radius: 12rpx; 70 | border-bottom-left-radius: 12rpx; 71 | 72 | .name { 73 | border-bottom: 2rpx solid transparent !important; 74 | } 75 | } 76 | 77 | &:active { 78 | background-color: #333; 79 | 80 | .name { 81 | border-bottom: 2rpx solid transparent !important; 82 | } 83 | } 84 | 85 | &::after { 86 | display: none; 87 | } 88 | 89 | .icon_wrap { 90 | display: flex; 91 | align-items: center; 92 | justify-content: left; 93 | padding-right: 24rpx; 94 | width: 40rpx; 95 | 96 | .icon_action { 97 | width: 38rpx; 98 | height: 38rpx; 99 | } 100 | } 101 | 102 | .name { 103 | padding: 32rpx 0; 104 | width: 180rpx; 105 | height: 100%; 106 | } 107 | } 108 | } 109 | } -------------------------------------------------------------------------------- /miniprogram/components/Popover/index.ts: -------------------------------------------------------------------------------- 1 | Component( { 2 | options: { 3 | pureDataPattern: /^(visible|timer_close)$/ 4 | }, 5 | properties: { 6 | visible: { 7 | type: Boolean, 8 | value: false 9 | }, 10 | position: { 11 | type: Array, 12 | value: [ '', '', '', '' ] // top , bottom , left , right 13 | } as { 14 | type: ArrayConstructor 15 | value: [ string, string, string, string ] 16 | }, 17 | mark: { 18 | type: Array, 19 | value: [ '-8rpx', '', '', '30rpx' ] // top , bottom , left , right 20 | } as { 21 | type: ArrayConstructor 22 | value: [ string, string, string, string ] 23 | }, 24 | transformOrigin: { 25 | type: String, 26 | value: 'top right' 27 | }, 28 | list: { 29 | type: Array, 30 | value: [] 31 | } as { 32 | type: ArrayConstructor 33 | value: Array<{ 34 | name: String 35 | icon: String 36 | }> 37 | }, 38 | bgColor: { 39 | type: String, 40 | value: 'black' 41 | }, 42 | color: { 43 | type: String, 44 | value: 'white' 45 | }, 46 | divideColor: { 47 | type: String, 48 | value: 'rgba(255, 255, 255, 0.15)' 49 | }, 50 | zIndex: { 51 | type: Number, 52 | value: 100 53 | } 54 | }, 55 | data: { 56 | _visible_dialog_wrap: false, 57 | _visible_dialog: false, 58 | timer_close: 0 59 | }, 60 | observers: { 61 | visible ( new_val ) { 62 | const _that = this 63 | 64 | clearTimeout( _that.data.timer_close ) 65 | 66 | if ( new_val ) { 67 | _that.setData( { _visible_dialog_wrap: true }, () => { 68 | _that.setData( { _visible_dialog: true } ) 69 | } ) 70 | } else { 71 | _that.setData( { _visible_dialog: false } ) 72 | 73 | const timer_close = setTimeout( () => { 74 | _that.setData( { _visible_dialog_wrap: false } ) 75 | }, 150 ) 76 | 77 | _that.setData( { timer_close } ) 78 | } 79 | } 80 | }, 81 | methods: { 82 | catchtouchmove () { }, 83 | onActionItem ( e ) { 84 | const _that = this 85 | const { mark: { index } } = e 86 | 87 | if ( index === undefined ) return 88 | 89 | _that.setData( { visible: false } ) 90 | 91 | _that.triggerEvent( 'onOption', { index: index } ) 92 | }, 93 | onShow () { 94 | const _that = this 95 | 96 | _that.setData( { visible: true } ) 97 | 98 | _that.triggerEvent( 'onShow' ) 99 | }, 100 | onClose () { 101 | const _that = this 102 | 103 | _that.setData( { visible: false } ) 104 | 105 | _that.triggerEvent( 'onClose' ) 106 | } 107 | } 108 | } ) 109 | -------------------------------------------------------------------------------- /miniprogram/components/Popover/index.wxml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 12 | 16 | 21 | 25 | 47 | 48 | -------------------------------------------------------------------------------- /miniprogram/components/Popover/index.wxs: -------------------------------------------------------------------------------- 1 | function formatName( name ) { 2 | return name.substring( 0, 5 ) 3 | } 4 | 5 | function getDialogStyles( props ) { 6 | var styles = '' 7 | 8 | if ( props.position ) { 9 | if ( props.position[ 0 ] ) styles += ';top:' + props.position[ 0 ] 10 | if ( props.position[ 1 ] ) styles += ';bottom:' + props.position[ 1 ] 11 | if ( props.position[ 2 ] ) styles += ';left:' + props.position[ 2 ] 12 | if ( props.position[ 3 ] ) styles += ';right:' + props.position[ 3 ] 13 | } 14 | 15 | styles += ';color:' + props.color 16 | styles += ';background:' + props.bgColor 17 | styles += ';transform-origin:' + props.transformOrigin 18 | 19 | return styles 20 | } 21 | 22 | function getMarkStyles( props ) { 23 | var styles = '' 24 | 25 | if ( props.mark ) { 26 | if ( props.mark[ 0 ] ) styles += ';top:' + props.mark[ 0 ] 27 | if ( props.mark[ 1 ] ) styles += ';bottom:' + props.mark[ 1 ] 28 | if ( props.mark[ 2 ] ) styles += ';left:' + props.mark[ 2 ] 29 | if ( props.mark[ 3 ] ) styles += ';right:' + props.mark[ 3 ] 30 | } 31 | 32 | styles += ';background:' + props.bgColor 33 | 34 | return styles 35 | } 36 | 37 | module.exports = { 38 | formatName: formatName, 39 | getDialogStyles: getDialogStyles, 40 | getMarkStyles: getMarkStyles 41 | } -------------------------------------------------------------------------------- /miniprogram/components/Popover/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/popover", 3 | "cname":"弹框", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Popover", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Popover/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 弹框的灵感来源与微信的右上角点击弹框，她提供一个固定在页面上的局部列表内容选项，比 ActionSheet 更有辨识度。 4 | 5 | 使用场景 6 |
    7 |
  • 应用扩展功能的交互展示。
    • 8 |
  • 展示一些其他面板选项。
    • 9 |
10 | 11 | 12 | | 属性 | 说明 | 类型 | 默认值 | 必填 | 版本 | 13 | | - | - | - | - | - | - | 14 | | visible | 是否可见 | boolean | false | 否 | 1.0.0 | 15 | | list | 数据项 | IList | [] | 是 | 1.0.0 | 16 | | position | 弹出位置 | [string, string, string, string] | [ '', '', '', '' ] | 否 | 1.0.0 | 17 | | mark | 标记位置 | [string, string, string, string] | [ '-8rpx', '', '', '30rpx' ] | 否 | 1.0.0 | 18 | | transformOrigin | 动画原点 | string | 'top right' | 否 | 1.0.0 | 19 | | bgColor | 背景 | string | 'black' | 否 | 1.0.0 | 20 | | color | 颜色 | string | 'white' | 否 | 1.0.0 | 21 | | divideColor | 分割线颜色 | string | 'rgba(255, 255, 255, 0.15)' | 否 | 1.0.0 | 22 | | zIndex | 层级 | number | 100 | 否 | 1.0.0 | 23 | 24 | 默认效果 25 | 26 | ```html 27 | 32 | 33 | ``` 34 | 35 | 设定位置 36 | 37 | ```html 38 | 43 | 44 | ``` 45 | 46 | 设定标记 47 | 48 | ```html 49 | 55 | 56 | ``` 57 | 58 | 动画原点 59 | 60 | ```html 61 | 68 | 69 | ``` 70 | 71 | 自定义颜色 72 | 73 | ```html 74 | 82 | 83 | ``` -------------------------------------------------------------------------------- /miniprogram/components/Ripple/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Ripple/index.less: -------------------------------------------------------------------------------- 1 | .content_wrap { 2 | position: relative; 3 | display: flex; 4 | margin: 0; 5 | padding: 0; 6 | background-color: transparent; 7 | 8 | .ripple_wrap { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | z-index: 1; 13 | overflow: hidden; 14 | box-sizing: border-box; 15 | width: 100%; 16 | height: 100%; 17 | 18 | .ripple { 19 | position: absolute; 20 | top: -100%; 21 | left: -100%; 22 | width: 36px; 23 | height: 36px; 24 | border-radius: 50%; 25 | transition-timing-function: ease-in; 26 | transition-property: opacity, transform; 27 | transform: translate(-50%, -50%); 28 | } 29 | } 30 | 31 | .content { 32 | background-position: center; 33 | } 34 | } -------------------------------------------------------------------------------- /miniprogram/components/Ripple/index.wxml: -------------------------------------------------------------------------------- 1 | 8 | 13 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /miniprogram/components/Ripple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/ripple", 3 | "cname":"水波纹", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Ripple", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Ripple/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 水波纹组件来源于 Google 的 Material Design，她作为原子化元素能够包裹任何其他子元素，提供如水波纹般的点击和触摸交互效果。 4 | 5 | 使用场景 6 |
    7 |
  • 应用与按钮之上。
    • 8 |
  • 用于展示卡片点击效果反馈。
    • 9 |
10 | 11 | 12 | | 属性 | 说明 | 类型 | 默认值 | 必填 | 版本 | 13 | | - | - | - | - | - | - | 14 | | color | 颜色 | string | 'rgba(0, 0, 0, 0.2)' | 否 | 1.0.0 | 15 | | radius | 圆角 | number | 8 | 否 | 1.0.0 | 16 | 17 | 默认效果 18 | 19 | ```html 20 | 21 | 22 | 23 | ``` 24 | 25 | 设定颜色 26 | 27 | ```html 28 | 29 | 30 | 31 | ``` 32 | 33 | 绑定方法 34 | 35 | ```html 36 | 37 | 41 | 42 | ``` 43 | 44 | 设定圆角 45 | 46 | ```html 47 | 48 | 52 | 53 | ``` 54 | 55 | 幽灵按钮 56 | 57 | ```html 58 | 59 | 60 | 61 | ``` 62 | 63 | 任意使用 64 | 65 | ```html 66 | 67 | 74 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 75 | tempor 76 | incididunt 77 | ut labore et dolore magna aliqua. 78 | 79 | 80 | ``` -------------------------------------------------------------------------------- /miniprogram/components/SnackBar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/SnackBar/index.wxml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 12 | 16 | 20 | 24 | {{title}} 25 | {{description}}{{slot}} 29 | 30 | 31 | 35 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /miniprogram/components/SnackBar/index.wxs: -------------------------------------------------------------------------------- 1 | function formatName( name ) { 2 | return name.substring( 0, 5 ) 3 | } 4 | 5 | function getContentStyles( props ) { 6 | var styles = '' 7 | 8 | if ( props.cover ) styles += ';border-radius:0' 9 | if ( props.color ) styles += ';color:' + props.color 10 | if ( props.bgColor ) styles += ';background:' + props.bgColor 11 | 12 | return styles 13 | } 14 | 15 | module.exports = { 16 | formatName: formatName, 17 | getContentStyles: getContentStyles 18 | } -------------------------------------------------------------------------------- /miniprogram/components/SnackBar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/snackbar", 3 | "cname":"提示栏", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/SnackBar", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Sticky/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Sticky/index.less: -------------------------------------------------------------------------------- 1 | .sticky_wrap { 2 | position: relative; 3 | 4 | .fixed { 5 | position: fixed; 6 | top: 0; 7 | } 8 | } -------------------------------------------------------------------------------- /miniprogram/components/Sticky/index.wxml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /miniprogram/components/Sticky/index.wxs: -------------------------------------------------------------------------------- 1 | function getWrapStyles( props ) { 2 | var styles = '' 3 | 4 | if ( props.fixed ) { 5 | styles += ';height:' + props.height + 'px' 6 | styles += ';z-index:' + props.zIndex 7 | } 8 | 9 | if ( props.disabled ) styles += ';position:unset' 10 | 11 | return styles 12 | } 13 | 14 | function getContentStyles( props ) { 15 | var styles = '' 16 | 17 | if ( props.fixed ) { 18 | styles += ';width:' + props.width + 'px' 19 | styles += ';top:' + props.offsetTop + 'px' 20 | } 21 | 22 | return styles 23 | } 24 | 25 | module.exports = { 26 | getWrapStyles: getWrapStyles, 27 | getContentStyles: getContentStyles 28 | } -------------------------------------------------------------------------------- /miniprogram/components/Sticky/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/sticky", 3 | "cname":"粘性布局", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Sticky", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Sticky/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 粘性布局来源于css中的 position:sticky 属性，由于小程序浏览器内核的原因，该特性需要通过组件的形式来实现。 4 | 5 | 使用场景 6 |
    7 |
  • 当页面滚动时，将tabbar悬浮显示在页面顶部。
    • 8 |
  • 页面有长的 table 时，滚动页面，表头悬浮显示在页面顶部，获得更好的信息展示效果。
    • 9 |
10 | 11 | 12 | | 属性 | 说明 | 类型 | 默认值 | 必填 | 版本 | 13 | | - | - | - | - | - | - | 14 | | offsetTop | 顶部距离 | number | 0 | 否 | 1.0.0 | 15 | | zIndex | 层级 | number | 100 | 否 | 1.0.0 | 16 | | container | 容器 | string | '' | 否 | 1.0.0 | 17 | | disabled | 禁用 | boolean | false | 否 | 1.0.0 | 18 | 19 | 默认效果 20 | 21 | ```html 22 | 23 | 24 | 25 | ``` 26 | 27 | 顶部距离 28 | 29 | ```html 30 | 31 | 32 | 33 | ``` 34 | 35 | 指定容器 36 | 37 | ```html 38 | 43 | 44 | 48 | 55 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 56 | incididunt 57 | ut labore et dolore magna aliqua. 58 | 59 | 60 | 61 | 62 | ``` -------------------------------------------------------------------------------- /miniprogram/components/Tab/Sticky/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Tab/Sticky/index.less: -------------------------------------------------------------------------------- 1 | .sticky_wrap { 2 | position: relative; 3 | 4 | .fixed { 5 | position: fixed; 6 | top: 0; 7 | } 8 | } -------------------------------------------------------------------------------- /miniprogram/components/Tab/Sticky/index.wxml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /miniprogram/components/Tab/Sticky/index.wxs: -------------------------------------------------------------------------------- 1 | function getWrapStyles( props ) { 2 | var styles = '' 3 | 4 | if ( props.fixed ) { 5 | styles += ';height:' + props.height + 'px' 6 | styles += ';z-index:' + props.zIndex 7 | } 8 | 9 | if ( props.disabled ) styles += ';position:unset' 10 | 11 | return styles 12 | } 13 | 14 | function getContentStyles( props ) { 15 | var styles = '' 16 | 17 | if ( props.fixed ) { 18 | styles += ';width:' + props.width + 'px' 19 | styles += ';top:' + props.offsetTop + 'px' 20 | } 21 | 22 | return styles 23 | } 24 | 25 | module.exports = { 26 | getWrapStyles: getWrapStyles, 27 | getContentStyles: getContentStyles 28 | } -------------------------------------------------------------------------------- /miniprogram/components/Tab/TabItem/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Tab/TabItem/index.less: -------------------------------------------------------------------------------- 1 | .init { 2 | color: black; 3 | font-size: 30rpx; 4 | line-height: 1.6; 5 | } 6 | 7 | :host { 8 | display: flex; 9 | flex: 1; 10 | flex-shrink: 0; 11 | box-sizing: border-box; 12 | 13 | .init(); 14 | } 15 | 16 | .tab_item { 17 | width: 100%; 18 | } -------------------------------------------------------------------------------- /miniprogram/components/Tab/TabItem/index.ts: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | 3 | const Tab = '../index' 4 | 5 | Component({ 6 | relations: { 7 | [ Tab ]: { type: 'parent' } 8 | }, 9 | properties: { 10 | title: String, 11 | disabled: Boolean 12 | }, 13 | data: { 14 | current: null, 15 | index: null, 16 | rendered: false 17 | }, 18 | tab: {} as WechatMiniprogram.Component.TrivialInstance, 19 | methods: { 20 | reset() { 21 | this.setData({ 22 | current: null, 23 | index: null, 24 | rendered: false 25 | }) 26 | }, 27 | updateCurrent() { 28 | const { index, rendered } = this.data 29 | const { current, persist, lazyload } = this.tab.__data__ 30 | 31 | if (persist && rendered) { 32 | this.setData({ current }) 33 | } else { 34 | this.setData({ 35 | current, 36 | rendered: index ? index === current : true 37 | }) 38 | } 39 | } 40 | }, 41 | lifetimes: { 42 | ready() { 43 | const tab = this.getRelationNodes(Tab)[ 0 ] 44 | const { titles, lazyload } = tab.__data__ 45 | const index = titles.findIndex((item: { text: string, disabled: boolean }) => item.text === this.data.title) 46 | 47 | this.tab = tab 48 | 49 | this.setData({ index }) 50 | 51 | if (lazyload) { 52 | this.updateCurrent() 53 | } else { 54 | this.setData({ rendered: true }) 55 | } 56 | } 57 | } 58 | }) 59 | -------------------------------------------------------------------------------- /miniprogram/components/Tab/TabItem/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /miniprogram/components/Tab/behavior.ts: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | 3 | const Index = Behavior( { 4 | x: 0, 5 | offset_x: 0, 6 | next: null, 7 | methods: { 8 | reset () { 9 | this.x = 0 10 | this.offset_x = 0 11 | this.next = null 12 | }, 13 | touchStart ( e: WechatMiniprogram.TouchEvent ) { 14 | this.reset() 15 | 16 | this.x = e.touches[ 0 ].clientX 17 | }, 18 | touchMove ( e: WechatMiniprogram.TouchEvent ) { 19 | this.offset_x = e.touches[ 0 ].clientX - this.x 20 | } 21 | } 22 | } ) 23 | 24 | export default Index -------------------------------------------------------------------------------- /miniprogram/components/Tab/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "local-sticky":"./Sticky/index" 5 | } 6 | } -------------------------------------------------------------------------------- /miniprogram/components/Tab/index.wxml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 11 | 15 | 21 | 33 | 37 | 42 | {{item.text}} 50 | 51 | 52 | 53 | 58 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /miniprogram/components/Tab/index.wxs: -------------------------------------------------------------------------------- 1 | function px( str ) { 2 | return str + 'px' 3 | } 4 | 5 | function calc( str ) { 6 | return 'calc(' + str + ')' 7 | } 8 | 9 | function add( a, b ) { 10 | return a + ' + ' + b 11 | } 12 | 13 | function reduce( a, b ) { 14 | return a + ' - ' + b 15 | } 16 | 17 | function getStylesOfActiveLine( props ) { 18 | var styles = '' 19 | 20 | if ( !props.bar_items.length ) return '' 21 | 22 | function getSize( param ) { 23 | return ';' + param + ':' + calc( 24 | reduce( 25 | px( props.bar_items[ props.current ][ param ] ), 26 | '48rpx' 27 | ) 28 | ) 29 | } 30 | 31 | function getPosition( param ) { 32 | return ';' + param + ':' + calc( 33 | add( 34 | reduce( 35 | px( props.bar_items[ props.current ][ param ] ), 36 | px( props.bar_items[ 0 ][ param ] ) 37 | ), 38 | '24rpx' 39 | ) 40 | ) 41 | } 42 | 43 | if ( !props.vertical ) { 44 | styles += getSize( 'width' ) 45 | styles += getPosition( 'left' ) 46 | } else { 47 | styles += getSize( 'height' ) 48 | styles += getPosition( 'top' ) 49 | } 50 | 51 | return styles 52 | } 53 | 54 | function getStylesOfContentWrap( props ) { 55 | var styles = '' 56 | 57 | if ( !props.vertical ) { 58 | if ( props.titles.length ) styles += ';width:' + 100 * props.titles.length + '%' 59 | if ( !props.titles.length ) styles += ';width:' + 1000 + '%' 60 | 61 | styles += ';transform:translateX(-' + props.current * 100 / props.titles.length + '%)' 62 | } else { 63 | if ( props.titles.length ) styles += ';height:' + 100 * props.titles.length + '%' 64 | if ( !props.titles.length ) styles += ';height:' + 1000 + '%' 65 | 66 | styles += ';transform:translateY(-' + props.current * 100 / props.titles.length + '%)' 67 | } 68 | 69 | return styles 70 | } 71 | 72 | module.exports = { 73 | getStylesOfActiveLine: getStylesOfActiveLine, 74 | getStylesOfContentWrap: getStylesOfContentWrap 75 | } -------------------------------------------------------------------------------- /miniprogram/components/Tab/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/tab", 3 | "cname":"选项卡", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Tab", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Text/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Text/index.less: -------------------------------------------------------------------------------- 1 | @color_success: #81C784; 2 | @color_warning: #FFB74D; 3 | @color_error: #E57373; 4 | 5 | .init { 6 | color: black; 7 | font-size: 30rpx; 8 | line-height: 1.6; 9 | } 10 | 11 | .text_wrap { 12 | .init(); 13 | 14 | &.p { 15 | display: inline-block; 16 | margin: 16rpx 0; 17 | line-height: 1.8; 18 | } 19 | 20 | &.b { 21 | font-weight: bold; 22 | } 23 | 24 | &.i { 25 | font-style: italic; 26 | } 27 | 28 | &.del { 29 | text-decoration: line-through; 30 | } 31 | 32 | &.h7 { 33 | font-size: 0.6em; 34 | } 35 | 36 | &.h6 { 37 | font-size: 0.8em; 38 | } 39 | 40 | &.h5 { 41 | font-size: 1em; 42 | } 43 | 44 | &.h4 { 45 | font-size: 1.2em; 46 | } 47 | 48 | &.h3 { 49 | font-size: 1.5em; 50 | } 51 | 52 | &.h2 { 53 | font-size: 1.8em; 54 | } 55 | 56 | &.h1 { 57 | font-size: 2.1em; 58 | } 59 | 60 | &.quote { 61 | box-sizing: border-box; 62 | padding: 24rpx; 63 | background-color: whitesmoke; 64 | color: #888; 65 | font-size: 0.9em; 66 | } 67 | 68 | &.success { 69 | color: @color_success; 70 | } 71 | 72 | &.warning { 73 | color: @color_warning; 74 | } 75 | 76 | &.error { 77 | color: @color_error; 78 | } 79 | 80 | &.line_clamp_1 { 81 | display: -webkit-box; 82 | overflow: hidden; 83 | -webkit-box-orient: vertical; 84 | 85 | -webkit-line-clamp: 1 86 | } 87 | 88 | &.line_clamp_2 { 89 | display: -webkit-box; 90 | overflow: hidden; 91 | -webkit-box-orient: vertical; 92 | 93 | -webkit-line-clamp: 2 94 | } 95 | 96 | &.line_clamp_3 { 97 | display: -webkit-box; 98 | overflow: hidden; 99 | -webkit-box-orient: vertical; 100 | 101 | -webkit-line-clamp: 3 102 | } 103 | 104 | &.line_clamp_4 { 105 | display: -webkit-box; 106 | overflow: hidden; 107 | -webkit-box-orient: vertical; 108 | 109 | -webkit-line-clamp: 4 110 | } 111 | 112 | &.line_clamp_5 { 113 | display: -webkit-box; 114 | overflow: hidden; 115 | -webkit-box-orient: vertical; 116 | 117 | -webkit-line-clamp: 5 118 | } 119 | } -------------------------------------------------------------------------------- /miniprogram/components/Text/index.ts: -------------------------------------------------------------------------------- 1 | Component( { 2 | properties: { 3 | p: Boolean, 4 | b: Boolean, 5 | i: Boolean, 6 | del: Boolean, 7 | h1: Boolean, 8 | h2: Boolean, 9 | h3: Boolean, 10 | h4: Boolean, 11 | h5: Boolean, 12 | h6: Boolean, 13 | h7: Boolean, 14 | quote: Boolean, 15 | success: Boolean, 16 | warning: Boolean, 17 | error: Boolean, 18 | color: String, 19 | fontSize: String, 20 | textAlign: String, 21 | style: String, 22 | lineClamp: Number 23 | } 24 | } ) 25 | -------------------------------------------------------------------------------- /miniprogram/components/Text/index.wxml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /miniprogram/components/Text/index.wxs: -------------------------------------------------------------------------------- 1 | function getClasses( props ) { 2 | var classes = '' 3 | 4 | if ( props.p ) classes += ' p' 5 | if ( props.b ) classes += ' b' 6 | if ( props.i ) classes += ' i' 7 | if ( props.del ) classes += ' del' 8 | if ( props.h1 ) classes += ' h1' 9 | if ( props.h2 ) classes += ' h2' 10 | if ( props.h3 ) classes += ' h3' 11 | if ( props.h4 ) classes += ' h4' 12 | if ( props.h5 ) classes += ' h5' 13 | if ( props.h6 ) classes += ' h6' 14 | if ( props.h7 ) classes += ' h7' 15 | if ( props.quote ) classes += ' quote' 16 | if ( props.success ) classes += ' success' 17 | if ( props.warning ) classes += ' warning' 18 | if ( props.error ) classes += ' error' 19 | if ( props.lineClamp ) classes += ' line_clamp_' + props.lineClamp 20 | 21 | return classes 22 | } 23 | 24 | function getStyles( props ) { 25 | var styles = '' 26 | 27 | if ( props.color ) styles += ';color:' + props.color 28 | if ( props.fontSize ) styles += ';font-size:' + props.fontSize 29 | if ( props.textAlign ) styles += ';text-align:' + props.textAlign 30 | 31 | return styles 32 | } 33 | 34 | module.exports = { 35 | getClasses: getClasses, 36 | getStyles: getStyles 37 | } -------------------------------------------------------------------------------- /miniprogram/components/Text/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/text", 3 | "cname":"文字", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Text", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Toast/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/components/Toast/index.wxml: -------------------------------------------------------------------------------- 1 | 7 | 11 | 16 | 20 | {{title}} 21 | 22 | 23 | -------------------------------------------------------------------------------- /miniprogram/components/Toast/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lightd/toast", 3 | "cname":"消息提示", 4 | "version": "1.0.0", 5 | "main": "index.js", 6 | "homepage": "https://github.com/MatrixAges/light-design/tree/master/miniprogram/components/Toast", 7 | "author": "Matrixage", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /miniprogram/components/Toast/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 消息提示是一种轻量的内容提示组件，由一个状态图标和文字内容组成。 4 | 5 | 使用场景 6 |
    7 |
  • 展示按钮点击之后触发的信息反馈。
    • 8 |
  • 展示应用运行时的错误信息。
    • 9 |
10 | 11 | 12 | | 属性 | 说明 | 类型 | 默认值 | 必填 | 版本 | 13 | | - | - | - | - | - | - | 14 | | visible | 是否可见 | boolean | false | 否 | 1.0.0 | 15 | | position | 位置 | 'top' or 'bottom' | 'bottom' | 否 | 1.0.0 | 16 | | type | 类型 | Toast_type | '' | 否 | 1.0.0 | 17 | | useColor | 背景色 | boolean | false | 否 | 1.0.0 | 18 | | color | 颜色 | string | '' | 否 | 1.0.0 | 19 | | bgColor | 背景颜色 | string | '' | 否 | 1.0.0 | 20 | | title | 标题 | string | '' | 否 | 1.0.0 | 21 | | duration | 关闭时间 | number | 3000 | 否 | 1.0.0 | 22 | | zIndex | 层级 | number | 100 | 否 | 1.0.0 | 23 | 24 | types 25 | 26 | ```typescript 27 | type Toast_type = '' | 'success' | 'warning' | 'error' 28 | ``` 29 | 30 | 默认效果 31 | 32 | ```html 33 | 37 | ``` 38 | 39 | 顶部弹出 40 | 41 | ```html 42 | 47 | ``` 48 | 49 | 自定义颜色 50 | 51 | ```html 52 | 58 | ``` 59 | 60 | 关闭时间 61 | 62 | ```html 63 | 68 | ``` 69 | 70 | 设定类型 71 | 72 | ```html 73 | 78 | 83 | 88 | ``` 89 | 90 | 背景色 91 | 92 | ```html 93 | 99 | 105 | 111 | ``` -------------------------------------------------------------------------------- /miniprogram/image/icon_add_person.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/icon_add_person_black.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/icon_chat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/icon_chat_black.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/icon_close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/icon_feedback.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/icon_feedback_black.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/icon_info.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/icon_pay.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/icon_pay_black.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/icon_right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/icon_scan.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/icon_scan_black.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/logo_dingding.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/logo_instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/logo_pengyouquan.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/logo_qq.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/logo_qzone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/logo_wechat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/logo_weibo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/logo_yixin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/image/logo_zhihu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/page_components/_Tips/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/page_components/_Tips/index.less: -------------------------------------------------------------------------------- 1 | .tips_wrap { 2 | @width_left: 72rpx; 3 | 4 | position: relative; 5 | display: flex; 6 | width: 100%; 7 | box-sizing: border-box; 8 | padding: 32rpx 36rpx; 9 | padding-left: @width_left; 10 | text-align: justify; 11 | box-shadow: var(--box_shadow_morphic); 12 | 13 | &.topBorder{ 14 | box-shadow: none; 15 | border-top: 2rpx solid var(--color_border); 16 | } 17 | 18 | .icon_info { 19 | position: absolute; 20 | top: 36rpx; 21 | left: 24rpx; 22 | width: 32rpx; 23 | height: 32rpx; 24 | } 25 | 26 | .text { 27 | font-size: 26rpx; 28 | } 29 | } -------------------------------------------------------------------------------- /miniprogram/page_components/_Tips/index.ts: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | text: { 4 | type: String, 5 | value: '' 6 | }, 7 | topBorder: { 8 | type: Boolean, 9 | value: false 10 | } 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /miniprogram/page_components/_Tips/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 7 | {{text}} 8 | -------------------------------------------------------------------------------- /miniprogram/pages/ActionSheet/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "ActionSheet" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/ActionSheet/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatrixAges/light-design/63031aa4a62c0ceda8802ad5c186778b637e45ff/miniprogram/pages/ActionSheet/index.less -------------------------------------------------------------------------------- /miniprogram/pages/Button/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Button" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Button/index.less: -------------------------------------------------------------------------------- 1 | .example{ 2 | padding: 12rpx; 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Button/index.ts: -------------------------------------------------------------------------------- 1 | Page({}) -------------------------------------------------------------------------------- /miniprogram/pages/Card/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Card" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Card/index.less: -------------------------------------------------------------------------------- 1 | .example_items{ 2 | .example_item{ 3 | flex-direction: column !important; 4 | 5 | .title_wrap{ 6 | margin-bottom: 24rpx!important; 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /miniprogram/pages/Card/index.ts: -------------------------------------------------------------------------------- 1 | Page({}) -------------------------------------------------------------------------------- /miniprogram/pages/Card/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 默认效果 5 | default 6 | 7 | 8 | 9 | 16 | 南山经之首曰䧿山。其首曰招摇之山，临于西海之上，多桂，多金玉。有草焉，其状如韭而青华，其名曰祝馀，食之不饥。有木焉，其状如榖而黑理，其华四照。其名曰迷榖，佩之不迷。有兽焉，其状如禺而白耳，伏行人走，其名曰狌狌，食之善走。丽麂之水出焉，而西流注于海，其中多育沛，佩之无瘕疾。 17 | 18 | 19 | 20 | 21 | 22 | 23 | 设置样式 24 | custom 25 | 26 | 27 | 28 | 38 | 西山经华山之首，曰钱来之山，其上多松，其下多洗石。有兽焉，其状如羊而马尾，名曰羬羊，其脂可以已腊。 40 | 西四十五里，曰松果之山。濩水出焉，北流注于渭，其中多铜。有鸟焉，其名曰䳋渠，其状如山鸡，黑身赤足，可以已[月暴]。 42 | 又西六十里，曰太华之山，削成而四方，其高五千仞，其广十里，鸟兽莫居。有蛇焉，名曰肥（虫遗），六足四翼，见则天下大旱。 43 | 44 | 45 | 46 | 47 | 48 | 49 | 悬浮阴影 50 | shadow 51 | 52 | 53 | 54 | 61 | 《中山经》薄山之首，曰甘枣之山。共水出焉，而西流注于河。其上多杻木，其下有草焉，葵本而杏叶，黄华而荚实，名曰箨，可以已懵。有兽焉，其状如囗鼠而文题，其名曰㔮，食之已瘿。 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /miniprogram/pages/Dialog/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Dialog" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Dialog/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatrixAges/light-design/63031aa4a62c0ceda8802ad5c186778b637e45ff/miniprogram/pages/Dialog/index.less -------------------------------------------------------------------------------- /miniprogram/pages/Dialog/index.ts: -------------------------------------------------------------------------------- 1 | import { blockRight } from 'components/Icon/data' 2 | 3 | Page({ 4 | data: { 5 | blockRight: blockRight, 6 | visible_default: false 7 | }, 8 | onOption (e: any) { 9 | const _that = this 10 | const { mark: { type } } = e 11 | 12 | if (!type) return 13 | 14 | _that.setData({ 15 | [`visible_${type}`]: true 16 | }) 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /miniprogram/pages/DialogQueue/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "DialogQueue" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/DialogQueue/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatrixAges/light-design/63031aa4a62c0ceda8802ad5c186778b637e45ff/miniprogram/pages/DialogQueue/index.less -------------------------------------------------------------------------------- /miniprogram/pages/DialogQueue/index.ts: -------------------------------------------------------------------------------- 1 | import { blockRight } from 'components/Icon/data' 2 | 3 | Page({ 4 | data: { 5 | blockRight: blockRight, 6 | visible_default: false, 7 | list: [ 8 | { 9 | rank: 100, 10 | title: '夜间海报', 11 | imgSrc: 12 | 'https://cdn.pixabay.com/photo/2020/05/19/06/30/sun-5189430_1280.jpg', 13 | url: '', 14 | daily: true, 15 | durations: [ 16 | { 17 | startTime: '00:00:00', 18 | endTime: '23:59:59' 19 | } 20 | ] 21 | }, 22 | { 23 | rank: 6, 24 | title: '短信活动', 25 | imgSrc: 26 | 'https://cdn.pixabay.com/photo/2020/02/25/19/16/stawberry-4879794_1280.jpg', 27 | url: '', 28 | daily: true, 29 | durations: [ 30 | { 31 | startTime: '00:00:00', 32 | endTime: '23:59:59' 33 | } 34 | ] 35 | }, 36 | { 37 | rank: 1, 38 | title: '抽奖活动', 39 | imgSrc: 40 | 'https://cdn.pixabay.com/photo/2014/12/17/21/35/drop-of-water-571956_1280.jpg', 41 | url: '', 42 | daily: false, 43 | durations: [ 44 | { 45 | startTime: '2020/5/25 00:00:00', 46 | endTime: '2020/11/28 23:59:59' 47 | }, 48 | { 49 | startTime: '2020/12/25 00:00:00', 50 | endTime: '2020/12/28 23:59:59' 51 | } 52 | ] 53 | }, 54 | { 55 | rank: 4, 56 | title: '买100送200', 57 | imgSrc: 58 | 'https://cdn.pixabay.com/photo/2014/11/25/16/32/drop-of-water-545377_1280.jpg', 59 | target: 'miniProgram', 60 | appId: '12312312mdmsadmasqaasdasd', 61 | path: '/pages/goods?id=103', 62 | version: 'develop', 63 | daily: false, 64 | durations: [ 65 | { 66 | startTime: '2020/5/25 00:00:00', 67 | endTime: '2020/11/28 23:59:59' 68 | } 69 | ] 70 | } 71 | ] 72 | }, 73 | onOption (e: any) { 74 | const _that = this 75 | const { mark: { type } } = e 76 | 77 | if (!type) return 78 | 79 | _that.setData({ 80 | [`visible_${type}`]: true 81 | }) 82 | } 83 | }) 84 | -------------------------------------------------------------------------------- /miniprogram/pages/DialogQueue/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 默认效果 5 | default 6 | 7 | 17 | 21 | 22 | -------------------------------------------------------------------------------- /miniprogram/pages/Icon/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Icon" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Icon/index.less: -------------------------------------------------------------------------------- 1 | .example_items { 2 | &.icon_items { 3 | .example_item { 4 | &:hover { 5 | background-color: transparent; 6 | } 7 | 8 | .title_wrap { 9 | flex-direction: column; 10 | align-items: center; 11 | margin-bottom: 12rpx; 12 | 13 | .title { 14 | margin-bottom: 18rpx; 15 | } 16 | } 17 | } 18 | } 19 | } 20 | 21 | .mini_items { 22 | .example_item { 23 | .title_wrap{ 24 | align-items: flex-start !important; 25 | } 26 | .examples { 27 | justify-content: center; 28 | .example { 29 | justify-content: flex-end; 30 | } 31 | } 32 | } 33 | } 34 | 35 | .icon_wrap { 36 | position: relative; 37 | display: flex; 38 | justify-content: center; 39 | align-items: center; 40 | width: 100%/4; 41 | padding: 36rpx 0; 42 | box-sizing: border-box; 43 | 44 | &:nth-last-of-type(1), 45 | &:nth-last-of-type(2), 46 | &:nth-last-of-type(3) { 47 | border-bottom: none; 48 | } 49 | 50 | &:hover { 51 | background-color: var(--color_sub_bg); 52 | } 53 | 54 | .icon_name { 55 | font-size: 20rpx; 56 | } 57 | } -------------------------------------------------------------------------------- /miniprogram/pages/Icon/index.ts: -------------------------------------------------------------------------------- 1 | import data,{ toggle,cube } from 'components/Icon/data' 2 | 3 | type Icon = { 4 | name: string 5 | value: { outline: string; filled: string } 6 | } 7 | 8 | const normal_icons: Array = [] 9 | const more_icons: Array = [] 10 | 11 | for (const i in data) { 12 | if (!i) break 13 | 14 | //@ts-ignore 15 | if (!data[i].filled) { 16 | normal_icons.push({ 17 | name: i, 18 | //@ts-ignore 19 | value: data[i] 20 | }) 21 | } else { 22 | more_icons.push({ 23 | name: i, 24 | //@ts-ignore 25 | value: data[i] 26 | }) 27 | } 28 | } 29 | 30 | Page({ 31 | data: { 32 | filled: false, 33 | normal_icons: normal_icons, 34 | more_icons: more_icons, 35 | toggle, 36 | cube 37 | }, 38 | onChangeType () { 39 | this.setData({ filled: !this.data.filled }) 40 | } 41 | }) 42 | -------------------------------------------------------------------------------- /miniprogram/pages/Landing/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Landing" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Landing/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatrixAges/light-design/63031aa4a62c0ceda8802ad5c186778b637e45ff/miniprogram/pages/Landing/index.less -------------------------------------------------------------------------------- /miniprogram/pages/Landing/index.ts: -------------------------------------------------------------------------------- 1 | import { blockRight } from 'components/Icon/data' 2 | 3 | Page({ 4 | data: { 5 | blockRight:blockRight,visible_default: false 6 | }, 7 | onOption (e: any) { 8 | const _that = this 9 | const { mark: { type } } = e 10 | 11 | if (!type) return 12 | 13 | _that.setData({ 14 | [`visible_${type}`]: true 15 | }) 16 | } 17 | }) 18 | -------------------------------------------------------------------------------- /miniprogram/pages/Landing/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 默认效果 5 | default 6 | 7 | 17 | 18 | 19 | 20 | 21 | 显示遮罩 22 | maskVisible 23 | 24 | 34 | 38 | 39 | 40 | 41 | 遮罩颜色 42 | maskColor 43 | 44 | 54 | 59 | 60 | -------------------------------------------------------------------------------- /miniprogram/pages/Line/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Line" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Line/index.less: -------------------------------------------------------------------------------- 1 | .mini_items { 2 | .example_item { 3 | .examples { 4 | .example { 5 | justify-content: center; 6 | } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /miniprogram/pages/Line/index.ts: -------------------------------------------------------------------------------- 1 | Page({ 2 | click () { 3 | wx.showToast({ 4 | icon: 'none', 5 | title: 'clicked' 6 | }) 7 | } 8 | }) 9 | -------------------------------------------------------------------------------- /miniprogram/pages/Loading/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Loading" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Loading/index.less: -------------------------------------------------------------------------------- 1 | .examples{ 2 | justify-content: center; 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Loading/index.ts: -------------------------------------------------------------------------------- 1 | import { blockRight } from 'components/Icon/data' 2 | 3 | Page({ 4 | data: { 5 | blockRight:blockRight,visible_default: false 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /miniprogram/pages/Loading/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 默认 7 | refresh 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | 加载中 21 | loading 22 | 23 | 24 | 25 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /miniprogram/pages/Modal/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Modal" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Modal/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatrixAges/light-design/63031aa4a62c0ceda8802ad5c186778b637e45ff/miniprogram/pages/Modal/index.less -------------------------------------------------------------------------------- /miniprogram/pages/Modal/index.ts: -------------------------------------------------------------------------------- 1 | import { blockRight } from 'components/Icon/data' 2 | 3 | Page({ 4 | data: { 5 | blockRight:blockRight,visible_default: false 6 | }, 7 | onOption (e: any) { 8 | const _that = this 9 | const { mark: { type } } = e 10 | 11 | if (!type) return 12 | 13 | _that.setData({ 14 | [`visible_${type}`]: true 15 | }) 16 | } 17 | }) -------------------------------------------------------------------------------- /miniprogram/pages/NoticeBar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "NoticeBar" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/NoticeBar/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatrixAges/light-design/63031aa4a62c0ceda8802ad5c186778b637e45ff/miniprogram/pages/NoticeBar/index.less -------------------------------------------------------------------------------- /miniprogram/pages/NoticeBar/index.ts: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | list: [ 4 | '叫大家圣诞节啊撒撒娇的叫大家圣诞节啊撒撒娇的叫大家圣诞节啊撒撒娇的', 5 | '叫大家都觉得卡开始的卡上课的卡上课叫大家圣诞节啊撒撒娇的', 6 | '叫大家圣诞节啊撒撒娇的叫大家圣诞节啊撒撒娇的', 7 | '叫大家都觉得卡开始的卡上课的卡上课叫大家圣诞节啊撒撒娇的', 8 | '叫大家圣诞节啊撒撒娇的叫大家圣诞节啊撒撒娇的', 9 | '叫大家都觉得卡开始的卡上课的卡上课叫大家圣诞节啊撒撒娇的' 10 | ] 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /miniprogram/pages/Period/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Period" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Period/index.less: -------------------------------------------------------------------------------- 1 | .period_data { 2 | width: 80vw; 3 | padding: 48rpx; 4 | border-radius: 12rpx; 5 | font-size: 26rpx; 6 | 7 | .period_items { 8 | .period_item { 9 | border: 2rpx solid black; 10 | border-radius: 6rpx; 11 | overflow: hidden; 12 | 13 | &:first-child { 14 | margin-bottom: 18rpx; 15 | } 16 | 17 | .label { 18 | width: 48rpx; 19 | height: 100rpx; 20 | text-align: center; 21 | box-sizing: border-box; 22 | background-color: black; 23 | color: white; 24 | } 25 | 26 | .value_items { 27 | width: calc(100% - 48rpx); 28 | height: 100rpx; 29 | padding: 0 24rpx; 30 | border-radius: 6rpx; 31 | 32 | .value_item { 33 | &.text { 34 | font-size: 28rpx; 35 | font-weight: bold; 36 | } 37 | 38 | &.raw { 39 | font-size: 20rpx; 40 | } 41 | } 42 | } 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /miniprogram/pages/Period/index.ts: -------------------------------------------------------------------------------- 1 | import { blockRight } from 'components/Icon/data' 2 | 3 | Page({ 4 | data: { 5 | blockRight: blockRight, 6 | visible_default: false, 7 | visible_period_data: false, 8 | period_data: {} 9 | }, 10 | onOption (e: any) { 11 | const _that = this 12 | const { mark: { type } } = e 13 | 14 | if (!type) return 15 | 16 | _that.setData({ 17 | [`visible_${type}`]: true 18 | }) 19 | }, 20 | onSelectedPeriod ({ detail }: WechatMiniprogram.TouchEvent) { 21 | const _that = this 22 | 23 | _that.setData({ 24 | visible_period_data: true, 25 | period_data: JSON.parse(JSON.stringify(detail)) 26 | }) 27 | } 28 | }) 29 | -------------------------------------------------------------------------------- /miniprogram/pages/Popover/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Popover" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Popover/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatrixAges/light-design/63031aa4a62c0ceda8802ad5c186778b637e45ff/miniprogram/pages/Popover/index.less -------------------------------------------------------------------------------- /miniprogram/pages/Popover/index.ts: -------------------------------------------------------------------------------- 1 | import { blockRight } from 'components/Icon/data' 2 | 3 | Page({ 4 | data: { 5 | blockRight:blockRight,visible_default: false, 6 | list: [ 7 | { 8 | name: '发起群聊', 9 | icon: '/image/icon_chat.svg' 10 | }, 11 | { 12 | name: '添加朋友', 13 | icon: '/image/icon_add_person.svg' 14 | }, 15 | { 16 | name: '扫一扫', 17 | icon: '/image/icon_scan.svg' 18 | }, 19 | { 20 | name: '收付款', 21 | icon: '/image/icon_pay.svg' 22 | }, 23 | { 24 | name: '帮助与反馈', 25 | icon: '/image/icon_feedback.svg' 26 | } 27 | ], 28 | list_black: [ 29 | { 30 | name: '发起群聊', 31 | icon: '/image/icon_chat_black.svg' 32 | }, 33 | { 34 | name: '添加朋友', 35 | icon: '/image/icon_add_person_black.svg' 36 | }, 37 | { 38 | name: '扫一扫', 39 | icon: '/image/icon_scan_black.svg' 40 | }, 41 | { 42 | name: '收付款', 43 | icon: '/image/icon_pay_black.svg' 44 | }, 45 | { 46 | name: '帮助与反馈', 47 | icon: '/image/icon_feedback_black.svg' 48 | } 49 | ], 50 | }, 51 | onOption (e: any) { 52 | const _that = this 53 | const { mark: { type } } = e 54 | 55 | if (!type) return 56 | 57 | _that.setData({ 58 | [`visible_${type}`]: true 59 | }) 60 | } 61 | }) 62 | -------------------------------------------------------------------------------- /miniprogram/pages/Ripple/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Ripple" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Ripple/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatrixAges/light-design/63031aa4a62c0ceda8802ad5c186778b637e45ff/miniprogram/pages/Ripple/index.less -------------------------------------------------------------------------------- /miniprogram/pages/Ripple/index.ts: -------------------------------------------------------------------------------- 1 | import { blockRight } from 'components/Icon/data' 2 | 3 | Page({ 4 | data: { 5 | blockRight:blockRight,visible_default: false 6 | }, 7 | onOption (e: any) { 8 | const _that = this 9 | const { mark: { type } } = e 10 | 11 | if (!type) return 12 | 13 | _that.setData({ 14 | [`visible_${type}`]: true 15 | }) 16 | }, 17 | click () { 18 | wx.showToast({ 19 | icon: 'none', 20 | title: 'clicked' 21 | }) 22 | } 23 | }) 24 | -------------------------------------------------------------------------------- /miniprogram/pages/SnackBar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "SnackBar" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/SnackBar/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatrixAges/light-design/63031aa4a62c0ceda8802ad5c186778b637e45ff/miniprogram/pages/SnackBar/index.less -------------------------------------------------------------------------------- /miniprogram/pages/SnackBar/index.ts: -------------------------------------------------------------------------------- 1 | import { blockRight } from 'components/Icon/data' 2 | 3 | Page({ 4 | data: { 5 | blockRight:blockRight,visible_default: false 6 | }, 7 | onOption ({ mark: { type } }: any) { 8 | const _that = this 9 | 10 | if (!type) return 11 | 12 | _that.setData({ 13 | [`visible_${type}`]: true 14 | }) 15 | }, 16 | hide ({ mark: { type } }: any) { 17 | const _that = this 18 | 19 | if (!type) return 20 | 21 | _that.setData({ 22 | [`visible_${type}`]: false 23 | }) 24 | } 25 | }) 26 | -------------------------------------------------------------------------------- /miniprogram/pages/Sticky/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Sticky" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Sticky/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatrixAges/light-design/63031aa4a62c0ceda8802ad5c186778b637e45ff/miniprogram/pages/Sticky/index.less -------------------------------------------------------------------------------- /miniprogram/pages/Sticky/index.ts: -------------------------------------------------------------------------------- 1 | Page({}) 2 | -------------------------------------------------------------------------------- /miniprogram/pages/Sticky/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 默认效果 7 | default 8 | 9 | 10 | 11 | 12 | 默认效果 13 | 14 | 15 | 16 | 17 | 18 | 19 | 顶部距离 20 | offsetTop 21 | 22 | 23 | 24 | 25 | 顶部距离 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 指定容器 34 | container 35 | 36 | 37 | 42 | 43 | 47 | 54 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 55 | incididunt 56 | ut labore et dolore magna aliqua. 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /miniprogram/pages/Tab/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Tab" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Tab/index.less: -------------------------------------------------------------------------------- 1 | .content_item { 2 | box-sizing: border-box; 3 | height: 300rpx; 4 | background-color: white; 5 | color: #aaa; 6 | font-size: 26rpx; 7 | } 8 | 9 | .example_items { 10 | .example_item { 11 | .title_wrap { 12 | align-items: center; 13 | flex-direction: column; 14 | 15 | .title { 16 | margin-bottom: 12rpx; 17 | font-weight: normal; 18 | font-size: 24rpx; 19 | } 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /miniprogram/pages/Tab/index.ts: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | visible_default: false, 4 | titles: [ '新闻', '视频', '图片', '军事', '体育', 'NBA', '娱乐', '财经', '科技', '时尚', ], 5 | titles_1: [ '微博热搜榜', '今日头条', '吃瓜' ], 6 | }, 7 | onOption(e: any) { 8 | const _that = this 9 | const { mark: { type } } = e 10 | 11 | if (!type) return 12 | 13 | _that.setData({ 14 | [ `visible_${type}` ]: true 15 | }) 16 | 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /miniprogram/pages/Text/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Text" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Text/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatrixAges/light-design/63031aa4a62c0ceda8802ad5c186778b637e45ff/miniprogram/pages/Text/index.less -------------------------------------------------------------------------------- /miniprogram/pages/Text/index.ts: -------------------------------------------------------------------------------- 1 | Page({}) -------------------------------------------------------------------------------- /miniprogram/pages/Toast/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Toast" 3 | } -------------------------------------------------------------------------------- /miniprogram/pages/Toast/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatrixAges/light-design/63031aa4a62c0ceda8802ad5c186778b637e45ff/miniprogram/pages/Toast/index.less -------------------------------------------------------------------------------- /miniprogram/pages/Toast/index.ts: -------------------------------------------------------------------------------- 1 | import { blockRight } from 'components/Icon/data' 2 | 3 | Page({ 4 | data: { 5 | blockRight:blockRight,visible_default: false, 6 | list: [ 7 | { 8 | name: '朋友圈', 9 | icon: '/image/logo_pengyouquan.svg' 10 | }, 11 | { 12 | name: '微信好友', 13 | icon: '/image/logo_wechat.svg' 14 | }, 15 | { 16 | name: 'QQ空间', 17 | icon: '/image/logo_qzone.svg' 18 | }, 19 | { 20 | name: 'QQ好友', 21 | icon: '/image/logo_qq.svg' 22 | }, 23 | { 24 | name: '微博', 25 | icon: '/image/logo_weibo.svg' 26 | }, 27 | { 28 | name: '钉钉', 29 | icon: '/image/logo_dingding.svg' 30 | }, 31 | { 32 | name: '知乎', 33 | icon: '/image/logo_zhihu.svg' 34 | }, 35 | { 36 | name: '易信', 37 | icon: '/image/logo_yixin.svg' 38 | }, 39 | { 40 | name: 'instagram', 41 | icon: '/image/logo_instagram.svg' 42 | } 43 | ] 44 | }, 45 | onOption (e: any) { 46 | const _that = this 47 | const { mark: { type } } = e 48 | 49 | if (!type) return 50 | 51 | _that.setData({ 52 | [`visible_${type}`]: true 53 | }) 54 | 55 | }, 56 | onAction (e: any) { 57 | console.log(e) 58 | } 59 | }) 60 | -------------------------------------------------------------------------------- /miniprogram/pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /miniprogram/pages/index/index.less: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: transparent; 3 | } 4 | 5 | .menu_items_wrap { 6 | padding: 36px; 7 | 8 | .menu_items { 9 | .menu_item { 10 | margin-bottom: 36px; 11 | 12 | .title_wrap { 13 | .title { 14 | flex: 1; 15 | padding: 12px 0; 16 | color: var(--color_text_sub); 17 | } 18 | 19 | .icon_close { 20 | display: none; 21 | } 22 | } 23 | 24 | .components { 25 | .component { 26 | width: calc(~'(100% - 24rpx) / 2'); 27 | padding: 32rpx; 28 | margin-right: 24rpx; 29 | margin-bottom: 24rpx; 30 | border-top-right-radius: 36rpx; 31 | border-bottom-left-radius: 36rpx; 32 | box-shadow: var(--box_shadow_morphic); 33 | background-color: white; 34 | 35 | &:nth-of-type(2n) { 36 | margin-right: 0; 37 | } 38 | 39 | &.navigator-hover { 40 | opacity: 1; 41 | background-color: white; 42 | box-shadow: var(--box_shadow_morphic_active); 43 | } 44 | 45 | .description { 46 | font-size: 26rpx; 47 | color: var(--color_text_desc); 48 | } 49 | } 50 | } 51 | } 52 | } 53 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/index.ts: -------------------------------------------------------------------------------- 1 | import menu_items from '../../data/menu_items' 2 | 3 | Page({ 4 | data: { 5 | menu_items 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /miniprogram/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | {{item.name}} 10 | 14 | icon_close 20 | 21 | 22 | 23 | 32 | {{it.name}} 33 | {{it.description}} 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /miniprogram/sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /miniprogram/styles/init.less: -------------------------------------------------------------------------------- 1 | page { 2 | padding: 0; 3 | margin: 0; 4 | font-size: 30rpx; 5 | line-height: 1.5; 6 | color: black; 7 | background-color: white; 8 | -webkit-font-smoothing: antialiased; 9 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; 10 | text-rendering: geometricPrecision; 11 | } 12 | 13 | button { 14 | padding: 0; 15 | margin: 0; 16 | border: none; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | box-sizing: border-box; 21 | line-height: 1; 22 | font-weight: normal; 23 | transition: all ease 0.3s; 24 | } 25 | 26 | a { 27 | text-decoration: none; 28 | color: black; 29 | transition: all ease 0.3s; 30 | 31 | &:hover{ 32 | color: black; 33 | transform: scale(1.02); 34 | } 35 | 36 | &:active{ 37 | transform: scale(0.92); 38 | } 39 | } 40 | 41 | .navigator-hover{ 42 | opacity: 1; 43 | } -------------------------------------------------------------------------------- /miniprogram/styles/vars.less: -------------------------------------------------------------------------------- 1 | page { 2 | // variables lightd 3 | --height_button: 88rpx; 4 | --color_main: black; 5 | --color_success: #81C784; 6 | --color_warning: #FFB74D; 7 | --color_error: #E57373; 8 | 9 | // variables website 10 | --width_header: 1000px; 11 | --width_body: 1000px; 12 | --radius_button: 6px; 13 | --radius_normal: 12px; 14 | --radius_bottom: 20px; 15 | --color_border: rgba(245, 245, 245, 0.72); 16 | --color_border_deep: rgba(245, 245, 245, 0.9); 17 | --color_hover: rgba(245, 245, 245, 0.6); 18 | --color_text_main: rgba(0, 0, 0, 0.60); 19 | --color_text_sub: #aaaaaa; 20 | --color_text_desc: rgba(170, 170, 170, 0.72); 21 | --color_background: #fff; 22 | --color_sub_bg: #f7f8f9; 23 | 24 | // variables morphic 25 | --box_shadow_normal: 0 0 18px rgba(55, 84, 170, 0.15); 26 | --box_shadow_morphic: inset 0 0 15px rgba(55, 84, 170, 0), 27 | inset 0 0 20px rgba(255, 255, 255, 0), 28 | 10px 10px 18px rgba(55, 84, 170, 0.15), 29 | -10px -10px 22px white, 30 | inset 0px 0px 4px rgba(255, 255, 255, 0.2); 31 | --box_shadow_morphic_top: inset 0 0 15px rgba(55, 84, 170, 0), 32 | inset 0 0 20px rgba(255, 255, 255, 0), 33 | 10px -10px 18px rgba(55, 84, 170, 0.15), 34 | -10px -10px 22px white, 35 | inset 0px 0px 4px rgba(255, 255, 255, 0.2); 36 | --box_shadow_morphic_active: inset 7px 7px 15px rgba(55, 84, 170, 0.15), inset -7px -7px 20px white, 0px 0px 4px rgba(255, 255, 255, 0.2); 37 | } -------------------------------------------------------------------------------- /miniprogram/utils/util.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | exports.formatTime = void 0; 4 | exports.formatTime = function (date) { 5 | var year = date.getFullYear(); 6 | var month = date.getMonth() + 1; 7 | var day = date.getDate(); 8 | var hour = date.getHours(); 9 | var minute = date.getMinutes(); 10 | var second = date.getSeconds(); 11 | return ([year, month, day].map(formatNumber).join('/') + 12 | ' ' + 13 | [hour, minute, second].map(formatNumber).join(':')); 14 | }; 15 | var formatNumber = function (n) { 16 | var s = n.toString(); 17 | return s[1] ? s : '0' + s; 18 | }; 19 | -------------------------------------------------------------------------------- /miniprogram/utils/util.ts: -------------------------------------------------------------------------------- 1 | export const formatTime = (date: Date) => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return ( 10 | [year, month, day].map(formatNumber).join('/') + 11 | ' ' + 12 | [hour, minute, second].map(formatNumber).join(':') 13 | ) 14 | } 15 | 16 | const formatNumber = (n: number) => { 17 | const s = n.toString() 18 | return s[1] ? s : '0' + s 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "light-design", 3 | "version": "1.0.0", 4 | "description": "Components close to nature.", 5 | "homepage": "lightd.matrixages.com", 6 | "repository": { 7 | "type": "git", 8 | "url": "git@github.com:MatrixAges/light-design.git" 9 | }, 10 | "scripts": { 11 | "build:es5": "webpack --mode production --config webpack/es5/webpack.config.js && cd webpack/es5 && node build", 12 | "dev": "cross-env NODE_ENV=development webpack --mode development --watch --config ./webpack/webpack.config.common.js", 13 | "build": "cross-env NODE_ENV=production webpack --mode production --config ./webpack/webpack.config.common.js", 14 | "ctrl + c": "退出后还会监听，需要手动 kill 进程" 15 | }, 16 | "main": "dist/miniprogram/app.js", 17 | "keywords": [ 18 | "微信小程序", 19 | "微信", 20 | "小程序", 21 | "组件", 22 | "组件库", 23 | "ui", 24 | "component", 25 | "design", 26 | "miniapp", 27 | "wxapp", 28 | "weapp", 29 | "miniprogram" 30 | ], 31 | "author": "Matrixage", 32 | "license": "MIT", 33 | "dependencies": {}, 34 | "devDependencies": { 35 | "@babel/core": "^7.12.3", 36 | "@types/wechat-miniprogram": "^3.3.0", 37 | "babel-loader": "^8.1.0", 38 | "cache-loader": "^4.1.0", 39 | "clean-webpack-plugin": "^3.0.0", 40 | "copy-webpack-plugin": "^6.3.0", 41 | "cross-env": "^7.0.2", 42 | "cssnano": "^4.1.10", 43 | "dotenv-webpack": "^5.1.0", 44 | "file-loader": "^6.2.0", 45 | "filemanager-webpack-plugin": "^3.0.0-beta.0", 46 | "ignore-emit-webpack-plugin": "^2.0.5", 47 | "lerna": "^3.22.1", 48 | "less": "^3.12.2", 49 | "less-loader": "^7.0.2", 50 | "mini-program-webpack-loader": "^1.1.1", 51 | "miniprogram-api-typings": "3.1.3", 52 | "postcss": "^8.1.6", 53 | "postcss-loader": "^4.0.4", 54 | "purgecss-webpack-plugin": "^3.0.0", 55 | "ts-loader": "^8.0.10", 56 | "typescript": "4.0.3", 57 | "webpack": "^4.46.0", 58 | "webpack-bundle-analyzer": "^4.1.0", 59 | "webpack-cli": "^4.5.0", 60 | "webpack-merge": "^5.3.0" 61 | } 62 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strictNullChecks": true, 4 | "noImplicitAny": true, 5 | "module": "ES2020", 6 | "target": "ES5", 7 | "allowJs": true, 8 | "experimentalDecorators": true, 9 | "noImplicitThis": true, 10 | "noImplicitReturns": true, 11 | "alwaysStrict": true, 12 | "inlineSourceMap": false, 13 | "inlineSources": false, 14 | "noFallthroughCasesInSwitch": true, 15 | "noUnusedLocals": true, 16 | "noUnusedParameters": true, 17 | "strict": true, 18 | "removeComments": true, 19 | "pretty": false, 20 | "strictPropertyInitialization": true, 21 | "skipLibCheck": true, 22 | "skipDefaultLibCheck": true, 23 | "noStrictGenericChecks": true, 24 | "lib": [ 25 | "es5", 26 | "es2016" 27 | ], 28 | "typeRoots": [ 29 | "./typings" 30 | ], 31 | "baseUrl": "./", 32 | "paths": { 33 | "@/*": [ 34 | "miniprogram/*" 35 | ], 36 | "components/*": [ 37 | "miniprogram/components/*" 38 | ], 39 | "page_components/*": [ 40 | "miniprogram/page_components/*" 41 | ] 42 | }, 43 | }, 44 | "include": [ 45 | "**/*.ts" 46 | ], 47 | "exclude": [ 48 | "node_modules" 49 | ] 50 | } -------------------------------------------------------------------------------- /typings/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | interface IAppOption { 4 | globalData: { 5 | userInfo?: WechatMiniprogram.UserInfo 6 | } 7 | userInfoReadyCallback?: WechatMiniprogram.GetUserInfoSuccessCallback 8 | } 9 | -------------------------------------------------------------------------------- /webpack/es5/build.js: -------------------------------------------------------------------------------- 1 | const child_process = require('child_process') 2 | 3 | child_process.exec('tsc --project ./compile.tsconfig.json') 4 | -------------------------------------------------------------------------------- /webpack/es5/compile.tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strictNullChecks": true, 4 | "noImplicitAny": true, 5 | "module": "ES2020", 6 | "target": "ES5", 7 | "allowJs": true, 8 | "experimentalDecorators": true, 9 | "noImplicitThis": true, 10 | "noImplicitReturns": true, 11 | "alwaysStrict": true, 12 | "inlineSourceMap": false, 13 | "inlineSources": false, 14 | "noFallthroughCasesInSwitch": true, 15 | "noUnusedLocals": true, 16 | "noUnusedParameters": true, 17 | "strict": true, 18 | "removeComments": true, 19 | "pretty": true, 20 | "strictPropertyInitialization": true, 21 | "skipLibCheck": true, 22 | "skipDefaultLibCheck": true, 23 | "noStrictGenericChecks": true, 24 | "lib": [ 25 | "es5", 26 | "es2016" 27 | ], 28 | "baseUrl": "./", 29 | "outDir": "../../miniprogram/components_es5/components" 30 | }, 31 | "include": [ 32 | "../../miniprogram/components" 33 | ] 34 | } -------------------------------------------------------------------------------- /webpack/es5/loaders.js: -------------------------------------------------------------------------------- 1 | const { paths, fileLoader } = require('../utils') 2 | 3 | module.exports = [ 4 | { 5 | test: /\.ts$/, 6 | exclude: paths.node_modules, 7 | use: [ 'cache-loader', 'ts-loader?transpileOnly' ] 8 | }, 9 | { 10 | test: /.wxml/, 11 | use: [ fileLoader('[path][name].[ext]'), 'mini-program-webpack-loader' ] 12 | }, 13 | { 14 | test: /\.wxss$/, 15 | use: [ fileLoader('[path][name].[ext]'), 'mini-program-webpack-loader' ] 16 | }, 17 | { 18 | test: /\.less$/, 19 | use: [ fileLoader('[path][name].wxss'), 'less-loader' ] 20 | }, 21 | { 22 | test: /.wxs$/, 23 | use: [ fileLoader('[path][name].[ext]'), 'babel-loader', 'mini-program-webpack-loader' ] 24 | }, 25 | { 26 | test: /\.json$/, 27 | type: 'javascript/auto', 28 | use: [ fileLoader('[path][name].[ext]') ] 29 | } 30 | ] 31 | -------------------------------------------------------------------------------- /webpack/es5/plugins.js: -------------------------------------------------------------------------------- 1 | const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin') 2 | const { CleanWebpackPlugin } = require('clean-webpack-plugin') 3 | const MiniProgramPlugin = require('mini-program-webpack-loader').plugin 4 | const CopyWebpackPlugin = require('copy-webpack-plugin') 5 | const FileManagerPlugin = require('filemanager-webpack-plugin') 6 | const { resolve } = require('../utils') 7 | 8 | module.exports = [ 9 | new IgnoreEmitPlugin('.DS_Store'), 10 | new CleanWebpackPlugin(), 11 | new MiniProgramPlugin({ 12 | extfile: false 13 | }), 14 | new CopyWebpackPlugin({ 15 | patterns: [ 16 | { 17 | from: resolve('miniprogram/components/**/*/package.json') 18 | }, 19 | { 20 | from: resolve('miniprogram/components/**/*/readme.md') 21 | } 22 | ] 23 | }), 24 | new FileManagerPlugin({ 25 | runTasksInSeries: true, 26 | events: { 27 | onEnd: { 28 | delete: [ 29 | resolve('miniprogram/components_es5/pages'), 30 | resolve('miniprogram/components_es5/page_components'), 31 | resolve('miniprogram/components_es5/app.js'), 32 | resolve('miniprogram/components_es5/app.json'), 33 | resolve('miniprogram/components_es5/app.wxss'), 34 | resolve('miniprogram/components_es5/webpack-require.js'), 35 | resolve('miniprogram/components_es5/**/*.js') 36 | ] 37 | } 38 | } 39 | }) 40 | ] 41 | -------------------------------------------------------------------------------- /webpack/es5/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { paths } = require('../utils') 2 | const resolve = require('../resolve') 3 | const loaders = require('./loaders') 4 | const plugins = require('./plugins') 5 | 6 | module.exports = { 7 | context: paths.miniprogram, 8 | entry: paths.app_json, 9 | output: { path: paths.components_es5 }, 10 | resolve: resolve, 11 | module: { rules: loaders }, 12 | plugins: plugins, 13 | optimization: { 14 | minimize: false 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /webpack/loaders.js: -------------------------------------------------------------------------------- 1 | const { paths, fileLoader } = require('./utils') 2 | 3 | module.exports = [ 4 | { 5 | test: /\.ts$/, 6 | exclude: paths.node_modules, 7 | use: [ 'cache-loader', 'ts-loader?transpileOnly' ] 8 | }, 9 | { 10 | test: /.wxml/, 11 | use: [ fileLoader('[path][name].[ext]'), 'mini-program-webpack-loader' ] 12 | }, 13 | { 14 | test: /\.wxss$/, 15 | use: [ fileLoader('[path][name].[ext]'), 'mini-program-webpack-loader' ] 16 | }, 17 | { 18 | test: /\.less$/, 19 | use: [ 20 | fileLoader('[path][name].wxss'), 21 | { 22 | loader: 'postcss-loader', 23 | options: { postcssOptions: { plugins: [ [ 'cssnano' ] ] } } 24 | }, 25 | 'less-loader' 26 | ] 27 | }, 28 | { 29 | test: /.wxs$/, 30 | use: [ fileLoader('[path][name].[ext]'), 'babel-loader', 'mini-program-webpack-loader' ] 31 | }, 32 | { 33 | test: /\.json$/, 34 | type: 'javascript/auto', 35 | use: [ fileLoader('[path][name].[ext]') ] 36 | } 37 | ] 38 | -------------------------------------------------------------------------------- /webpack/plugins.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const MiniProgramPlugin = require('mini-program-webpack-loader').plugin 3 | const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin') 4 | const CopyWebpackPlugin = require('copy-webpack-plugin') 5 | const { resolve } = require('./utils') 6 | 7 | module.exports = [ 8 | new IgnoreEmitPlugin('.DS_Store'), 9 | new MiniProgramPlugin({ 10 | extfile: false 11 | }), 12 | new CopyWebpackPlugin({ 13 | patterns: [ 14 | { 15 | from: path.posix.join( 16 | path.resolve(__dirname, '../miniprogram').replace(/\\/g, '/'), 17 | '/**/*.(svg|png|jpg|jpeg|gif)' 18 | ), 19 | to: '[path][name].[ext]' 20 | }, 21 | { 22 | from: resolve('miniprogram/sitemap.json'), 23 | to: resolve('dist/sitemap.json') 24 | } 25 | ] 26 | }) 27 | ] 28 | -------------------------------------------------------------------------------- /webpack/resolve.js: -------------------------------------------------------------------------------- 1 | const { paths } = require('./utils') 2 | 3 | module.exports = { 4 | extensions: [ '.ts', '.js', '.json' ], 5 | alias: { 6 | '@': paths.miniprogram, 7 | components: paths.components, 8 | page_components: paths.page_components 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /webpack/utils.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const resolve = (file) => path.resolve(__dirname, '../', file) 4 | const fileLoader = (name) => ({ 5 | loader: 'file-loader', 6 | options: { 7 | publicPath: '', 8 | context: paths.miniprogram || paths.root, 9 | name 10 | } 11 | }) 12 | 13 | const is_dev = process.env.NODE_ENV === 'development' 14 | const paths = { 15 | dist: resolve('dist'), 16 | node_modules: resolve('node_modules'), 17 | miniprogram: resolve('miniprogram'), 18 | app_json: resolve('miniprogram/app.json'), 19 | dist_app_json: resolve('dist/app.json'), 20 | components: resolve('miniprogram/components'), 21 | page_components: resolve('miniprogram/page_components'), 22 | components_es5: resolve('miniprogram/components_es5') 23 | } 24 | 25 | module.exports = { 26 | resolve, 27 | fileLoader, 28 | is_dev, 29 | paths 30 | } -------------------------------------------------------------------------------- /webpack/webpack.config.common.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const resolve = require('./resolve') 3 | const loaders = require('./loaders') 4 | const plugins = require('./plugins') 5 | const devConfig = require('./webpack.config.dev') 6 | const prodConfig = require('./webpack.config.prod') 7 | const { is_dev, paths } = require('./utils') 8 | 9 | //@ts-ignore 10 | global.context = paths.miniprogram 11 | 12 | module.exports = merge(is_dev ? devConfig : prodConfig, { 13 | context: paths.miniprogram, 14 | entry: paths.app_json, 15 | output: { path: paths.dist }, 16 | resolve: resolve, 17 | module: { rules: loaders }, 18 | plugins: plugins 19 | }) 20 | -------------------------------------------------------------------------------- /webpack/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | target: 'node', 6 | devtool: false, 7 | watchOptions: { 8 | ignored: /node_modules|dist/, 9 | poll: 1000 10 | }, 11 | optimization: { 12 | splitChunks: { 13 | cacheGroups: { 14 | commons: { 15 | name: 'commons', 16 | chunks: 'initial', 17 | minChunks: 2 18 | } 19 | } 20 | } 21 | }, 22 | plugins: [ 23 | new webpack.DefinePlugin({ 24 | PRODUCTION: JSON.stringify(process.env.NODE_ENV === 'development') 25 | }) 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /webpack/webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require('clean-webpack-plugin') 2 | const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') 3 | const webpack = require('webpack') 4 | 5 | module.exports = { 6 | mode: 'production', 7 | target: 'node', 8 | devtool: false, 9 | optimization: { 10 | minimize: true, 11 | splitChunks: { 12 | cacheGroups: { 13 | commons: { 14 | name: 'commons', 15 | chunks: 'initial', 16 | minChunks: 2 17 | } 18 | } 19 | } 20 | }, 21 | plugins: [ 22 | new CleanWebpackPlugin(), 23 | new BundleAnalyzerPlugin(), 24 | new webpack.DefinePlugin({ 25 | PRODUCTION: JSON.stringify(process.env.NODE_ENV === 'production') 26 | }) 27 | ] 28 | } 29 | --------------------------------------------------------------------------------