├── .gitignore ├── CHANGELOG.md ├── DIFF.md ├── LICENSE.txt ├── README.md ├── dist ├── app.js ├── app.json ├── app.wxss ├── example │ ├── actionsheet │ │ ├── actionsheet.js │ │ ├── actionsheet.wxml │ │ └── actionsheet.wxss │ ├── article │ │ ├── article.js │ │ ├── article.wxml │ │ └── article.wxss │ ├── badge │ │ ├── badge.js │ │ └── badge.wxml │ ├── button │ │ ├── button.js │ │ ├── button.wxml │ │ └── button.wxss │ ├── dialog │ │ ├── dialog.js │ │ ├── dialog.wxml │ │ └── dialog.wxss │ ├── flex │ │ ├── flex.js │ │ ├── flex.wxml │ │ └── flex.wxss │ ├── footer │ │ ├── footer.js │ │ ├── footer.wxml │ │ └── footer.wxss │ ├── gallery │ │ ├── gallery.js │ │ └── gallery.wxml │ ├── grid │ │ ├── grid.js │ │ └── grid.wxml │ ├── icons │ │ ├── icons.js │ │ ├── icons.wxml │ │ └── icons.wxss │ ├── images │ │ ├── base64.js │ │ ├── icon_footer.png │ │ ├── icon_footer_link.png │ │ ├── icon_intro.png │ │ ├── icon_nav_feedback.png │ │ ├── icon_nav_form.png │ │ ├── icon_nav_nav.png │ │ ├── icon_nav_search.png │ │ ├── icon_nav_special.png │ │ ├── icon_nav_widget.png │ │ ├── icon_nav_z-index.png │ │ ├── icon_tabbar.png │ │ ├── logo.png │ │ ├── pic_160.png │ │ ├── pic_article.png │ │ └── vcode.jpg │ ├── index.js │ ├── index.wxml │ ├── index.wxss │ ├── input │ │ ├── input.js │ │ └── input.wxml │ ├── list │ │ ├── list.js │ │ └── list.wxml │ ├── loadmore │ │ ├── loadmore.js │ │ ├── loadmore.wxml │ │ └── loadmore.wxss │ ├── msg │ │ ├── msg.js │ │ ├── msg.wxml │ │ ├── msg.wxss │ │ ├── msg_fail.js │ │ ├── msg_fail.wxml │ │ ├── msg_fail.wxss │ │ ├── msg_success.js │ │ ├── msg_success.wxml │ │ └── msg_success.wxss │ ├── navbar │ │ ├── navbar.js │ │ ├── navbar.wxml │ │ └── navbar.wxss │ ├── panel │ │ ├── panel.js │ │ └── panel.wxml │ ├── picker │ │ ├── picker.js │ │ ├── picker.wxml │ │ └── picker.wxss │ ├── preview │ │ ├── preview.js │ │ ├── preview.wxml │ │ └── preview.wxss │ ├── progress │ │ ├── progress.js │ │ ├── progress.wxml │ │ └── progress.wxss │ ├── searchbar │ │ ├── searchbar.js │ │ ├── searchbar.wxml │ │ └── searchbar.wxss │ ├── slider │ │ ├── slider.js │ │ ├── slider.wxml │ │ └── slider.wxss │ ├── tabbar │ │ ├── tabbar.js │ │ └── tabbar.wxml │ ├── toast │ │ ├── toast.js │ │ ├── toast.wxml │ │ └── toast.wxss │ └── uploader │ │ ├── uploader.js │ │ └── uploader.wxml └── style │ ├── base │ ├── fn.wxss │ ├── mixin │ │ ├── setArrow.wxss │ │ ├── setOnepx.wxss │ │ └── text.wxss │ ├── reset.wxss │ └── variable │ │ ├── color.wxss │ │ ├── global.wxss │ │ ├── weui-button.wxss │ │ ├── weui-cell.wxss │ │ ├── weui-dialog.wxss │ │ ├── weui-grid.wxss │ │ ├── weui-msg.wxss │ │ └── weui-progress.wxss │ ├── weui.wxss │ └── widget │ ├── weui-agree │ └── weui-agree.wxss │ ├── weui-animate │ └── weui-animate.wxss │ ├── weui-button │ └── weui-button.wxss │ ├── weui-cell │ ├── weui-access.wxss │ ├── weui-cell.wxss │ ├── weui-check.wxss │ ├── weui-form.wxss │ ├── weui-form │ │ ├── weui-form-preview.wxss │ │ ├── weui-form_common.wxss │ │ ├── weui-select.wxss │ │ └── weui-vcode.wxss │ ├── weui-switch.wxss │ └── weui-uploader.wxss │ ├── weui-flex │ └── weui-flex.wxss │ ├── weui-footer │ └── weui-footer.wxss │ ├── weui-grid │ └── weui-grid.wxss │ ├── weui-loading │ └── weui-loading.wxss │ ├── weui-media-box │ └── weui-media-box.wxss │ ├── weui-page │ ├── weui-article.wxss │ └── weui-msg.wxss │ ├── weui-panel │ └── weui-panel.wxss │ ├── weui-progress │ └── weui-progress.wxss │ ├── weui-searchbar │ └── weui-searchbar.wxss │ ├── weui-tab │ ├── weui-navbar.wxss │ └── weui-tab.wxss │ └── weui-tips │ ├── weui-badge.wxss │ └── weui-loadmore.wxss ├── gulpfile.js ├── package.json └── src ├── app.js ├── app.json ├── app.wxss ├── example ├── actionsheet │ ├── actionsheet.js │ ├── actionsheet.wxml │ └── actionsheet.wxss ├── article │ ├── article.js │ ├── article.wxml │ └── article.wxss ├── badge │ ├── badge.js │ └── badge.wxml ├── button │ ├── button.js │ ├── button.wxml │ └── button.wxss ├── dialog │ ├── dialog.js │ ├── dialog.wxml │ └── dialog.wxss ├── flex │ ├── flex.js │ ├── flex.wxml │ └── flex.wxss ├── footer │ ├── footer.js │ ├── footer.wxml │ └── footer.wxss ├── gallery │ ├── gallery.js │ └── gallery.wxml ├── grid │ ├── grid.js │ └── grid.wxml ├── icons │ ├── icons.js │ ├── icons.wxml │ └── icons.wxss ├── images │ ├── base64.js │ ├── icon_footer.png │ ├── icon_footer_link.png │ ├── icon_intro.png │ ├── icon_nav_feedback.png │ ├── icon_nav_form.png │ ├── icon_nav_nav.png │ ├── icon_nav_search.png │ ├── icon_nav_special.png │ ├── icon_nav_widget.png │ ├── icon_nav_z-index.png │ ├── icon_tabbar.png │ ├── logo.png │ ├── pic_160.png │ ├── pic_article.png │ └── vcode.jpg ├── index.js ├── index.wxml ├── index.wxss ├── input │ ├── input.js │ └── input.wxml ├── list │ ├── list.js │ └── list.wxml ├── loadmore │ ├── loadmore.js │ ├── loadmore.wxml │ └── loadmore.wxss ├── msg │ ├── msg.js │ ├── msg.wxml │ ├── msg.wxss │ ├── msg_fail.js │ ├── msg_fail.wxml │ ├── msg_fail.wxss │ ├── msg_success.js │ ├── msg_success.wxml │ └── msg_success.wxss ├── navbar │ ├── navbar.js │ ├── navbar.wxml │ └── navbar.wxss ├── panel │ ├── panel.js │ └── panel.wxml ├── picker │ ├── picker.js │ ├── picker.wxml │ └── picker.wxss ├── preview │ ├── preview.js │ ├── preview.wxml │ └── preview.wxss ├── progress │ ├── progress.js │ ├── progress.wxml │ └── progress.wxss ├── searchbar │ ├── searchbar.js │ ├── searchbar.wxml │ └── searchbar.wxss ├── slider │ ├── slider.js │ ├── slider.wxml │ └── slider.wxss ├── tabbar │ ├── tabbar.js │ └── tabbar.wxml ├── toast │ ├── toast.js │ ├── toast.wxml │ └── toast.wxss └── uploader │ ├── uploader.js │ └── uploader.wxml └── style ├── base ├── fn.wxss ├── mixin │ ├── setArrow.wxss │ ├── setOnepx.wxss │ └── text.wxss ├── reset.wxss └── variable │ ├── color.wxss │ ├── global.wxss │ ├── weui-button.wxss │ ├── weui-cell.wxss │ ├── weui-dialog.wxss │ ├── weui-grid.wxss │ ├── weui-msg.wxss │ └── weui-progress.wxss ├── weui.wxss └── widget ├── weui-agree └── weui-agree.wxss ├── weui-animate └── weui-animate.wxss ├── weui-button └── weui-button.wxss ├── weui-cell ├── weui-access.wxss ├── weui-cell.wxss ├── weui-check.wxss ├── weui-form.wxss ├── weui-form │ ├── weui-form-preview.wxss │ ├── weui-form_common.wxss │ ├── weui-select.wxss │ └── weui-vcode.wxss ├── weui-switch.wxss └── weui-uploader.wxss ├── weui-flex └── weui-flex.wxss ├── weui-footer └── weui-footer.wxss ├── weui-grid └── weui-grid.wxss ├── weui-loading └── weui-loading.wxss ├── weui-media-box └── weui-media-box.wxss ├── weui-page ├── weui-article.wxss └── weui-msg.wxss ├── weui-panel └── weui-panel.wxss ├── weui-progress └── weui-progress.wxss ├── weui-searchbar └── weui-searchbar.wxss ├── weui-tab ├── weui-navbar.wxss └── weui-tab.wxss └── weui-tips ├── weui-badge.wxss └── weui-loadmore.wxss /.gitignore: -------------------------------------------------------------------------------- 1 | *swp 2 | *~ 3 | .idea 4 | node_modules 5 | npm-debug.log -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | #### v 1.1.1 (2017-01-18) 2 | 3 | - 【同步weui】 增加扩展类.weui-loading_transparent 4 | - 【同步weui】 更新普通警告图标颜色 5 | - 【修复】 fix navbar的activeIndex #20 6 | 7 | #### v 1.1.0 (2016-12-06) 8 | 9 | - 【优化】 跟随weui的版本号 10 | - 【优化】 loading的base64 11 | - 【增强】 增加组件 badge 徽章 12 | 13 | #### v0.1.1 (2016-11-10) 14 | 15 | - 【修复】 navbar的样式按小程序的规范来重新编写 16 | 17 | #### v0.1.0 (2016-11-10) 18 | 19 | 初始发布 20 | 21 | - Initial release -------------------------------------------------------------------------------- /DIFF.md: -------------------------------------------------------------------------------- 1 | # 和WeUI的用法差异 2 | 3 | ### 不支持相邻兄弟选择器 -> `after` someone 4 | 5 | #### 如：`.weui-cells__title + .weui-cells` -> `.weui-cells_after-title` 6 | Old 7 | ```html 8 |
带说明的列表项
9 |
10 | ``` 11 | 12 | New 13 | ```html 14 | 带说明的列表项 15 | 16 | ``` 17 | 18 | 19 | ### 不支持级联选择器 -> `in` someone 20 | 21 | #### 如：`.weui-cell_access .weui-cell__ft` -> `weui-cell__ft_in-access` 22 | Old 23 | ```html 24 |
25 |
26 |
27 | ``` 28 | 29 | New 30 | ```html 31 | 32 | 33 | 34 | ``` 35 | 36 | #### 如：`.weui-cells_radio .weui-cell__ft` -> `.weui-cell__ft_in-radio` 37 | Old 38 | ```html 39 |
40 | 45 |
46 | ``` 47 | 48 | New 49 | ```html 50 | 51 | 56 | 57 | ``` 58 | 59 | 60 | ### icon 61 | 采用小程序的icon。因为原生的`icon`的`font-size:0`，所以需要新增一些类来控制icon的边距，如`.weui-icon-radio`、`.weui-icon-checkbox_circle`等，具体看代码。（当然，你也可以不加。） 62 | 63 | 64 | ### button 65 | 采用小程序的button，`.weui-btn`则用于控制间距 66 | 67 | Old 68 | ```html 69 | 页面主操作 Normal 70 | ``` 71 | 72 | New 73 | ```html 74 | 75 | ``` 76 | 77 | 78 | ### `weui-cell_access`的`:active` 79 | 由`navigator`的`hover-class`来指定类`weui-cell_active`来控制 80 | 81 | New 82 | ```html 83 | 84 | cell standard 85 | 说明文字 86 | 87 | ``` 88 | 89 | 90 | ### `.weui-input` 91 | 因为采用小程序的input，键盘弹起高度有所区别，所以实现上也有所改变，需要增加`.weui-cell_input`的扩展类 92 | 93 | Old 94 | ```html 95 |
96 |
97 | 98 |
99 |
100 | ``` 101 | 102 | New 103 | ```html 104 | 105 | 106 | 107 | 108 | 109 | ``` -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Tencent is pleased to support the open source community by making WeUI-WXSS available. 2 | 3 | Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 4 | 5 | If you have downloaded a copy of the WeUI-WXSS binary from Tencent, please note that the WeUI-WXSS 6 | binary is licensed under the MIT License. 7 | 8 | If you have downloaded a copy of the WeUI-WXSS source code from Tencent, please note that 9 | WeUI-WXSS source code is licensed under the MIT License, except for the third-party components 10 | listed below which are subject to different license terms. Your integration of WeUI-WXSS into your 11 | own projects may require compliance with the MIT License, as well as the other licenses applicable 12 | to the third-party components included within WeUI-WXSS. 13 | 14 | A copy of the MIT License is included in this file. 15 | 16 | 17 | 18 | Other dependencies and licenses: 19 | 20 | Open Source Software Licensed Under the MIT License: 21 | ---------------------------------------------------------------------------------------- 22 | 1. autoprefixer 6.3.1 23 | Copyright 2013 Andrey Sitnik 24 | 25 | 2. gulp 3.8.10 26 | Copyright (c) 2014 Fractal contact@wearefractal.com 27 | 28 | 3. gulp-less 3.0.2 29 | Copyright (c) 2015 Plus 3 Network dev@plus3network.com 30 | 31 | 4. gulp-postcss 6.0.1 32 | Copyright (c) 2014 Andrey Kuzmin 33 | 34 | 5. gulp-rename 1.2.2 35 | Copyright 2013 Hector Guillermo Parra Alvarez 36 | 37 | 38 | Terms of the MIT License: 39 | -------------------------------------------------------------------- 40 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 41 | associated documentation files (the "Software"), to deal in the Software without restriction, 42 | including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, 43 | and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, 44 | subject to the following conditions: 45 | 46 | The above copyright notice and this permission notice shall be included in all copies or substantial 47 | portions of the Software. 48 | 49 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 50 | OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 51 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 52 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 53 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 54 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 55 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | WeUI for 小程序 为微信小程序量身设计 2 | ===== 3 | 4 | [![npm version](https://img.shields.io/npm/v/weui-wxss.svg)](https://www.npmjs.org/package/weui-wxss) 5 | [![Gitter](https://badges.gitter.im/weui/weui.svg)](https://gitter.im/weui/weui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 6 | [![QQ](http://pub.idqqimg.com/wpa/images/group.png)](http://jq.qq.com/?_wv=1027&k=413HLfV) 7 | 8 | ## 概述 9 | 10 | [WeUI](https://github.com/weui/weui) 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含`button`、`cell`、`dialog`、 `progress`、 `toast`、`article`、`actionsheet`、`icon`等各式元素。 11 | 12 | 13 | ## 预览 14 | 15 | 用[微信web开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)打开`dist`目录（请注意，是dist目录，不是整个项目） 16 | 17 | preview 18 | 19 | 20 | ## 使用 21 | 22 | - 组件的wxml结构请看`dist/example/`下的组件 23 | - 样式文件可直接引用`dist/style/weui.wxss`，或者单独引用`dist/style/widget`下的组件的`wxss` 24 | 25 | 26 | ## 文档 27 | 28 | WeUI 视觉标准参考 [weui-design](https://github.com/weui/weui-design) 29 | 30 | 31 | ## License 32 | The MIT License(http://opensource.org/licenses/MIT) 33 | 34 | 请自由地享受和参与开源 35 | 36 | 37 | ## 贡献 38 | 39 | 如果你有好的意见或建议，欢迎给我们提issue或pull request。 40 | -------------------------------------------------------------------------------- /dist/app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch: function () { 3 | console.log('App Launch') 4 | }, 5 | onShow: function () { 6 | console.log('App Show') 7 | }, 8 | onHide: function () { 9 | console.log('App Hide') 10 | }, 11 | globalData: { 12 | hasLogin: false 13 | } 14 | }); -------------------------------------------------------------------------------- /dist/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "example/index", 4 | 5 | "example/button/button", 6 | "example/list/list", 7 | "example/input/input", 8 | "example/slider/slider", 9 | "example/uploader/uploader", 10 | 11 | "example/article/article", 12 | "example/badge/badge", 13 | "example/flex/flex", 14 | "example/footer/footer", 15 | "example/gallery/gallery", 16 | "example/grid/grid", 17 | "example/icons/icons", 18 | "example/loadmore/loadmore", 19 | "example/panel/panel", 20 | "example/preview/preview", 21 | "example/progress/progress", 22 | 23 | "example/actionsheet/actionsheet", 24 | "example/dialog/dialog", 25 | "example/msg/msg", 26 | "example/msg/msg_success", 27 | "example/msg/msg_fail", 28 | "example/picker/picker", 29 | "example/toast/toast", 30 | 31 | "example/navbar/navbar", 32 | "example/tabbar/tabbar", 33 | 34 | "example/searchbar/searchbar" 35 | ], 36 | "window": { 37 | "navigationBarTextStyle": "black", 38 | "navigationBarTitleText": "WeUI for 小程序", 39 | "navigationBarBackgroundColor": "#f8f8f8", 40 | "backgroundColor": "#f8f8f8" 41 | }, 42 | "networkTimeout": { 43 | "request": 10000, 44 | "connectSocket": 10000, 45 | "uploadFile": 10000, 46 | "downloadFile": 10000 47 | }, 48 | "debug": true 49 | } -------------------------------------------------------------------------------- /dist/app.wxss: -------------------------------------------------------------------------------- 1 | @import 'style/weui.wxss'; 2 | 3 | page{ 4 | background-color: #F8F8F8; 5 | font-size: 16px; 6 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; 7 | } 8 | .page__hd { 9 | padding: 40px; 10 | } 11 | .page__bd { 12 | padding-bottom: 40px; 13 | } 14 | .page__bd_spacing { 15 | padding-left: 15px; 16 | padding-right: 15px; 17 | } 18 | 19 | .page__ft{ 20 | padding-bottom: 10px; 21 | text-align: center; 22 | } 23 | 24 | .page__title { 25 | text-align: left; 26 | font-size: 20px; 27 | font-weight: 400; 28 | } 29 | 30 | .page__desc { 31 | margin-top: 5px; 32 | color: #888888; 33 | text-align: left; 34 | font-size: 14px; 35 | } -------------------------------------------------------------------------------- /dist/example/actionsheet/actionsheet.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | open: function(){ 3 | wx.showActionSheet({ 4 | itemList: ['A', 'B', 'C'], 5 | success: function(res) { 6 | if (!res.cancel) { 7 | console.log(res.tapIndex) 8 | } 9 | } 10 | }); 11 | } 12 | }); -------------------------------------------------------------------------------- /dist/example/actionsheet/actionsheet.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | ActionSheet 4 | 弹出式菜单，采用小程序原生的actionsheet 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /dist/example/actionsheet/actionsheet.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /dist/example/article/article.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /dist/example/article/article.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Article 4 | 文章 5 | 6 | 7 | 8 | 大标题 9 | 10 | 章标题 11 | 12 | 1.1 节标题 13 | 14 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 15 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 16 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 17 | consequat. 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 1.2 节标题 26 | 27 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 28 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 29 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 30 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /dist/example/article/article.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } 4 | image{ 5 | margin: 4px 0; 6 | } -------------------------------------------------------------------------------- /dist/example/badge/badge.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /dist/example/badge/badge.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Badge 4 | 徽章 5 | 6 | 7 | 8 | 新消息提示跟摘要信息后，统一在列表右侧 9 | 10 | 11 | 单行列表 12 | 13 | 详细信息 14 | 15 | 16 | 17 | 18 | 19 | 未读数红点跟在主题信息后，统一在列表左侧 20 | 21 | 22 | 23 | 24 | 8 25 | 26 | 27 | 联系人名称 28 | 摘要信息 29 | 30 | 31 | 32 | 33 | 单行列表 34 | 8 35 | 36 | 37 | 38 | 39 | 40 | 单行列表 41 | 8 42 | 43 | 详细信息 44 | 45 | 46 | 47 | 单行列表 48 | New 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /dist/example/button/button.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /dist/example/button/button.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Button 4 | 按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /dist/example/button/button.wxss: -------------------------------------------------------------------------------- 1 | .button-sp-area{ 2 | margin: 0 auto; 3 | padding-top: 15px; 4 | width: 60%; 5 | } 6 | .mini-btn{ 7 | margin-right: 5px; 8 | } -------------------------------------------------------------------------------- /dist/example/dialog/dialog.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | openConfirm: function () { 3 | wx.showModal({ 4 | title: '弹窗标题', 5 | content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内', 6 | confirmText: "主操作", 7 | cancelText: "辅助操作", 8 | success: function (res) { 9 | console.log(res); 10 | if (res.confirm) { 11 | console.log('用户点击主操作') 12 | }else{ 13 | console.log('用户点击辅助操作') 14 | } 15 | } 16 | }); 17 | }, 18 | openAlert: function () { 19 | wx.showModal({ 20 | content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内', 21 | showCancel: false, 22 | success: function (res) { 23 | if (res.confirm) { 24 | console.log('用户点击确定') 25 | } 26 | } 27 | }); 28 | } 29 | }); -------------------------------------------------------------------------------- /dist/example/dialog/dialog.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Dialog 4 | 对话框，采用小程序原生的modal 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /dist/example/dialog/dialog.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /dist/example/flex/flex.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /dist/example/flex/flex.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Flex 4 | Flex布局 5 | 6 | 7 | 8 | weui 9 | 10 | 11 | weui 12 | weui 13 | 14 | 15 | weui 16 | weui 17 | weui 18 | 19 | 20 | weui 21 | weui 22 | weui 23 | weui 24 | 25 | 26 | weui 27 | weui 28 | weui 29 | 30 | 31 | -------------------------------------------------------------------------------- /dist/example/flex/flex.wxss: -------------------------------------------------------------------------------- 1 | .placeholder{ 2 | margin: 5px; 3 | padding: 0 10px; 4 | text-align: center; 5 | background-color: #EBEBEB; 6 | height: 2.3em; 7 | line-height: 2.3em; 8 | color: #cfcfcf; 9 | } -------------------------------------------------------------------------------- /dist/example/footer/footer.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /dist/example/footer/footer.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Footer 4 | 页脚 5 | 6 | 7 | 8 | Copyright © 2008-2016 weui.io 9 | 10 | 11 | 12 | 13 | 14 | 底部链接 15 | 16 | Copyright © 2008-2016 weui.io 17 | 18 | 19 | 20 | 21 | 22 | 底部链接 23 | 底部链接 24 | 25 | Copyright © 2008-2016 weui.io 26 | 27 | 28 | 29 | 30 | 31 | WeUI首页 32 | 33 | Copyright © 2008-2016 weui.io 34 | 35 | 36 | -------------------------------------------------------------------------------- /dist/example/footer/footer.wxss: -------------------------------------------------------------------------------- 1 | /* 作为展示用的样式 */ 2 | 3 | .weui-footer{ 4 | margin-bottom: 50px; 5 | } 6 | .weui-footer_fixed-bottom{ 7 | margin-bottom: 0; 8 | } -------------------------------------------------------------------------------- /dist/example/gallery/gallery.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /dist/example/gallery/gallery.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Gallery 4 | 画廊，建议采用小程序原生的wx.previewImage来实现。详情请看小程序文档。 5 | 6 | -------------------------------------------------------------------------------- /dist/example/grid/grid.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | grids: [0, 1, 2, 3, 4, 5, 6, 7, 8] 4 | } 5 | }); -------------------------------------------------------------------------------- /dist/example/grid/grid.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Grid 4 | 九宫格 5 | 6 | 7 | 8 | 9 | 10 | 11 | Grid 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /dist/example/icons/icons.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /dist/example/icons/icons.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Icons 4 | 图标 5 | 6 | 7 | 8 | 9 | 10 | 成功 11 | 用于表示操作顺利达成 12 | 13 | 14 | 15 | 16 | 17 | 提示 18 | 用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息 19 | 20 | 21 | 22 | 23 | 24 | 普通警告 25 | 用于表示操作后将引起一定后果的情况 26 | 27 | 28 | 29 | 30 | 31 | 强烈警告 32 | 用于表示操作后将引起严重的不可挽回的后果的情况 33 | 34 | 35 | 36 | 37 | 38 | 等待 39 | 用于表示等待 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /dist/example/icons/icons.wxss: -------------------------------------------------------------------------------- 1 | icon{ 2 | margin-right: 13px; 3 | } 4 | .page__bd { 5 | padding-left: 40px; 6 | padding-right: 40px; 7 | text-align: left; 8 | } 9 | .icon-box{ 10 | margin-bottom: 25px; 11 | display: flex; 12 | align-items: center; 13 | } 14 | .icon-box__ctn{ 15 | flex-shrink: 100; 16 | } 17 | .icon-box__title{ 18 | font-size: 20px; 19 | } 20 | .icon-box__desc{ 21 | margin-top: 6px; 22 | font-size: 12px; 23 | color: #888888; 24 | } 25 | .icon_sp_area { 26 | margin-top: 10px; 27 | text-align: left; 28 | } -------------------------------------------------------------------------------- /dist/example/images/base64.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | icon20: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=", 3 | icon60: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" 4 | }; -------------------------------------------------------------------------------- /dist/example/images/icon_footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/icon_footer.png -------------------------------------------------------------------------------- /dist/example/images/icon_footer_link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/icon_footer_link.png -------------------------------------------------------------------------------- /dist/example/images/icon_intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/icon_intro.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/icon_nav_feedback.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/icon_nav_form.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/icon_nav_nav.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/icon_nav_search.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_special.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/icon_nav_special.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_widget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/icon_nav_widget.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_z-index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/icon_nav_z-index.png -------------------------------------------------------------------------------- /dist/example/images/icon_tabbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/icon_tabbar.png -------------------------------------------------------------------------------- /dist/example/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/logo.png -------------------------------------------------------------------------------- /dist/example/images/pic_160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/pic_160.png -------------------------------------------------------------------------------- /dist/example/images/pic_article.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/pic_article.png -------------------------------------------------------------------------------- /dist/example/images/vcode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/dist/example/images/vcode.jpg -------------------------------------------------------------------------------- /dist/example/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | list: [ 4 | { 5 | id: 'form', 6 | name: '表单', 7 | open: false, 8 | pages: ['button', 'list', 'input', 'slider', 'uploader'] 9 | }, 10 | { 11 | id: 'widget', 12 | name: '基础组件', 13 | open: false, 14 | pages: ['article', 'badge', 'flex', 'footer', 'gallery', 'grid', 'icons', 'loadmore', 'panel', 'preview', 'progress'] 15 | }, 16 | { 17 | id: 'feedback', 18 | name: '操作反馈', 19 | open: false, 20 | pages: ['actionsheet', 'dialog', 'msg', 'picker', 'toast'] 21 | }, 22 | { 23 | id: 'nav', 24 | name: '导航相关', 25 | open: false, 26 | pages: ['navbar', 'tabbar'] 27 | }, 28 | { 29 | id: 'search', 30 | name: '搜索相关', 31 | open: false, 32 | pages: ['searchbar'] 33 | } 34 | ] 35 | }, 36 | kindToggle: function (e) { 37 | var id = e.currentTarget.id, list = this.data.list; 38 | for (var i = 0, len = list.length; i < len; ++i) { 39 | if (list[i].id == id) { 40 | list[i].open = !list[i].open 41 | } else { 42 | list[i].open = false 43 | } 44 | } 45 | this.setData({ 46 | list: list 47 | }); 48 | } 49 | }); 50 | -------------------------------------------------------------------------------- /dist/example/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | WeUI 4 | WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。 5 | 6 | 7 | 8 | 9 | 10 | 11 | {{item.name}} 12 | 13 | 14 | 15 | 16 | 17 | 18 | {{page}} 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /dist/example/index.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-flex{-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-cells{margin-top:0;opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}.weui-cells:after,.weui-cells:before{display:none}.weui-cells_show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.weui-cell:before{right:15px}.kind-list__item{margin:10px 0;background-color:#fff;border-radius:2px;overflow:hidden}.kind-list__item:first-child{margin-top:0}.kind-list__img{width:30px;height:30px}.kind-list__item-hd{padding:20px;-webkit-transition:opacity .3s;transition:opacity .3s}.kind-list__item-hd_show{opacity:.4}.kind-list__item-bd{height:0;overflow:hidden}.kind-list__item-bd_show{height:auto} -------------------------------------------------------------------------------- /dist/example/list/list.js: -------------------------------------------------------------------------------- 1 | var base64 = require("../images/base64"); 2 | Page({ 3 | onLoad: function(){ 4 | this.setData({ 5 | icon: base64.icon20 6 | }); 7 | } 8 | }); -------------------------------------------------------------------------------- /dist/example/loadmore/loadmore.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /dist/example/loadmore/loadmore.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Loadmore 4 | 加载更多 5 | 6 | 7 | 8 | 9 | 正在加载 10 | 11 | 12 | 暂无数据 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /dist/example/loadmore/loadmore.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /dist/example/msg/msg.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | openSuccess: function () { 3 | wx.navigateTo({ 4 | url: 'msg_success' 5 | }) 6 | }, 7 | openFail: function () { 8 | wx.navigateTo({ 9 | url: 'msg_fail' 10 | }) 11 | } 12 | }); -------------------------------------------------------------------------------- /dist/example/msg/msg.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Msg 4 | 提示页 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /dist/example/msg/msg.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /dist/example/msg/msg_fail.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /dist/example/msg/msg_fail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 操作失败 8 | 内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 底部链接文本 20 | 21 | Copyright © 2008-2016 weui.io 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /dist/example/msg/msg_fail.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /dist/example/msg/msg_success.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /dist/example/msg/msg_success.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 操作成功 8 | 内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 底部链接文本 20 | 21 | Copyright © 2008-2016 weui.io 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /dist/example/msg/msg_success.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /dist/example/navbar/navbar.js: -------------------------------------------------------------------------------- 1 | var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置 2 | 3 | Page({ 4 | data: { 5 | tabs: ["选项一", "选项二", "选项三"], 6 | activeIndex: 1, 7 | sliderOffset: 0, 8 | sliderLeft: 0 9 | }, 10 | onLoad: function () { 11 | var that = this; 12 | wx.getSystemInfo({ 13 | success: function(res) { 14 | that.setData({ 15 | sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2, 16 | sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex 17 | }); 18 | } 19 | }); 20 | }, 21 | tabClick: function (e) { 22 | this.setData({ 23 | sliderOffset: e.currentTarget.offsetLeft, 24 | activeIndex: e.currentTarget.id 25 | }); 26 | } 27 | }); -------------------------------------------------------------------------------- /dist/example/navbar/navbar.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{item}} 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /dist/example/navbar/navbar.wxss: -------------------------------------------------------------------------------- 1 | page, 2 | .page, 3 | .page__bd{ 4 | height: 100%; 5 | } 6 | .page__bd{ 7 | padding-bottom: 0; 8 | } 9 | .weui-tab__content{ 10 | padding-top: 60px; 11 | text-align: center; 12 | } -------------------------------------------------------------------------------- /dist/example/panel/panel.js: -------------------------------------------------------------------------------- 1 | var base64 = require("../images/base64"); 2 | 3 | Page({ 4 | onLoad: function(){ 5 | this.setData({ 6 | icon20: base64.icon20, 7 | icon60: base64.icon60 8 | }); 9 | } 10 | }); -------------------------------------------------------------------------------- /dist/example/picker/picker.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | array: ['美国', '中国', '巴西', '日本'], 4 | index: 0, 5 | date: '2016-09-01', 6 | time: '12:01' 7 | }, 8 | bindPickerChange: function(e) { 9 | console.log('picker发送选择改变，携带值为', e.detail.value) 10 | this.setData({ 11 | index: e.detail.value 12 | }) 13 | }, 14 | bindDateChange: function(e) { 15 | this.setData({ 16 | date: e.detail.value 17 | }) 18 | }, 19 | bindTimeChange: function(e) { 20 | this.setData({ 21 | time: e.detail.value 22 | }) 23 | } 24 | }); -------------------------------------------------------------------------------- /dist/example/picker/picker.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Picker 4 | 选择器，这里使用小程序原生的picker。 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /dist/example/picker/picker.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /dist/example/preview/preview.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /dist/example/preview/preview.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Preview 4 | 表单预览 5 | 6 | 7 | 8 | 9 | 10 | 付款金额 11 | ¥2400.00 12 | 13 | 14 | 15 | 16 | 商品 17 | 电动打蛋机 18 | 19 | 20 | 标题标题 21 | 名字名字名字 22 | 23 | 24 | 标题标题 25 | 很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字 26 | 27 | 28 | 29 | 操作 30 | 31 | 32 | 33 | 34 | 付款金额 35 | ¥2400.00 36 | 37 | 38 | 39 | 商品 40 | 电动打蛋机 41 | 42 | 43 | 标题标题 44 | 名字名字名字 45 | 46 | 47 | 标题标题 48 | 很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字 49 | 50 | 51 | 52 | 辅助操作 53 | 操作 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /dist/example/preview/preview.wxss: -------------------------------------------------------------------------------- 1 | .weui-form-preview{ 2 | margin-bottom: 25px; 3 | } -------------------------------------------------------------------------------- /dist/example/progress/progress.js: -------------------------------------------------------------------------------- 1 | function _next(){ 2 | var that = this; 3 | if(this.data.progress >= 100){ 4 | this.setData({ 5 | disabled: false 6 | }); 7 | return true; 8 | } 9 | this.setData({ 10 | progress: ++this.data.progress 11 | }); 12 | setTimeout(function(){ 13 | _next.call(that); 14 | }, 20); 15 | } 16 | 17 | Page({ 18 | data: { 19 | progress: 0, 20 | disabled: false 21 | }, 22 | upload: function(){ 23 | if(this.data.disabled) return; 24 | 25 | this.setData({ 26 | progress: 0, 27 | disabled: true 28 | }); 29 | _next.call(this); 30 | } 31 | }); -------------------------------------------------------------------------------- /dist/example/progress/progress.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Progress 4 | 进度条，这里采用小程序原生的progress 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /dist/example/progress/progress.wxss: -------------------------------------------------------------------------------- 1 | .weui-progress{ 2 | margin-bottom: 24px; 3 | } -------------------------------------------------------------------------------- /dist/example/searchbar/searchbar.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | inputShowed: false, 4 | inputVal: "" 5 | }, 6 | showInput: function () { 7 | this.setData({ 8 | inputShowed: true 9 | }); 10 | }, 11 | hideInput: function () { 12 | this.setData({ 13 | inputVal: "", 14 | inputShowed: false 15 | }); 16 | }, 17 | clearInput: function () { 18 | this.setData({ 19 | inputVal: "" 20 | }); 21 | }, 22 | inputTyping: function (e) { 23 | this.setData({ 24 | inputVal: e.detail.value 25 | }); 26 | } 27 | }); -------------------------------------------------------------------------------- /dist/example/searchbar/searchbar.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | SearchBar 4 | 搜索栏 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 实时搜索文本 27 | 28 | 29 | 30 | 31 | 实时搜索文本 32 | 33 | 34 | 35 | 36 | 实时搜索文本 37 | 38 | 39 | 40 | 41 | 实时搜索文本 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /dist/example/searchbar/searchbar.wxss: -------------------------------------------------------------------------------- 1 | .searchbar-result{ 2 | margin-top: 0; 3 | font-size: 14px; 4 | } 5 | .searchbar-result:before{ 6 | display: none; 7 | } 8 | .weui-cell{ 9 | padding: 12px 15px 12px 35px; 10 | } -------------------------------------------------------------------------------- /dist/example/slider/slider.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /dist/example/slider/slider.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Slider 4 | 滑块，这里采用小程序原生的slider。 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /dist/example/slider/slider.wxss: -------------------------------------------------------------------------------- 1 | slider{ 2 | margin-bottom: 30px; 3 | } -------------------------------------------------------------------------------- /dist/example/tabbar/tabbar.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /dist/example/tabbar/tabbar.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Tabbar 4 | 底部导航，建议采用小程序原生的tabbar，通过设置app.json来实现。详情请看小程序文档。 5 | 6 | -------------------------------------------------------------------------------- /dist/example/toast/toast.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | openToast: function () { 3 | wx.showToast({ 4 | title: '已完成', 5 | icon: 'success', 6 | duration: 3000 7 | }); 8 | }, 9 | openLoading: function () { 10 | wx.showToast({ 11 | title: '数据加载中', 12 | icon: 'loading', 13 | duration: 3000 14 | }); 15 | } 16 | }); -------------------------------------------------------------------------------- /dist/example/toast/toast.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Toast 4 | 弹出式提示，采用小程序原生的toast 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /dist/example/toast/toast.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /dist/example/uploader/uploader.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | files: [] 4 | }, 5 | chooseImage: function (e) { 6 | var that = this; 7 | wx.chooseImage({ 8 | sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 9 | sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 10 | success: function (res) { 11 | // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 12 | that.setData({ 13 | files: that.data.files.concat(res.tempFilePaths) 14 | }); 15 | } 16 | }) 17 | }, 18 | previewImage: function(e){ 19 | wx.previewImage({ 20 | current: e.currentTarget.id, // 当前显示图片的http链接 21 | urls: this.data.files // 需要预览的图片http链接列表 22 | }) 23 | } 24 | }); -------------------------------------------------------------------------------- /dist/example/uploader/uploader.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Uploader 4 | 上传组件 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 图片上传 13 | {{files.length}}/2 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 50% 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /dist/style/base/fn.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /dist/style/base/mixin/setArrow.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /dist/style/base/mixin/setOnepx.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /dist/style/base/mixin/text.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /dist/style/base/reset.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | page{line-height:1.6;font-family:-apple-system-font,Helvetica Neue,sans-serif}icon{vertical-align:middle} -------------------------------------------------------------------------------- /dist/style/base/variable/color.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /dist/style/base/variable/global.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /dist/style/base/variable/weui-button.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /dist/style/base/variable/weui-cell.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /dist/style/base/variable/weui-dialog.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /dist/style/base/variable/weui-grid.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /dist/style/base/variable/weui-msg.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /dist/style/base/variable/weui-progress.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | -------------------------------------------------------------------------------- /dist/style/widget/weui-agree/weui-agree.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-agree{display:block;padding:.5em 15px;font-size:13px}.weui-agree__text{color:#999}.weui-agree__link{display:inline;color:#586c94}.weui-agree__checkbox{position:absolute;left:-9999px}.weui-agree__checkbox-icon{position:relative;top:2px;display:inline-block;border:1px solid #d1d1d1;background-color:#fff;border-radius:3px;width:11px;height:11px}.weui-agree__checkbox-icon-check{position:absolute;top:1px;left:1px} -------------------------------------------------------------------------------- /dist/style/widget/weui-animate/weui-animate.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | @-webkit-keyframes a{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes a{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.weui-animate-slide-up{-webkit-animation:a ease .3s forwards;animation:a ease .3s forwards}@-webkit-keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.weui-animate-slide-down{-webkit-animation:b ease .3s forwards;animation:b ease .3s forwards}@-webkit-keyframes c{0%{opacity:0}to{opacity:1}}@keyframes c{0%{opacity:0}to{opacity:1}}.weui-animate-fade-in{-webkit-animation:c ease .3s forwards;animation:c ease .3s forwards}@-webkit-keyframes d{0%{opacity:1}to{opacity:0}}@keyframes d{0%{opacity:1}to{opacity:0}}.weui-animate-fade-out{-webkit-animation:d ease .3s forwards;animation:d ease .3s forwards} -------------------------------------------------------------------------------- /dist/style/widget/weui-button/weui-button.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-btn{margin-top:15px}.weui-btn:first-child{margin-top:0}.weui-btn-area{margin:1.17647059em 15px .3em} -------------------------------------------------------------------------------- /dist/style/widget/weui-cell/weui-access.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-cell_access{color:inherit}.weui-cell__ft_in-access{padding-right:13px;position:relative}.weui-cell__ft_in-access:after{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;margin-top:-4px;right:2px}.weui-cell_link{color:#586c94;font-size:14px}.weui-cell_link:active{background-color:#ececec}.weui-cell_link:first-child:before{display:block} -------------------------------------------------------------------------------- /dist/style/widget/weui-cell/weui-cell.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-cells{position:relative;margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px}.weui-cells:before{top:0;border-top:1rpx solid #d9d9d9}.weui-cells:after,.weui-cells:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.weui-cells:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.weui-cells__title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#999;font-size:14px}.weui-cells_after-title{margin-top:0}.weui-cells__tips{margin-top:.3em;color:#999;padding-left:15px;padding-right:15px;font-size:14px}.weui-cell{padding:10px 15px;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-cell:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-cell:first-child:before{display:none}.weui-cell_active{background-color:#ececec}.weui-cell_primary{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.weui-cell__bd{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-cell__ft{text-align:right;color:#999} -------------------------------------------------------------------------------- /dist/style/widget/weui-cell/weui-check.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-icon-radio{margin-left:3.2px;margin-right:3.2px}.weui-icon-checkbox_circle,.weui-icon-checkbox_success{margin-left:4.6px;margin-right:4.6px}.weui-check__label:active{background-color:#ececec}.weui-check{position:absolute;left:-9999px}.weui-check__hd_in-checkbox{padding-right:.35em}.weui-cell__ft_in-radio{padding-left:.35em} -------------------------------------------------------------------------------- /dist/style/widget/weui-cell/weui-form.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-cell_input{padding-top:0;padding-bottom:0}.weui-label{width:105px;word-wrap:break-word;word-break:break-all}.weui-input{height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em}.weui-toptips{position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);top:0;left:0;right:0;padding:5px;font-size:14px;text-align:center;color:#fff;z-index:5000;word-wrap:break-word;word-break:break-all}.weui-toptips_warn{background-color:#e64340}.weui-textarea{display:block;width:100%}.weui-textarea-counter{color:#b2b2b2;text-align:right}.weui-cell_warn,.weui-textarea-counter_warn{color:#e64340}.weui-form-preview{position:relative;background-color:#fff}.weui-form-preview:before{top:0;border-top:1rpx solid #d9d9d9}.weui-form-preview:after,.weui-form-preview:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.weui-form-preview:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.weui-form-preview__value{font-size:14px}.weui-form-preview__value_in-hd{font-size:26px}.weui-form-preview__hd{position:relative;padding:10px 15px;text-align:right;line-height:2.5em}.weui-form-preview__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-form-preview__bd{padding:10px 15px;font-size:.9em;text-align:right;color:#999;line-height:2}.weui-form-preview__ft{position:relative;line-height:50px;display:-webkit-box;display:-webkit-flex;display:flex}.weui-form-preview__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__item{overflow:hidden}.weui-form-preview__label{float:left;margin-right:1em;min-width:4em;color:#999;text-align:justify;text-align-last:justify}.weui-form-preview__value{display:block;overflow:hidden;word-break:normal;word-wrap:break-word}.weui-form-preview__btn{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3cc51f;text-align:center}.weui-form-preview__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__btn:first-child:after{display:none}.weui-form-preview__btn_active{background-color:#eee}.weui-form-preview__btn_default{color:#999}.weui-form-preview__btn_primary{color:#0bb20c}.weui-cell_select{padding:0}.weui-select{position:relative;padding-left:15px;padding-right:30px;height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em;border-right:1rpx solid #d9d9d9}.weui-select:before{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;right:15px;margin-top:-4px}.weui-select_in-select-after{padding-left:0}.weui-cell__bd_in-select-before,.weui-cell__hd_in-select-after{padding-left:15px}.weui-cell_vcode{padding-right:0}.weui-vcode-btn,.weui-vcode-img{margin-left:5px;height:2.58823529em;vertical-align:middle}.weui-vcode-btn{display:inline-block;padding:0 .6em 0 .7em;border-left:1px solid #e5e5e5;line-height:2.58823529em;font-size:17px;color:#3cc51f;white-space:nowrap}.weui-vcode-btn:active{color:#52a341} -------------------------------------------------------------------------------- /dist/style/widget/weui-cell/weui-form/weui-form-preview.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-form-preview{position:relative;background-color:#fff}.weui-form-preview:before{top:0;border-top:1rpx solid #d9d9d9}.weui-form-preview:after,.weui-form-preview:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.weui-form-preview:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.weui-form-preview__value{font-size:14px}.weui-form-preview__value_in-hd{font-size:26px}.weui-form-preview__hd{position:relative;padding:10px 15px;text-align:right;line-height:2.5em}.weui-form-preview__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-form-preview__bd{padding:10px 15px;font-size:.9em;text-align:right;color:#999;line-height:2}.weui-form-preview__ft{position:relative;line-height:50px;display:-webkit-box;display:-webkit-flex;display:flex}.weui-form-preview__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__item{overflow:hidden}.weui-form-preview__label{float:left;margin-right:1em;min-width:4em;color:#999;text-align:justify;text-align-last:justify}.weui-form-preview__value{display:block;overflow:hidden;word-break:normal;word-wrap:break-word}.weui-form-preview__btn{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3cc51f;text-align:center}.weui-form-preview__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__btn:first-child:after{display:none}.weui-form-preview__btn_active{background-color:#eee}.weui-form-preview__btn_default{color:#999}.weui-form-preview__btn_primary{color:#0bb20c} -------------------------------------------------------------------------------- /dist/style/widget/weui-cell/weui-form/weui-form_common.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-cell_input{padding-top:0;padding-bottom:0}.weui-label{width:105px;word-wrap:break-word;word-break:break-all}.weui-input{height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em}.weui-toptips{position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);top:0;left:0;right:0;padding:5px;font-size:14px;text-align:center;color:#fff;z-index:5000;word-wrap:break-word;word-break:break-all}.weui-toptips_warn{background-color:#e64340}.weui-textarea{display:block;width:100%}.weui-textarea-counter{color:#b2b2b2;text-align:right}.weui-cell_warn,.weui-textarea-counter_warn{color:#e64340} -------------------------------------------------------------------------------- /dist/style/widget/weui-cell/weui-form/weui-select.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-cell_select{padding:0}.weui-select{position:relative;padding-left:15px;padding-right:30px;height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em;border-right:1rpx solid #d9d9d9}.weui-select:before{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;right:15px;margin-top:-4px}.weui-select_in-select-after{padding-left:0}.weui-cell__bd_in-select-before,.weui-cell__hd_in-select-after{padding-left:15px} -------------------------------------------------------------------------------- /dist/style/widget/weui-cell/weui-form/weui-vcode.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-cell_vcode{padding-right:0}.weui-vcode-btn,.weui-vcode-img{margin-left:5px;height:2.58823529em;vertical-align:middle}.weui-vcode-btn{display:inline-block;padding:0 .6em 0 .7em;border-left:1px solid #e5e5e5;line-height:2.58823529em;font-size:17px;color:#3cc51f;white-space:nowrap}.weui-vcode-btn:active{color:#52a341} -------------------------------------------------------------------------------- /dist/style/widget/weui-cell/weui-switch.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-cell_switch{padding-top:6px;padding-bottom:6px} -------------------------------------------------------------------------------- /dist/style/widget/weui-cell/weui-uploader.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-uploader__hd{display:-webkit-box;display:-webkit-flex;display:flex;padding-bottom:10px;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-uploader__title{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-uploader__info{color:#b2b2b2}.weui-uploader__bd{margin-bottom:-4px;margin-right:-9px;overflow:hidden}.weui-uploader__file{float:left;margin-right:9px;margin-bottom:9px}.weui-uploader__img{display:block;width:79px;height:79px}.weui-uploader__file_status{position:relative}.weui-uploader__file_status:before{content:" ";position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}.weui-uploader__file-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff}.weui-uploader__input-box{float:left;position:relative;margin-right:9px;margin-bottom:9px;width:77px;height:77px;border:1px solid #d9d9d9}.weui-uploader__input-box:after,.weui-uploader__input-box:before{content:" ";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#d9d9d9}.weui-uploader__input-box:before{width:2px;height:39.5px}.weui-uploader__input-box:after{width:39.5px;height:2px}.weui-uploader__input-box:active{border-color:#999}.weui-uploader__input-box:active:after,.weui-uploader__input-box:active:before{background-color:#999}.weui-uploader__input{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;opacity:0} -------------------------------------------------------------------------------- /dist/style/widget/weui-flex/weui-flex.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-flex{display:-webkit-box;display:-webkit-flex;display:flex}.weui-flex__item{-webkit-box-flex:1;-webkit-flex:1;flex:1} -------------------------------------------------------------------------------- /dist/style/widget/weui-footer/weui-footer.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-footer{color:#999;font-size:14px;text-align:center}.weui-footer_fixed-bottom{position:fixed;bottom:.52em;left:0;right:0}.weui-footer__links{font-size:0}.weui-footer__link{display:inline-block;vertical-align:top;margin:0 .62em;position:relative;font-size:14px;color:#586c94}.weui-footer__link:before{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #c7c7c7;color:#c7c7c7;left:-.65em;top:.36em;bottom:.36em}.weui-footer__link:first-child:before{display:none}.weui-footer__text{padding:0 .34em;font-size:12px} -------------------------------------------------------------------------------- /dist/style/widget/weui-grid/weui-grid.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-grids{border-top:1rpx solid #d9d9d9;border-left:1rpx solid #d9d9d9;overflow:hidden}.weui-grid{position:relative;float:left;padding:20px 10px;width:33.33333333%;box-sizing:border-box;border-right:1rpx solid #d9d9d9;border-bottom:1rpx solid #d9d9d9}.weui-grid_active{background-color:#ececec}.weui-grid__icon{display:block;width:28px;height:28px;margin:0 auto}.weui-grid__label{margin-top:5px;display:block;text-align:center;color:#000;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} -------------------------------------------------------------------------------- /dist/style/widget/weui-media-box/weui-media-box.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-media-box{padding:15px;position:relative}.weui-media-box:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}.weui-media-box:first-child:before{display:none}.weui-media-box__title{font-weight:400;font-size:17px;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;word-wrap:break-word;word-break:break-all}.weui-media-box__desc{color:#999;font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.weui-media-box__info{margin-top:15px;padding-bottom:5px;font-size:13px;color:#cecece;line-height:1em;list-style:none;overflow:hidden}.weui-media-box__info__meta{float:left;padding-right:1em}.weui-media-box__info__meta_extra{padding-left:1em;border-left:1px solid #cecece}.weui-media-box__title_in-text{margin-bottom:8px}.weui-media-box_appmsg{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-media-box__thumb{width:100%;height:100%;vertical-align:top}.weui-media-box__hd_in-appmsg{margin-right:.8em;width:60px;height:60px;line-height:60px;text-align:center}.weui-media-box__bd_in-appmsg{-webkit-box-flex:1;-webkit-flex:1;flex:1;min-width:0}.weui-media-box_small-appmsg{padding:0}.weui-cells_in-small-appmsg{margin-top:0}.weui-cells_in-small-appmsg:before{display:none} -------------------------------------------------------------------------------- /dist/style/widget/weui-page/weui-article.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-article{padding:20px 15px;font-size:15px}.weui-article__section{margin-bottom:1.5em}.weui-article__h1{font-size:18px;font-weight:400;margin-bottom:.9em}.weui-article__h2{font-size:16px;font-weight:400;margin-bottom:.34em}.weui-article__h3{font-weight:400;font-size:15px;margin-bottom:.34em}.weui-article__p{margin:0 0 .8em} -------------------------------------------------------------------------------- /dist/style/widget/weui-page/weui-msg.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-msg{padding-top:36px;text-align:center}.weui-msg__link{display:inline;color:#586c94}.weui-msg__icon-area{margin-bottom:30px}.weui-msg__text-area{margin-bottom:25px;padding:0 20px}.weui-msg__title{margin-bottom:5px;font-weight:400;font-size:20px}.weui-msg__desc{font-size:14px;color:#999}.weui-msg__opr-area{margin-bottom:25px}.weui-msg__extra-area{margin-bottom:15px;font-size:14px;color:#999}@media screen and (min-height:438px){.weui-msg__extra-area{position:fixed;left:0;bottom:0;width:100%;text-align:center}} -------------------------------------------------------------------------------- /dist/style/widget/weui-panel/weui-panel.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-panel{background-color:#fff;margin-top:10px;position:relative;overflow:hidden}.weui-panel:first-child{margin-top:0}.weui-panel:before{top:0;border-top:1rpx solid #e5e5e5}.weui-panel:after,.weui-panel:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#e5e5e5}.weui-panel:after{bottom:0;border-bottom:1rpx solid #e5e5e5}.weui-panel__hd{padding:14px 15px 10px;color:#999;font-size:13px;position:relative}.weui-panel__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #e5e5e5;color:#e5e5e5;left:15px} -------------------------------------------------------------------------------- /dist/style/widget/weui-progress/weui-progress.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-progress{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-progress__bar{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-progress__opr{margin-left:15px;font-size:0} -------------------------------------------------------------------------------- /dist/style/widget/weui-searchbar/weui-searchbar.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-search-bar{position:relative;padding:8px 10px;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;background-color:#efeff4;border-top:1rpx solid #d7d6dc;border-bottom:1rpx solid #d7d6dc}.weui-icon-search{margin-right:8px;font-size:inherit}.weui-icon-search_in-box{position:absolute;left:10px;top:7px}.weui-search-bar__text{display:inline-block;font-size:14px;vertical-align:middle}.weui-search-bar__form{position:relative;-webkit-box-flex:1;-webkit-flex:auto;flex:auto;border-radius:5px;background:#fff;border:1rpx solid #e6e6ea}.weui-search-bar__box{position:relative;padding-left:30px;padding-right:30px;width:100%;box-sizing:border-box;z-index:1}.weui-search-bar__input{height:28px;line-height:28px;font-size:14px}.weui-icon-clear{position:absolute;top:0;right:0;padding:7px 8px;font-size:0}.weui-search-bar__label{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:3px;text-align:center;color:#9b9b9b;background:#fff;line-height:28px}.weui-search-bar__cancel-btn{margin-left:10px;line-height:28px;color:#09bb07;white-space:nowrap} -------------------------------------------------------------------------------- /dist/style/widget/weui-tab/weui-navbar.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-navbar{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;z-index:500;top:0;width:100%;border-bottom:1rpx solid #ccc}.weui-navbar__item{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:13px 0;text-align:center;font-size:0}.weui-navbar__item.weui-bar__item_on{color:#1aad19}.weui-navbar__slider{position:absolute;content:" ";left:0;bottom:0;width:6em;height:3px;background-color:#1aad19;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.weui-navbar__title{display:inline-block;font-size:15px;max-width:8em;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal} -------------------------------------------------------------------------------- /dist/style/widget/weui-tab/weui-tab.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-navbar{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;z-index:500;top:0;width:100%;border-bottom:1rpx solid #ccc}.weui-navbar__item{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:13px 0;text-align:center;font-size:0}.weui-navbar__item.weui-bar__item_on{color:#1aad19}.weui-navbar__slider{position:absolute;content:" ";left:0;bottom:0;width:6em;height:3px;background-color:#1aad19;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.weui-navbar__title{display:inline-block;font-size:15px;max-width:8em;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.weui-tab{position:relative;height:100%}.weui-tab__panel{box-sizing:border-box;height:100%;padding-top:50px;overflow:auto;-webkit-overflow-scrolling:touch} -------------------------------------------------------------------------------- /dist/style/widget/weui-tips/weui-badge.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-badge{display:inline-block;padding:.15em .4em;min-width:8px;border-radius:18px;background-color:#e64340;color:#fff;line-height:1.2;text-align:center;font-size:12px;vertical-align:middle}.weui-badge_dot{padding:.4em;min-width:0} -------------------------------------------------------------------------------- /dist/style/widget/weui-tips/weui-loadmore.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | .weui-loadmore{width:65%;margin:1.5em auto;line-height:1.6em;font-size:14px;text-align:center}.weui-loadmore__tips{display:inline-block;vertical-align:middle}.weui-loadmore_line{border-top:1px solid #e5e5e5;margin-top:2.4em}.weui-loadmore__tips_in-line{position:relative;top:-.9em;padding:0 .55em;background-color:#fff;color:#999}.weui-loadmore__tips_in-dot{position:relative;padding:0 .16em;width:4px;height:1.6em}.weui-loadmore__tips_in-dot:before{content:" ";position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-2px;width:4px;height:4px;border-radius:50%;background-color:#e5e5e5} -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var less = require('gulp-less'); 3 | var rename = require('gulp-rename'); 4 | var postcss = require('gulp-postcss'); 5 | var cssnano = require('gulp-cssnano'); 6 | var header = require('gulp-header'); 7 | var autoprefixer = require('autoprefixer'); 8 | var pkg = require('./package.json'); 9 | 10 | gulp.task('watch', function() { 11 | gulp.watch('src/**', ['build:style', 'build:example']); 12 | }); 13 | gulp.task('build:style', function() { 14 | var banner = [ 15 | '/*!', 16 | ' * WeUI v<%= pkg.version %> (<%= pkg.homepage %>)', 17 | ' * Copyright <%= new Date().getFullYear() %> Tencent, Inc.', 18 | ' * Licensed under the <%= pkg.license %> license', 19 | ' */', 20 | '' 21 | ].join('\n'); 22 | gulp 23 | .src(['src/style/**/*.wxss', 'src/example/*.wxss'], { base: 'src' }) 24 | .pipe(less()) 25 | .pipe(postcss([autoprefixer(['iOS >= 8', 'Android >= 4.1'])])) 26 | .pipe( 27 | cssnano({ 28 | zindex: false, 29 | autoprefixer: false, 30 | discardComments: { removeAll: true } 31 | }) 32 | ) 33 | .pipe(header(banner, { pkg: pkg })) 34 | .pipe( 35 | rename(function(path) { 36 | path.extname = '.wxss'; 37 | }) 38 | ) 39 | .pipe(gulp.dest('dist')); 40 | }); 41 | gulp.task('build:example', function() { 42 | gulp 43 | .src( 44 | [ 45 | 'src/app.js', 46 | 'src/app.json', 47 | 'src/app.wxss', 48 | 'src/example/**', 49 | '!src/example/*.wxss' 50 | ], 51 | { base: 'src' } 52 | ) 53 | .pipe(gulp.dest('dist')); 54 | }); 55 | 56 | gulp.task('default', ['watch', 'build:style', 'build:example']); 57 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weui-wxss", 3 | "version": "1.1.1", 4 | "description": "weui-wxss", 5 | "main": "dist/style/weui.wxss", 6 | "directories": { 7 | "example": "example" 8 | }, 9 | "scripts": { 10 | "start": "gulp", 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/weui/weui-wxss/" 16 | }, 17 | "homepage": "https://github.com/weui/weui-wxss", 18 | "keywords": [ 19 | "weui", 20 | "wxss" 21 | ], 22 | "author": "wechat ui team", 23 | "license": "MIT", 24 | "devDependencies": { 25 | "autoprefixer": "^6.5.1", 26 | "gulp": "^3.9.1", 27 | "gulp-cssnano": "^2.1.2", 28 | "gulp-header": "^1.8.8", 29 | "gulp-less": "^3.1.0", 30 | "gulp-postcss": "^6.2.0", 31 | "gulp-rename": "^1.2.2" 32 | } 33 | } -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch: function () { 3 | console.log('App Launch') 4 | }, 5 | onShow: function () { 6 | console.log('App Show') 7 | }, 8 | onHide: function () { 9 | console.log('App Hide') 10 | }, 11 | globalData: { 12 | hasLogin: false 13 | } 14 | }); -------------------------------------------------------------------------------- /src/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "example/index", 4 | 5 | "example/button/button", 6 | "example/list/list", 7 | "example/input/input", 8 | "example/slider/slider", 9 | "example/uploader/uploader", 10 | 11 | "example/article/article", 12 | "example/badge/badge", 13 | "example/flex/flex", 14 | "example/footer/footer", 15 | "example/gallery/gallery", 16 | "example/grid/grid", 17 | "example/icons/icons", 18 | "example/loadmore/loadmore", 19 | "example/panel/panel", 20 | "example/preview/preview", 21 | "example/progress/progress", 22 | 23 | "example/actionsheet/actionsheet", 24 | "example/dialog/dialog", 25 | "example/msg/msg", 26 | "example/msg/msg_success", 27 | "example/msg/msg_fail", 28 | "example/picker/picker", 29 | "example/toast/toast", 30 | 31 | "example/navbar/navbar", 32 | "example/tabbar/tabbar", 33 | 34 | "example/searchbar/searchbar" 35 | ], 36 | "window": { 37 | "navigationBarTextStyle": "black", 38 | "navigationBarTitleText": "WeUI for 小程序", 39 | "navigationBarBackgroundColor": "#f8f8f8", 40 | "backgroundColor": "#f8f8f8" 41 | }, 42 | "networkTimeout": { 43 | "request": 10000, 44 | "connectSocket": 10000, 45 | "uploadFile": 10000, 46 | "downloadFile": 10000 47 | }, 48 | "debug": true 49 | } -------------------------------------------------------------------------------- /src/app.wxss: -------------------------------------------------------------------------------- 1 | @import 'style/weui.wxss'; 2 | 3 | page{ 4 | background-color: #F8F8F8; 5 | font-size: 16px; 6 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; 7 | } 8 | .page__hd { 9 | padding: 40px; 10 | } 11 | .page__bd { 12 | padding-bottom: 40px; 13 | } 14 | .page__bd_spacing { 15 | padding-left: 15px; 16 | padding-right: 15px; 17 | } 18 | 19 | .page__ft{ 20 | padding-bottom: 10px; 21 | text-align: center; 22 | } 23 | 24 | .page__title { 25 | text-align: left; 26 | font-size: 20px; 27 | font-weight: 400; 28 | } 29 | 30 | .page__desc { 31 | margin-top: 5px; 32 | color: #888888; 33 | text-align: left; 34 | font-size: 14px; 35 | } -------------------------------------------------------------------------------- /src/example/actionsheet/actionsheet.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | open: function(){ 3 | wx.showActionSheet({ 4 | itemList: ['A', 'B', 'C'], 5 | success: function(res) { 6 | if (!res.cancel) { 7 | console.log(res.tapIndex) 8 | } 9 | } 10 | }); 11 | } 12 | }); -------------------------------------------------------------------------------- /src/example/actionsheet/actionsheet.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | ActionSheet 4 | 弹出式菜单，采用小程序原生的actionsheet 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/example/actionsheet/actionsheet.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /src/example/article/article.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /src/example/article/article.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Article 4 | 文章 5 | 6 | 7 | 8 | 大标题 9 | 10 | 章标题 11 | 12 | 1.1 节标题 13 | 14 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 15 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 16 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 17 | consequat. 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 1.2 节标题 26 | 27 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 28 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 29 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 30 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /src/example/article/article.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } 4 | image{ 5 | margin: 4px 0; 6 | } -------------------------------------------------------------------------------- /src/example/badge/badge.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /src/example/badge/badge.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Badge 4 | 徽章 5 | 6 | 7 | 8 | 新消息提示跟摘要信息后，统一在列表右侧 9 | 10 | 11 | 单行列表 12 | 13 | 详细信息 14 | 15 | 16 | 17 | 18 | 19 | 未读数红点跟在主题信息后，统一在列表左侧 20 | 21 | 22 | 23 | 24 | 8 25 | 26 | 27 | 联系人名称 28 | 摘要信息 29 | 30 | 31 | 32 | 33 | 单行列表 34 | 8 35 | 36 | 37 | 38 | 39 | 40 | 单行列表 41 | 8 42 | 43 | 详细信息 44 | 45 | 46 | 47 | 单行列表 48 | New 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /src/example/button/button.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /src/example/button/button.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Button 4 | 按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/example/button/button.wxss: -------------------------------------------------------------------------------- 1 | .button-sp-area{ 2 | margin: 0 auto; 3 | padding-top: 15px; 4 | width: 60%; 5 | } 6 | .mini-btn{ 7 | margin-right: 5px; 8 | } -------------------------------------------------------------------------------- /src/example/dialog/dialog.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | openConfirm: function () { 3 | wx.showModal({ 4 | title: '弹窗标题', 5 | content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内', 6 | confirmText: "主操作", 7 | cancelText: "辅助操作", 8 | success: function (res) { 9 | console.log(res); 10 | if (res.confirm) { 11 | console.log('用户点击主操作') 12 | }else{ 13 | console.log('用户点击辅助操作') 14 | } 15 | } 16 | }); 17 | }, 18 | openAlert: function () { 19 | wx.showModal({ 20 | content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内', 21 | showCancel: false, 22 | success: function (res) { 23 | if (res.confirm) { 24 | console.log('用户点击确定') 25 | } 26 | } 27 | }); 28 | } 29 | }); -------------------------------------------------------------------------------- /src/example/dialog/dialog.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Dialog 4 | 对话框，采用小程序原生的modal 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/example/dialog/dialog.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /src/example/flex/flex.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /src/example/flex/flex.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Flex 4 | Flex布局 5 | 6 | 7 | 8 | weui 9 | 10 | 11 | weui 12 | weui 13 | 14 | 15 | weui 16 | weui 17 | weui 18 | 19 | 20 | weui 21 | weui 22 | weui 23 | weui 24 | 25 | 26 | weui 27 | weui 28 | weui 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/example/flex/flex.wxss: -------------------------------------------------------------------------------- 1 | .placeholder{ 2 | margin: 5px; 3 | padding: 0 10px; 4 | text-align: center; 5 | background-color: #EBEBEB; 6 | height: 2.3em; 7 | line-height: 2.3em; 8 | color: #cfcfcf; 9 | } -------------------------------------------------------------------------------- /src/example/footer/footer.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /src/example/footer/footer.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Footer 4 | 页脚 5 | 6 | 7 | 8 | Copyright © 2008-2016 weui.io 9 | 10 | 11 | 12 | 13 | 14 | 底部链接 15 | 16 | Copyright © 2008-2016 weui.io 17 | 18 | 19 | 20 | 21 | 22 | 底部链接 23 | 底部链接 24 | 25 | Copyright © 2008-2016 weui.io 26 | 27 | 28 | 29 | 30 | 31 | WeUI首页 32 | 33 | Copyright © 2008-2016 weui.io 34 | 35 | 36 | -------------------------------------------------------------------------------- /src/example/footer/footer.wxss: -------------------------------------------------------------------------------- 1 | /* 作为展示用的样式 */ 2 | 3 | .weui-footer{ 4 | margin-bottom: 50px; 5 | } 6 | .weui-footer_fixed-bottom{ 7 | margin-bottom: 0; 8 | } -------------------------------------------------------------------------------- /src/example/gallery/gallery.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /src/example/gallery/gallery.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Gallery 4 | 画廊，建议采用小程序原生的wx.previewImage来实现。详情请看小程序文档。 5 | 6 | -------------------------------------------------------------------------------- /src/example/grid/grid.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | grids: [0, 1, 2, 3, 4, 5, 6, 7, 8] 4 | } 5 | }); -------------------------------------------------------------------------------- /src/example/grid/grid.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Grid 4 | 九宫格 5 | 6 | 7 | 8 | 9 | 10 | 11 | Grid 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/example/icons/icons.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /src/example/icons/icons.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Icons 4 | 图标 5 | 6 | 7 | 8 | 9 | 10 | 成功 11 | 用于表示操作顺利达成 12 | 13 | 14 | 15 | 16 | 17 | 提示 18 | 用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息 19 | 20 | 21 | 22 | 23 | 24 | 普通警告 25 | 用于表示操作后将引起一定后果的情况 26 | 27 | 28 | 29 | 30 | 31 | 强烈警告 32 | 用于表示操作后将引起严重的不可挽回的后果的情况 33 | 34 | 35 | 36 | 37 | 38 | 等待 39 | 用于表示等待 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /src/example/icons/icons.wxss: -------------------------------------------------------------------------------- 1 | icon{ 2 | margin-right: 13px; 3 | } 4 | .page__bd { 5 | padding-left: 40px; 6 | padding-right: 40px; 7 | text-align: left; 8 | } 9 | .icon-box{ 10 | margin-bottom: 25px; 11 | display: flex; 12 | align-items: center; 13 | } 14 | .icon-box__ctn{ 15 | flex-shrink: 100; 16 | } 17 | .icon-box__title{ 18 | font-size: 20px; 19 | } 20 | .icon-box__desc{ 21 | margin-top: 6px; 22 | font-size: 12px; 23 | color: #888888; 24 | } 25 | .icon_sp_area { 26 | margin-top: 10px; 27 | text-align: left; 28 | } -------------------------------------------------------------------------------- /src/example/images/base64.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | icon20: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=", 3 | icon60: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" 4 | }; -------------------------------------------------------------------------------- /src/example/images/icon_footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/icon_footer.png -------------------------------------------------------------------------------- /src/example/images/icon_footer_link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/icon_footer_link.png -------------------------------------------------------------------------------- /src/example/images/icon_intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/icon_intro.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/icon_nav_feedback.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/icon_nav_form.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/icon_nav_nav.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/icon_nav_search.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_special.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/icon_nav_special.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_widget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/icon_nav_widget.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_z-index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/icon_nav_z-index.png -------------------------------------------------------------------------------- /src/example/images/icon_tabbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/icon_tabbar.png -------------------------------------------------------------------------------- /src/example/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/logo.png -------------------------------------------------------------------------------- /src/example/images/pic_160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/pic_160.png -------------------------------------------------------------------------------- /src/example/images/pic_article.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/pic_article.png -------------------------------------------------------------------------------- /src/example/images/vcode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TencentAPI/weui-wxss/cba29fd6182bb185dff83c3309717c9ce882f270/src/example/images/vcode.jpg -------------------------------------------------------------------------------- /src/example/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | list: [ 4 | { 5 | id: 'form', 6 | name: '表单', 7 | open: false, 8 | pages: ['button', 'list', 'input', 'slider', 'uploader'] 9 | }, 10 | { 11 | id: 'widget', 12 | name: '基础组件', 13 | open: false, 14 | pages: ['article', 'badge', 'flex', 'footer', 'gallery', 'grid', 'icons', 'loadmore', 'panel', 'preview', 'progress'] 15 | }, 16 | { 17 | id: 'feedback', 18 | name: '操作反馈', 19 | open: false, 20 | pages: ['actionsheet', 'dialog', 'msg', 'picker', 'toast'] 21 | }, 22 | { 23 | id: 'nav', 24 | name: '导航相关', 25 | open: false, 26 | pages: ['navbar', 'tabbar'] 27 | }, 28 | { 29 | id: 'search', 30 | name: '搜索相关', 31 | open: false, 32 | pages: ['searchbar'] 33 | } 34 | ] 35 | }, 36 | kindToggle: function (e) { 37 | var id = e.currentTarget.id, list = this.data.list; 38 | for (var i = 0, len = list.length; i < len; ++i) { 39 | if (list[i].id == id) { 40 | list[i].open = !list[i].open 41 | } else { 42 | list[i].open = false 43 | } 44 | } 45 | this.setData({ 46 | list: list 47 | }); 48 | } 49 | }); 50 | -------------------------------------------------------------------------------- /src/example/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | WeUI 4 | WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。 5 | 6 | 7 | 8 | 9 | 10 | 11 | {{item.name}} 12 | 13 | 14 | 15 | 16 | 17 | 18 | {{page}} 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/example/index.wxss: -------------------------------------------------------------------------------- 1 | .weui-flex{ 2 | align-items: center; 3 | } 4 | .weui-cells{ 5 | margin-top: 0; 6 | opacity: 0; 7 | transform: translateY(-50%); 8 | transition: .3s; 9 | &:before, &:after{ 10 | display: none; 11 | } 12 | &_show{ 13 | opacity: 1; 14 | transform: translateY(0); 15 | } 16 | } 17 | .weui-cell{ 18 | &:before{ 19 | right: 15px; 20 | } 21 | } 22 | 23 | .kind-list{} 24 | .kind-list__item{ 25 | margin: 10px 0; 26 | background-color: #FFFFFF; 27 | border-radius: 2px; 28 | overflow: hidden; 29 | &:first-child{ 30 | margin-top: 0; 31 | } 32 | } 33 | .kind-list__img{ 34 | width: 30px; 35 | height: 30px; 36 | } 37 | 38 | .kind-list__item-hd{ 39 | padding: 20px; 40 | transition: opacity .3s; 41 | &_show{ 42 | opacity: .4; 43 | } 44 | } 45 | .kind-list__item-bd{ 46 | height: 0; 47 | overflow: hidden; 48 | &_show{ 49 | height: auto; 50 | } 51 | } -------------------------------------------------------------------------------- /src/example/list/list.js: -------------------------------------------------------------------------------- 1 | var base64 = require("../images/base64"); 2 | Page({ 3 | onLoad: function(){ 4 | this.setData({ 5 | icon: base64.icon20 6 | }); 7 | } 8 | }); -------------------------------------------------------------------------------- /src/example/loadmore/loadmore.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /src/example/loadmore/loadmore.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Loadmore 4 | 加载更多 5 | 6 | 7 | 8 | 9 | 正在加载 10 | 11 | 12 | 暂无数据 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/example/loadmore/loadmore.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /src/example/msg/msg.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | openSuccess: function () { 3 | wx.navigateTo({ 4 | url: 'msg_success' 5 | }) 6 | }, 7 | openFail: function () { 8 | wx.navigateTo({ 9 | url: 'msg_fail' 10 | }) 11 | } 12 | }); -------------------------------------------------------------------------------- /src/example/msg/msg.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Msg 4 | 提示页 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/example/msg/msg.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /src/example/msg/msg_fail.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /src/example/msg/msg_fail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 操作失败 8 | 内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 底部链接文本 20 | 21 | Copyright © 2008-2016 weui.io 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/example/msg/msg_fail.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /src/example/msg/msg_success.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /src/example/msg/msg_success.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 操作成功 8 | 内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 底部链接文本 20 | 21 | Copyright © 2008-2016 weui.io 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/example/msg/msg_success.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /src/example/navbar/navbar.js: -------------------------------------------------------------------------------- 1 | var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置 2 | 3 | Page({ 4 | data: { 5 | tabs: ["选项一", "选项二", "选项三"], 6 | activeIndex: 1, 7 | sliderOffset: 0, 8 | sliderLeft: 0 9 | }, 10 | onLoad: function () { 11 | var that = this; 12 | wx.getSystemInfo({ 13 | success: function(res) { 14 | that.setData({ 15 | sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2, 16 | sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex 17 | }); 18 | } 19 | }); 20 | }, 21 | tabClick: function (e) { 22 | this.setData({ 23 | sliderOffset: e.currentTarget.offsetLeft, 24 | activeIndex: e.currentTarget.id 25 | }); 26 | } 27 | }); -------------------------------------------------------------------------------- /src/example/navbar/navbar.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{item}} 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/example/navbar/navbar.wxss: -------------------------------------------------------------------------------- 1 | page, 2 | .page, 3 | .page__bd{ 4 | height: 100%; 5 | } 6 | .page__bd{ 7 | padding-bottom: 0; 8 | } 9 | .weui-tab__content{ 10 | padding-top: 60px; 11 | text-align: center; 12 | } -------------------------------------------------------------------------------- /src/example/panel/panel.js: -------------------------------------------------------------------------------- 1 | var base64 = require("../images/base64"); 2 | 3 | Page({ 4 | onLoad: function(){ 5 | this.setData({ 6 | icon20: base64.icon20, 7 | icon60: base64.icon60 8 | }); 9 | } 10 | }); -------------------------------------------------------------------------------- /src/example/picker/picker.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | array: ['美国', '中国', '巴西', '日本'], 4 | index: 0, 5 | date: '2016-09-01', 6 | time: '12:01' 7 | }, 8 | bindPickerChange: function(e) { 9 | console.log('picker发送选择改变，携带值为', e.detail.value) 10 | this.setData({ 11 | index: e.detail.value 12 | }) 13 | }, 14 | bindDateChange: function(e) { 15 | this.setData({ 16 | date: e.detail.value 17 | }) 18 | }, 19 | bindTimeChange: function(e) { 20 | this.setData({ 21 | time: e.detail.value 22 | }) 23 | } 24 | }); -------------------------------------------------------------------------------- /src/example/picker/picker.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Picker 4 | 选择器，这里使用小程序原生的picker。 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/example/picker/picker.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /src/example/preview/preview.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /src/example/preview/preview.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Preview 4 | 表单预览 5 | 6 | 7 | 8 | 9 | 10 | 付款金额 11 | ¥2400.00 12 | 13 | 14 | 15 | 16 | 商品 17 | 电动打蛋机 18 | 19 | 20 | 标题标题 21 | 名字名字名字 22 | 23 | 24 | 标题标题 25 | 很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字 26 | 27 | 28 | 29 | 操作 30 | 31 | 32 | 33 | 34 | 付款金额 35 | ¥2400.00 36 | 37 | 38 | 39 | 商品 40 | 电动打蛋机 41 | 42 | 43 | 标题标题 44 | 名字名字名字 45 | 46 | 47 | 标题标题 48 | 很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字 49 | 50 | 51 | 52 | 辅助操作 53 | 操作 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /src/example/preview/preview.wxss: -------------------------------------------------------------------------------- 1 | .weui-form-preview{ 2 | margin-bottom: 25px; 3 | } -------------------------------------------------------------------------------- /src/example/progress/progress.js: -------------------------------------------------------------------------------- 1 | function _next(){ 2 | var that = this; 3 | if(this.data.progress >= 100){ 4 | this.setData({ 5 | disabled: false 6 | }); 7 | return true; 8 | } 9 | this.setData({ 10 | progress: ++this.data.progress 11 | }); 12 | setTimeout(function(){ 13 | _next.call(that); 14 | }, 20); 15 | } 16 | 17 | Page({ 18 | data: { 19 | progress: 0, 20 | disabled: false 21 | }, 22 | upload: function(){ 23 | if(this.data.disabled) return; 24 | 25 | this.setData({ 26 | progress: 0, 27 | disabled: true 28 | }); 29 | _next.call(this); 30 | } 31 | }); -------------------------------------------------------------------------------- /src/example/progress/progress.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Progress 4 | 进度条，这里采用小程序原生的progress 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/example/progress/progress.wxss: -------------------------------------------------------------------------------- 1 | .weui-progress{ 2 | margin-bottom: 24px; 3 | } -------------------------------------------------------------------------------- /src/example/searchbar/searchbar.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | inputShowed: false, 4 | inputVal: "" 5 | }, 6 | showInput: function () { 7 | this.setData({ 8 | inputShowed: true 9 | }); 10 | }, 11 | hideInput: function () { 12 | this.setData({ 13 | inputVal: "", 14 | inputShowed: false 15 | }); 16 | }, 17 | clearInput: function () { 18 | this.setData({ 19 | inputVal: "" 20 | }); 21 | }, 22 | inputTyping: function (e) { 23 | this.setData({ 24 | inputVal: e.detail.value 25 | }); 26 | } 27 | }); -------------------------------------------------------------------------------- /src/example/searchbar/searchbar.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | SearchBar 4 | 搜索栏 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 实时搜索文本 27 | 28 | 29 | 30 | 31 | 实时搜索文本 32 | 33 | 34 | 35 | 36 | 实时搜索文本 37 | 38 | 39 | 40 | 41 | 实时搜索文本 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/example/searchbar/searchbar.wxss: -------------------------------------------------------------------------------- 1 | .searchbar-result{ 2 | margin-top: 0; 3 | font-size: 14px; 4 | } 5 | .searchbar-result:before{ 6 | display: none; 7 | } 8 | .weui-cell{ 9 | padding: 12px 15px 12px 35px; 10 | } -------------------------------------------------------------------------------- /src/example/slider/slider.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /src/example/slider/slider.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Slider 4 | 滑块，这里采用小程序原生的slider。 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/example/slider/slider.wxss: -------------------------------------------------------------------------------- 1 | slider{ 2 | margin-bottom: 30px; 3 | } -------------------------------------------------------------------------------- /src/example/tabbar/tabbar.js: -------------------------------------------------------------------------------- 1 | Page({}); -------------------------------------------------------------------------------- /src/example/tabbar/tabbar.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Tabbar 4 | 底部导航，建议采用小程序原生的tabbar，通过设置app.json来实现。详情请看小程序文档。 5 | 6 | -------------------------------------------------------------------------------- /src/example/toast/toast.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | openToast: function () { 3 | wx.showToast({ 4 | title: '已完成', 5 | icon: 'success', 6 | duration: 3000 7 | }); 8 | }, 9 | openLoading: function () { 10 | wx.showToast({ 11 | title: '数据加载中', 12 | icon: 'loading', 13 | duration: 3000 14 | }); 15 | } 16 | }); -------------------------------------------------------------------------------- /src/example/toast/toast.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Toast 4 | 弹出式提示，采用小程序原生的toast 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/example/toast/toast.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #FFFFFF; 3 | } -------------------------------------------------------------------------------- /src/example/uploader/uploader.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | files: [] 4 | }, 5 | chooseImage: function (e) { 6 | var that = this; 7 | wx.chooseImage({ 8 | sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 9 | sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 10 | success: function (res) { 11 | // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 12 | that.setData({ 13 | files: that.data.files.concat(res.tempFilePaths) 14 | }); 15 | } 16 | }) 17 | }, 18 | previewImage: function(e){ 19 | wx.previewImage({ 20 | current: e.currentTarget.id, // 当前显示图片的http链接 21 | urls: this.data.files // 需要预览的图片http链接列表 22 | }) 23 | } 24 | }); -------------------------------------------------------------------------------- /src/example/uploader/uploader.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Uploader 4 | 上传组件 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 图片上传 13 | {{files.length}}/2 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 50% 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /src/style/base/fn.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | // mixin 22 | @import "mixin/setOnepx.wxss"; 23 | @import "mixin/setArrow.wxss"; 24 | @import "mixin/text.wxss"; 25 | 26 | 27 | // variable 28 | @import "variable/global.wxss"; 29 | @import "variable/color.wxss"; 30 | 31 | 32 | @import "variable/weui-cell.wxss"; 33 | @import "variable/weui-button.wxss"; 34 | @import "variable/weui-msg.wxss"; 35 | @import "variable/weui-grid.wxss"; 36 | @import "variable/weui-progress.wxss"; 37 | @import "variable/weui-dialog.wxss"; -------------------------------------------------------------------------------- /src/style/base/mixin/setArrow.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | ._setArrow(@arrowsize, @borderColor, @borderWidth){ 22 | display: inline-block; 23 | height: @arrowsize; 24 | width: @arrowsize; 25 | border-width: @borderWidth @borderWidth 0 0; 26 | border-color: @borderColor; 27 | border-style: solid; 28 | } 29 | 30 | .setArrow(@direction, @arrowsize, @borderColor, @borderWidth) when (@direction = top) { 31 | ._setArrow(@arrowsize, @borderColor, @borderWidth); 32 | transform: matrix(0.71,-0.71,0.71,0.71,0,0); // rotate(-45deg) 33 | } 34 | 35 | .setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = right) { 36 | ._setArrow(@arrowsize, @borderColor, @borderWidth); 37 | transform: matrix(0.71,0.71,-0.71,0.71,0,0); // rotate(45deg); 38 | 39 | position: relative; 40 | top: -2px; 41 | } 42 | 43 | .setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = down) { 44 | ._setArrow(@arrowsize, @borderColor, @borderWidth); 45 | transform: matrix(-0.71,0.71,-0.71,-0.71,0,0); // rotate(135deg); 46 | 47 | position: relative; 48 | top: -3px; 49 | } 50 | 51 | .setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = left) { 52 | ._setArrow(@arrowsize, @borderColor, @borderWidth); 53 | transform: matrix(-0.71,-0.71,0.71,-0.71,0,0); // rotate(-135deg); 54 | 55 | position: relative; 56 | top: -2px; 57 | } -------------------------------------------------------------------------------- /src/style/base/mixin/setOnepx.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | .setTopLine(@c: #C7C7C7) { 22 | content: " "; 23 | position: absolute; 24 | left: 0; 25 | top: 0; 26 | right: 0; 27 | height: 1px; 28 | border-top: 1rpx solid @c; 29 | color: @c; 30 | } 31 | 32 | .setBottomLine(@c: #C7C7C7) { 33 | content: " "; 34 | position: absolute; 35 | left: 0; 36 | bottom: 0; 37 | right: 0; 38 | height: 1px; 39 | border-bottom: 1rpx solid @c; 40 | color: @c; 41 | } 42 | 43 | .setLeftLine(@c: #C7C7C7) { 44 | content: " "; 45 | position: absolute; 46 | left: 0; 47 | top: 0; 48 | width: 1px; 49 | bottom: 0; 50 | border-left: 1rpx solid @c; 51 | color: @c; 52 | } 53 | 54 | .setRightLine(@c: #C7C7C7) { 55 | content: " "; 56 | position: absolute; 57 | right: 0; 58 | top: 0; 59 | width: 1px; 60 | bottom: 0; 61 | border-right: 1rpx solid @c; 62 | color: @c; 63 | } -------------------------------------------------------------------------------- /src/style/base/mixin/text.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | .ellipsis(@w:auto) { 22 | width: @w; 23 | overflow: hidden; 24 | text-overflow: ellipsis; 25 | white-space: nowrap; 26 | word-wrap: normal; 27 | } 28 | 29 | .ellipsisLn(@line) { 30 | overflow: hidden; 31 | text-overflow: ellipsis; 32 | display: -webkit-box; 33 | -webkit-box-orient: vertical; 34 | -webkit-line-clamp: @line; 35 | } 36 | .text_wrap() { 37 | word-wrap:break-word; 38 | word-break:break-all; 39 | } 40 | .hyphens() { 41 | word-wrap:break-word; 42 | -webkit-hyphens:auto; 43 | hyphens:auto; 44 | } -------------------------------------------------------------------------------- /src/style/base/reset.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "fn.wxss"; 22 | 23 | page { 24 | line-height: 1.6; 25 | font-family: @weuiFontDefault; 26 | } 27 | 28 | icon{ 29 | vertical-align: middle; 30 | } -------------------------------------------------------------------------------- /src/style/base/variable/color.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | // color 22 | @weuiColorPrimary: #1AAD19; 23 | @weuiColorWarn: #E64340; 24 | 25 | // link 26 | @weuiLinkColorDefault: #586C94; 27 | 28 | // background 29 | @weuiBgColorDefault: #EFEFF4; 30 | @weuiBgColorActive: #ECECEC; 31 | 32 | // line 33 | @weuiLineColorLight: #E5E5E5; 34 | @weuiLineColorDark: #BCBAB6; 35 | 36 | // text 37 | @weuiTextColorTitle: #000000; 38 | @weuiTextColorTips: #B2B2B2; 39 | @weuiTextColorWarn: @weuiColorWarn; 40 | @weuiTextColorGray: #999999; -------------------------------------------------------------------------------- /src/style/base/variable/global.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | // font 22 | @weuiFontEN:-apple-system-font,"Helvetica Neue"; 23 | @weuiFontCN:"PingFang SC","Hiragino Sans GB","Microsoft YaHei"; 24 | @weuiFontSans:sans-serif; 25 | @weuiFontDefault:@weuiFontEN,@weuiFontSans; -------------------------------------------------------------------------------- /src/style/base/variable/weui-button.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @weuiBtnDefaultGap:15px; -------------------------------------------------------------------------------- /src/style/base/variable/weui-cell.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @weuiCellBg:#FFFFFF; 22 | @weuiCellBorderColor:#D9D9D9; 23 | @weuiCellGapV:10px; 24 | @weuiCellGapH:15px; 25 | @weuiCellInnerGapH:.35em; 26 | @weuiCellFontSize:17px; 27 | @weuiCellHeight: 44px; 28 | @weuiCellHeightEm: unit(@weuiCellHeight / @weuiCellFontSize, em); 29 | @weuiCellTipsFontSize:14px; 30 | @weuiCellLabelWidth:105px; 31 | @weuiCellActiveBg: #ECECEC; 32 | 33 | @weuiCellLineHeight: unit((@weuiCellHeight - 2 * @weuiCellGapV) / @weuiCellFontSize); // 高度为44px，减去上下padding的行高 34 | @weuiCellsMarginTop:unit(20 / @weuiCellFontSize, em); 35 | 36 | // weui switch 37 | @weuiSwitchHeight: 32px; 38 | 39 | // weui uploader 40 | @weuiUploaderBorderColor:#D9D9D9; 41 | @weuiUploaderActiveBorderColor:#999999; 42 | @weuiUploaderFileSpacing: 9px; 43 | @weuiUploaderSize: 79px; 44 | @weuiUploaderBorderWidth: 1px; -------------------------------------------------------------------------------- /src/style/base/variable/weui-dialog.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @weuiDialogBackgroundColor: #FFFFFF; 22 | @weuiDialogLineColor: #D5D5D6; 23 | @weuiDialogLinkColor: #3CC51F; 24 | @weuiDialogLinkActiveBc: #EEEEEE; 25 | @weuiDialogGapWidth: 1.6em; 26 | -------------------------------------------------------------------------------- /src/style/base/variable/weui-grid.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @weuiGridBorderColor:#D9D9D9; 22 | @weuiGridFontSize: 14px; 23 | @weuiGridIconSize: 28px; 24 | @weuiGridColumnCount: 3; -------------------------------------------------------------------------------- /src/style/base/variable/weui-msg.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @weuiMsgPaddingTop:36px; 22 | @weuiMsgIconGap:30px; 23 | @weuiMsgTitleGap:5px; 24 | @weuiMsgTextGap:25px; 25 | @weuiMsgOprGap:25px; 26 | @weuiMsgExtraAreaGap:15px; 27 | @weuiMsgExtraAreaOfMinHeight:438px; -------------------------------------------------------------------------------- /src/style/base/variable/weui-progress.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @weuiProgressBg: #EBEBEB; 22 | @weuiProgressColor: #09BB07; 23 | @weuiProgressHeight: 3px; 24 | @weuiProgressCloseBg: #EF4F4F; 25 | @weuiProgressActiveBg: #C13E3E; 26 | -------------------------------------------------------------------------------- /src/style/weui.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "base/reset.wxss"; 22 | 23 | @import "widget/weui-cell/weui-cell.wxss"; 24 | @import "widget/weui-cell/weui-access.wxss"; 25 | @import "widget/weui-cell/weui-check.wxss"; 26 | @import "widget/weui-cell/weui-form.wxss"; 27 | @import "widget/weui-cell/weui-switch.wxss"; 28 | @import "widget/weui-cell/weui-uploader.wxss"; 29 | 30 | @import "./widget/weui-page/weui-article.wxss"; 31 | @import "./widget/weui-page/weui-msg.wxss"; 32 | 33 | @import "widget/weui-flex/weui-flex.wxss"; 34 | 35 | @import "widget/weui-button/weui-button.wxss"; 36 | 37 | @import "./widget/weui-agree/weui-agree.wxss"; 38 | 39 | @import "./widget/weui-footer/weui-footer.wxss"; 40 | 41 | @import "./widget/weui-grid/weui-grid.wxss"; 42 | 43 | @import "./widget/weui-loading/weui-loading.wxss"; 44 | 45 | @import "./widget/weui-tips/weui-badge.wxss"; 46 | @import "./widget/weui-tips/weui-loadmore.wxss"; 47 | 48 | @import "./widget/weui-panel/weui-panel.wxss"; 49 | 50 | @import "./widget/weui-media-box/weui-media-box.wxss"; 51 | 52 | @import "./widget/weui-progress/weui-progress.wxss"; 53 | 54 | @import "./widget/weui-tab/weui-tab.wxss"; 55 | 56 | @import "./widget/weui-searchbar/weui-searchbar.wxss"; -------------------------------------------------------------------------------- /src/style/widget/weui-agree/weui-agree.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-agree{ 24 | display: block; 25 | padding: .5em 15px; 26 | font-size: 13px; 27 | } 28 | .weui-agree__text{ 29 | color: @weuiTextColorGray; 30 | } 31 | .weui-agree__link{ 32 | display: inline; 33 | color: @weuiLinkColorDefault; 34 | } 35 | .weui-agree__checkbox{ 36 | position: absolute; 37 | left: -9999px; 38 | } 39 | .weui-agree__checkbox-icon{ 40 | position: relative; 41 | top: 2px; 42 | display: inline-block; 43 | border: 1px solid #D1D1D1; 44 | background-color: #FFFFFF; 45 | border-radius: 3px; 46 | width: 11px; 47 | height: 11px; 48 | } 49 | .weui-agree__checkbox-icon-check{ 50 | position: absolute; 51 | top: 1px; 52 | left: 1px; 53 | } -------------------------------------------------------------------------------- /src/style/widget/weui-animate/weui-animate.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | @keyframes slideUp { 24 | from { 25 | transform: translate3d(0, 100%, 0); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | 33 | .weui-animate-slide-up { 34 | animation: slideUp ease .3s forwards; 35 | } 36 | 37 | @keyframes slideDown { 38 | from { 39 | transform: translate3d(0, 0, 0); 40 | } 41 | 42 | to { 43 | transform: translate3d(0, 100%, 0); 44 | } 45 | } 46 | 47 | .weui-animate-slide-down { 48 | animation: slideDown ease .3s forwards; 49 | } 50 | 51 | @keyframes fadeIn { 52 | from { 53 | opacity: 0; 54 | } 55 | to { 56 | opacity: 1; 57 | } 58 | } 59 | 60 | .weui-animate-fade-in { 61 | animation: fadeIn ease .3s forwards; 62 | } 63 | 64 | @keyframes fadeOut { 65 | from { 66 | opacity: 1; 67 | } 68 | to { 69 | opacity: 0; 70 | } 71 | } 72 | 73 | .weui-animate-fade-out { 74 | animation: fadeOut ease .3s forwards; 75 | } -------------------------------------------------------------------------------- /src/style/widget/weui-button/weui-button.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-btn{ 24 | margin-top: @weuiBtnDefaultGap; 25 | &:first-child{ 26 | margin-top: 0; 27 | } 28 | } 29 | .weui-btn-area{ 30 | margin: @weuiCellsMarginTop @weuiBtnDefaultGap .3em; 31 | } -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-access.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-cell_access { 24 | color: inherit; 25 | } 26 | .weui-cell__ft_in-access { 27 | padding-right: 13px; 28 | position: relative; 29 | &:after { 30 | content: " "; 31 | .setArrow(right, 6px, #C8C8CD, 2px); 32 | position: absolute; 33 | top: 50%; 34 | margin-top: -4px; 35 | right: 2px; 36 | } 37 | } 38 | .weui-cell_link{ 39 | color: @weuiLinkColorDefault; 40 | font-size: 14px; 41 | 42 | &:active{ 43 | background-color: @weuiCellActiveBg; 44 | } 45 | 46 | // 由于weui-cell:first-child的:before为隐藏，所以这里要重新显示出来 47 | &:first-child{ 48 | &:before{ 49 | display: block; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-cell.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-cells { 24 | position: relative; 25 | margin-top: @weuiCellsMarginTop; 26 | background-color: @weuiCellBg; 27 | line-height: @weuiCellLineHeight; 28 | font-size: @weuiCellFontSize; //cell中间有效高度23px，跟客户端默认图标尺寸一致 29 | &:before { 30 | .setTopLine(@weuiCellBorderColor); 31 | } 32 | &:after { 33 | .setBottomLine(@weuiCellBorderColor); 34 | } 35 | } 36 | 37 | .weui-cells__title { 38 | margin-top: .77em; // 15px - 行高 39 | margin-bottom: .3em; // 8px - 行高 40 | padding-left: @weuiCellGapH; 41 | padding-right: @weuiCellGapH; 42 | color: @weuiTextColorGray; 43 | font-size: @weuiCellTipsFontSize; 44 | } 45 | .weui-cells_after-title{ 46 | margin-top: 0; 47 | } 48 | 49 | .weui-cells__tips { 50 | margin-top: .3em; // 8px - 行高 51 | color: @weuiTextColorGray; 52 | padding-left: @weuiCellGapH; 53 | padding-right: @weuiCellGapH; 54 | font-size: @weuiCellTipsFontSize; 55 | } 56 | 57 | .weui-cell { 58 | padding: @weuiCellGapV @weuiCellGapH; 59 | position: relative; //这个是为了兼容cells容器onepx方案被before挡住而做的 60 | display: flex; 61 | align-items: center; 62 | &:before { 63 | .setTopLine(@weuiCellBorderColor); 64 | left: @weuiCellGapH; 65 | } 66 | &:first-child { 67 | &:before { 68 | display: none; 69 | } 70 | } 71 | } 72 | .weui-cell_active { 73 | background-color: @weuiCellActiveBg; 74 | } 75 | .weui-cell_primary{ 76 | align-items: flex-start; 77 | } 78 | .weui-cell__bd{ 79 | flex: 1; 80 | } 81 | .weui-cell__ft { 82 | text-align: right; 83 | color: @weuiTextColorGray; 84 | } -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-check.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | // icon 24 | .weui-icon-radio{ 25 | margin-left: 3.2px; 26 | margin-right: 3.2px; 27 | } 28 | .weui-icon-checkbox_circle, 29 | .weui-icon-checkbox_success{ 30 | margin-left: 4.6px; 31 | margin-right: 4.6px; 32 | } 33 | 34 | .weui-check__label{ 35 | &:active{ 36 | background-color: @weuiCellActiveBg; 37 | } 38 | } 39 | .weui-check{ 40 | position: absolute; 41 | left: -9999px; 42 | } 43 | .weui-check__hd_in-checkbox{ 44 | padding-right: @weuiCellInnerGapH; 45 | } 46 | .weui-cell__ft_in-radio{ 47 | padding-left: @weuiCellInnerGapH; 48 | } -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | @import "./weui-form/weui-form_common.wxss"; 23 | @import "./weui-form/weui-form-preview.wxss"; 24 | @import "./weui-form/weui-select.wxss"; 25 | @import "./weui-form/weui-vcode.wxss"; -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form/weui-form-preview.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../../base/fn.wxss"; 22 | 23 | .weui-form-preview{ 24 | position: relative; 25 | background-color: #FFFFFF; 26 | &:before{ 27 | .setTopLine(@weuiCellBorderColor); 28 | } 29 | &:after{ 30 | .setBottomLine(@weuiCellBorderColor); 31 | } 32 | } 33 | .weui-form-preview__value{ 34 | font-size: 14px; 35 | } 36 | .weui-form-preview__value_in-hd{ 37 | font-size: 26px; 38 | } 39 | .weui-form-preview__hd{ 40 | position: relative; 41 | padding: @weuiCellGapV @weuiCellGapH; 42 | text-align: right; 43 | line-height: 2.5em; 44 | &:after{ 45 | .setBottomLine(@weuiCellBorderColor); 46 | left: @weuiCellGapH; 47 | } 48 | } 49 | .weui-form-preview__bd{ 50 | padding: @weuiCellGapV @weuiCellGapH; 51 | font-size: .9em; 52 | text-align: right; 53 | color: @weuiTextColorGray; 54 | line-height: 2; 55 | } 56 | .weui-form-preview__ft{ 57 | position: relative; 58 | line-height: 50px; 59 | display: flex; 60 | &:after { 61 | .setTopLine(@weuiDialogLineColor); 62 | } 63 | } 64 | .weui-form-preview__item{ 65 | overflow: hidden; 66 | } 67 | .weui-form-preview__label{ 68 | float: left; 69 | margin-right: 1em; 70 | min-width: 4em; 71 | color: @weuiTextColorGray; 72 | text-align: justify; 73 | text-align-last: justify; 74 | } 75 | .weui-form-preview__value{ 76 | display: block; 77 | overflow: hidden; 78 | word-break:normal; 79 | word-wrap: break-word; 80 | } 81 | .weui-form-preview__btn { 82 | position: relative; 83 | display: block; 84 | flex: 1; 85 | color: @weuiDialogLinkColor; 86 | text-align: center; 87 | &:after { 88 | .setLeftLine(@weuiDialogLineColor); 89 | } 90 | &:first-child { 91 | &:after { 92 | display: none; 93 | } 94 | } 95 | } 96 | .weui-form-preview__btn_active{ 97 | background-color: @weuiDialogLinkActiveBc; 98 | } 99 | .weui-form-preview__btn_default { 100 | color: @weuiTextColorGray; 101 | } 102 | .weui-form-preview__btn_primary { 103 | color: #0BB20C; 104 | } -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form/weui-form_common.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../../base/fn.wxss"; 22 | 23 | .weui-cell_input{ 24 | padding-top: 0; 25 | padding-bottom: 0; 26 | } 27 | .weui-label{ 28 | width:@weuiCellLabelWidth; 29 | .text_wrap(); 30 | } 31 | .weui-input{ 32 | height: @weuiCellHeightEm; 33 | min-height: @weuiCellHeightEm; 34 | line-height: @weuiCellHeightEm; 35 | } 36 | .weui-toptips{ 37 | //display: none; // 通过 wx:if 来控制 38 | position: fixed; 39 | transform: translateZ(0); 40 | top: 0; 41 | left: 0; 42 | right: 0; 43 | padding: 5px; 44 | font-size: 14px; 45 | text-align: center; 46 | color: #FFFFFF; 47 | z-index: 5000; 48 | .text_wrap(); 49 | } 50 | .weui-toptips_warn{ 51 | background-color: @weuiColorWarn; 52 | } 53 | .weui-textarea{ 54 | display: block; 55 | width: 100%; 56 | } 57 | .weui-textarea-counter{ 58 | color: @weuiTextColorTips; 59 | text-align: right; 60 | } 61 | .weui-textarea-counter_warn{ 62 | color: @weuiTextColorWarn; 63 | } 64 | .weui-cell_warn{ 65 | color: @weuiTextColorWarn; 66 | } -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form/weui-select.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../../base/fn.wxss"; 22 | 23 | .weui-cell_select { 24 | padding: 0; 25 | } 26 | .weui-select { 27 | position: relative; 28 | padding-left: @weuiCellGapH; 29 | padding-right: 30px; 30 | 31 | height: @weuiCellHeightEm; 32 | min-height: @weuiCellHeightEm; 33 | line-height: @weuiCellHeightEm; 34 | 35 | border-right: 1rpx solid @weuiCellBorderColor; 36 | 37 | &:before{ 38 | content: " "; 39 | .setArrow(right, 6px, #C8C8CD, 2px); 40 | 41 | position: absolute; 42 | top: 50%; 43 | right: @weuiCellGapH; 44 | margin-top: -4px; 45 | } 46 | &_in-select-after{ 47 | padding-left: 0; 48 | } 49 | } 50 | .weui-cell__hd_in-select-after, 51 | .weui-cell__bd_in-select-before{ 52 | padding-left: @weuiCellGapH; 53 | } -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form/weui-vcode.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../../base/fn.wxss"; 22 | 23 | .weui-cell_vcode { 24 | padding-right: 0; 25 | } 26 | .weui-vcode-img{ 27 | margin-left: 5px; 28 | height: unit(@weuiCellHeight / @weuiCellFontSize, em); 29 | vertical-align: middle; 30 | } 31 | .weui-vcode-btn { 32 | display: inline-block; 33 | height: unit(@weuiCellHeight / @weuiCellFontSize, em); 34 | margin-left: 5px; 35 | padding: 0 0.6em 0 0.7em; 36 | border-left: 1px solid @weuiLineColorLight; 37 | line-height: unit(@weuiCellHeight / @weuiCellFontSize, em); 38 | vertical-align: middle; 39 | font-size: @weuiCellFontSize; 40 | color: @weuiDialogLinkColor; 41 | white-space: nowrap; 42 | &:active { 43 | color: desaturate(@weuiDialogLinkColor, 30%); 44 | } 45 | } -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-switch.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-cell_switch{ 24 | padding-top: (@weuiCellHeight - @weuiSwitchHeight) / 2; 25 | padding-bottom: (@weuiCellHeight - @weuiSwitchHeight) / 2; 26 | } -------------------------------------------------------------------------------- /src/style/widget/weui-flex/weui-flex.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-flex { 24 | display: flex; 25 | } 26 | .weui-flex__item{ 27 | flex: 1; 28 | } -------------------------------------------------------------------------------- /src/style/widget/weui-footer/weui-footer.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-footer { 24 | color: @weuiTextColorGray; 25 | font-size: 14px; 26 | text-align: center; 27 | } 28 | .weui-footer_fixed-bottom{ 29 | position: fixed; 30 | bottom: .52em; 31 | left: 0; 32 | right: 0; 33 | } 34 | .weui-footer__links{ 35 | font-size: 0; 36 | } 37 | .weui-footer__link{ 38 | display: inline-block; 39 | vertical-align: top; 40 | margin: 0 .62em; 41 | position: relative; 42 | font-size: 14px; 43 | color: @weuiLinkColorDefault; 44 | &:before{ 45 | .setLeftLine(); 46 | left: -.65em; 47 | top: .36em; 48 | bottom: .36em; 49 | } 50 | &:first-child{ 51 | &:before{ 52 | display: none; 53 | } 54 | } 55 | } 56 | .weui-footer__text{ 57 | padding: 0 .34em; 58 | font-size: 12px; 59 | } -------------------------------------------------------------------------------- /src/style/widget/weui-grid/weui-grid.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-grids { 24 | border-top: 1rpx solid @weuiGridBorderColor; 25 | border-left: 1rpx solid @weuiGridBorderColor; 26 | overflow: hidden; 27 | } 28 | .weui-grid { 29 | position: relative; 30 | float: left; 31 | padding: 20px 10px; 32 | width: 100% / @weuiGridColumnCount; 33 | box-sizing: border-box; 34 | 35 | border-right: 1rpx solid @weuiGridBorderColor; 36 | border-bottom: 1rpx solid @weuiGridBorderColor; 37 | &_active{ 38 | background-color: @weuiBgColorActive; 39 | } 40 | } 41 | .weui-grid__icon { 42 | display: block; 43 | width: @weuiGridIconSize; 44 | height: @weuiGridIconSize; 45 | margin: 0 auto; 46 | } 47 | .weui-grid__label { 48 | margin-top: 5px; 49 | display: block; 50 | text-align: center; 51 | color: @weuiTextColorTitle; 52 | font-size: @weuiGridFontSize; 53 | white-space: nowrap; 54 | text-overflow: ellipsis; 55 | overflow: hidden; 56 | } 57 | -------------------------------------------------------------------------------- /src/style/widget/weui-media-box/weui-media-box.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-media-box { 24 | padding: 15px; 25 | position: relative; 26 | &:before { 27 | .setTopLine(@weuiLineColorLight); 28 | left: 15px; 29 | } 30 | &:first-child { 31 | &:before { 32 | display: none 33 | } 34 | } 35 | } 36 | .weui-media-box__title { 37 | font-weight: 400; 38 | font-size: 17px; 39 | .ellipsis(); 40 | word-wrap: break-word; 41 | word-break: break-all; 42 | } 43 | .weui-media-box__desc { 44 | color: @weuiTextColorGray; 45 | font-size: 13px; 46 | line-height: 1.2; 47 | .ellipsisLn(2); 48 | } 49 | .weui-media-box__info { 50 | margin-top: 15px; 51 | padding-bottom: 5px; 52 | font-size: 13px; 53 | color: #CECECE; 54 | line-height: 1em; 55 | list-style: none; 56 | overflow: hidden; 57 | } 58 | .weui-media-box__info__meta { 59 | float: left; 60 | padding-right: 1em; 61 | } 62 | .weui-media-box__info__meta_extra { 63 | padding-left: 1em; 64 | border-left: 1px solid #CECECE; 65 | } 66 | .weui-media-box_text { 67 | } 68 | .weui-media-box__title_in-text { 69 | margin-bottom: 8px; 70 | } 71 | .weui-media-box_appmsg { 72 | display: flex; 73 | align-items: center; 74 | } 75 | .weui-media-box__thumb { 76 | width: 100%; 77 | height: 100%; 78 | vertical-align: top; 79 | } 80 | .weui-media-box__hd_in-appmsg { 81 | margin-right: .8em; 82 | width: 60px; 83 | height: 60px; 84 | line-height: 60px; 85 | text-align: center; 86 | } 87 | .weui-media-box__bd_in-appmsg { 88 | flex: 1; 89 | min-width: 0; 90 | } 91 | .weui-media-box_small-appmsg { 92 | padding: 0; 93 | } 94 | .weui-cells_in-small-appmsg { 95 | margin-top: 0; 96 | &:before { 97 | display: none; 98 | } 99 | } -------------------------------------------------------------------------------- /src/style/widget/weui-page/weui-article.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-article { 24 | padding: 20px 15px; 25 | font-size: 15px; 26 | } 27 | .weui-article__section { 28 | margin-bottom: 1.5em; 29 | } 30 | .weui-article__h1 { 31 | font-size: 18px; 32 | font-weight:400; 33 | margin-bottom: .9em; 34 | } 35 | .weui-article__h2 { 36 | font-size: 16px; 37 | font-weight:400; 38 | margin-bottom: .34em; 39 | } 40 | .weui-article__h3 { 41 | font-weight:400; 42 | font-size: 15px; 43 | margin-bottom: .34em; 44 | } 45 | .weui-article__p { 46 | margin: 0 0 .8em; 47 | } -------------------------------------------------------------------------------- /src/style/widget/weui-page/weui-msg.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-msg { 24 | padding-top: @weuiMsgPaddingTop; 25 | text-align: center; 26 | } 27 | .weui-msg__link{ 28 | display: inline; 29 | color: @weuiLinkColorDefault; 30 | } 31 | .weui-msg__icon-area { 32 | margin-bottom: @weuiMsgIconGap; 33 | } 34 | .weui-msg__text-area { 35 | margin-bottom: @weuiMsgTextGap; 36 | padding:0 20px; 37 | } 38 | .weui-msg__title { 39 | margin-bottom: @weuiMsgTitleGap; 40 | font-weight: 400; 41 | font-size: 20px; 42 | } 43 | .weui-msg__desc { 44 | font-size: 14px; 45 | color: @weuiTextColorGray; 46 | } 47 | .weui-msg__opr-area { 48 | margin-bottom: @weuiMsgOprGap; 49 | } 50 | .weui-msg__extra-area { 51 | margin-bottom: @weuiMsgExtraAreaGap; 52 | font-size: 14px; 53 | color: @weuiTextColorGray; 54 | } 55 | 56 | @media screen and (min-height: @weuiMsgExtraAreaOfMinHeight) { 57 | .weui-msg__extra-area { 58 | position: fixed; 59 | left: 0; 60 | bottom: 0; 61 | width: 100%; 62 | text-align: center; 63 | } 64 | } -------------------------------------------------------------------------------- /src/style/widget/weui-panel/weui-panel.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | 24 | .weui-panel { 25 | background-color: #FFFFFF; 26 | margin-top: 10px; 27 | &:first-child { 28 | margin-top: 0; 29 | } 30 | 31 | position: relative; 32 | overflow: hidden; 33 | &:before { 34 | .setTopLine(@weuiLineColorLight); 35 | } 36 | &:after { 37 | .setBottomLine(@weuiLineColorLight); 38 | } 39 | } 40 | 41 | .weui-panel__hd { 42 | padding: 14px 15px 10px; 43 | color: @weuiTextColorGray; 44 | font-size: 13px; 45 | position: relative; 46 | &:after { 47 | .setBottomLine(@weuiLineColorLight); 48 | left: 15px; 49 | } 50 | } 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /src/style/widget/weui-progress/weui-progress.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-progress { 24 | display: flex; 25 | align-items: center; 26 | } 27 | 28 | .weui-progress__bar { 29 | flex: 1; 30 | } 31 | 32 | .weui-progress__opr { 33 | margin-left: 15px; 34 | font-size: 0; 35 | } -------------------------------------------------------------------------------- /src/style/widget/weui-searchbar/weui-searchbar.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | @weuiSearchBarHeight: 28px; 24 | 25 | .weui-search-bar { 26 | position: relative; 27 | padding: 8px 10px; 28 | display: flex; 29 | box-sizing: border-box; 30 | background-color: #EFEFF4; 31 | border-top: 1rpx solid #D7D6DC; 32 | border-bottom: 1rpx solid #D7D6DC; 33 | } 34 | .weui-icon-search { 35 | margin-right: 8px; 36 | font-size:inherit; 37 | } 38 | .weui-icon-search_in-box { 39 | position: absolute; 40 | left: 10px; 41 | top: 7px; 42 | } 43 | .weui-search-bar__text{ 44 | display: inline-block; 45 | font-size: 14px; 46 | vertical-align: middle; 47 | } 48 | .weui-search-bar__form { 49 | position: relative; 50 | flex: auto; 51 | border-radius: 5px; 52 | background: #FFFFFF; 53 | border: 1rpx solid #E6E6EA; 54 | } 55 | .weui-search-bar__box { 56 | position: relative; 57 | padding-left: 30px; 58 | padding-right: 30px; 59 | width: 100%; 60 | box-sizing: border-box; 61 | z-index: 1; 62 | } 63 | .weui-search-bar__input { 64 | height: @weuiSearchBarHeight; 65 | line-height: @weuiSearchBarHeight; 66 | font-size: 14px; 67 | } 68 | .weui-icon-clear { 69 | position: absolute; 70 | top: 0; 71 | right: 0; 72 | padding: 7px 8px; 73 | font-size: 0; 74 | } 75 | .weui-search-bar__label { 76 | position: absolute; 77 | top: 0; 78 | right: 0; 79 | bottom: 0; 80 | left: 0; 81 | z-index: 2; 82 | border-radius: 3px; 83 | text-align: center; 84 | color: #9B9B9B; 85 | background: #FFFFFF; 86 | line-height: @weuiSearchBarHeight; 87 | } 88 | .weui-search-bar__cancel-btn { 89 | margin-left: 10px; 90 | line-height: @weuiSearchBarHeight; 91 | color: #09BB07; 92 | white-space: nowrap; 93 | } 94 | -------------------------------------------------------------------------------- /src/style/widget/weui-tab/weui-navbar.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | @weuiNavBarColor: #1AAD19; 24 | .weui-navbar { 25 | display: flex; 26 | position: absolute; 27 | z-index: 500; 28 | top: 0; 29 | width: 100%; 30 | border-bottom: 1rpx solid #CCCCCC; 31 | } 32 | 33 | .weui-navbar__item { 34 | position: relative; 35 | display: block; 36 | flex: 1; 37 | padding: 13px 0; 38 | text-align: center; 39 | font-size: 0; 40 | 41 | &.weui-bar__item_on { 42 | color: @weuiNavBarColor; 43 | } 44 | } 45 | .weui-navbar__slider { 46 | position: absolute; 47 | content: " "; 48 | left: 0; 49 | bottom: 0; 50 | width: 6em; 51 | height: 3px; 52 | background-color: @weuiNavBarColor; 53 | transition: transform .3s; 54 | } 55 | .weui-navbar__title{ 56 | display: inline-block; 57 | font-size: 15px; 58 | max-width: 8em; 59 | .ellipsis(); 60 | } -------------------------------------------------------------------------------- /src/style/widget/weui-tab/weui-tab.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | @import "weui-navbar.wxss"; 23 | 24 | .weui-tab { 25 | position: relative; 26 | height: 100%; 27 | } 28 | 29 | .weui-tab__panel{ 30 | box-sizing: border-box; 31 | height: 100%; 32 | padding-top: 50px; 33 | overflow: auto; 34 | -webkit-overflow-scrolling: touch; 35 | } -------------------------------------------------------------------------------- /src/style/widget/weui-tips/weui-badge.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-badge { 24 | display: inline-block; 25 | padding: .15em .4em; 26 | min-width: 8px; 27 | border-radius: 18px; 28 | background-color: @weuiColorWarn; 29 | color: #FFFFFF; 30 | line-height: 1.2; 31 | text-align: center; 32 | font-size: 12px; 33 | vertical-align: middle; 34 | } 35 | .weui-badge_dot { 36 | padding: .4em; 37 | min-width: 0; 38 | } -------------------------------------------------------------------------------- /src/style/widget/weui-tips/weui-loadmore.wxss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tencent is pleased to support the open source community by making 3 | * WeUI-WXSS available. 4 | * 5 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. 6 | * All rights reserved. 7 | * 8 | * Licensed under the MIT License (the "License"); you may not use 9 | * this file except in compliance with the License. You may obtain a copy of 10 | * the License at 11 | * 12 | * http://opensource.org/licenses/MIT 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | 21 | @import "../../base/fn.wxss"; 22 | 23 | .weui-loadmore{ 24 | width: 65%; 25 | margin:1.5em auto; 26 | line-height: 1.6em; 27 | font-size:14px; 28 | text-align: center; 29 | } 30 | .weui-loadmore__tips{ 31 | display: inline-block; 32 | vertical-align: middle; 33 | } 34 | .weui-loadmore_line{ 35 | border-top:1px solid @weuiLineColorLight; 36 | margin-top:2.4em; 37 | } 38 | .weui-loadmore__tips_in-line{ 39 | position: relative; 40 | top:-.9em; 41 | padding:0 .55em; 42 | background-color: #FFFFFF; 43 | color:@weuiTextColorGray; 44 | } 45 | .weui-loadmore_dot{ 46 | } 47 | .weui-loadmore__tips_in-dot{ 48 | position: relative; 49 | padding:0 .16em; 50 | width: 4px; 51 | height: 1.6em; 52 | &:before{ 53 | content: " "; 54 | position: absolute; 55 | top: 50%; 56 | left: 50%; 57 | margin-top: -1px; 58 | margin-left: -2px; 59 | width: 4px; 60 | height: 4px; 61 | border-radius: 50%; 62 | background-color: @weuiLineColorLight; 63 | } 64 | } --------------------------------------------------------------------------------