├── License.md ├── README.md ├── app.js ├── app.json ├── app.wxss ├── dist └── wa-ui.wxss ├── image ├── show │ ├── GIF_wa.gif │ ├── background-color.png │ ├── basic.png │ ├── button-color.png │ ├── button-icon.png │ ├── button.png │ ├── general.png │ ├── get_started.png │ ├── grid-view.png │ ├── grid.png │ ├── input.png │ ├── list.png │ └── mark.png └── user.jpg ├── pages ├── background-color │ ├── background-color.js │ ├── background-color.json │ ├── background-color.wxml │ └── background-color.wxss ├── basic │ ├── basic.js │ ├── basic.json │ ├── basic.wxml │ └── basic.wxss ├── button-icon │ ├── button-icon.js │ ├── button-icon.json │ ├── button-icon.wxml │ └── button-icon.wxss ├── button │ ├── button.js │ ├── button.json │ ├── button.wxml │ └── button.wxss ├── general │ ├── general.js │ ├── general.json │ ├── general.wxml │ └── general.wxss ├── grid-view │ ├── grid-view.js │ ├── grid-view.json │ ├── grid-view.wxml │ └── grid-view.wxss ├── grid │ ├── grid.js │ ├── grid.json │ ├── grid.wxml │ └── grid.wxss ├── index │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── input │ ├── input.js │ ├── input.json │ ├── input.wxml │ └── input.wxss ├── list │ ├── list.js │ ├── list.json │ ├── list.wxml │ └── list.wxss ├── mark │ ├── mark.js │ ├── mark.json │ ├── mark.wxml │ └── mark.wxss ├── start │ ├── start.js │ ├── start.json │ ├── start.wxml │ └── start.wxss └── test │ ├── test.js │ ├── test.json │ ├── test.wxml │ └── test.wxss ├── update.md ├── utils └── util.js └── wa-ui.wxss /License.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 liujians 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Wa-UI 2 | 针对微信小程序整合的一套UI库 by liujians [http://liujians.me](http://liujians.me) 3 | 4 | ## 由于此项目是2016年10月小程序内测时、作者自己使用的UI库（当时市面上还没有小程序的ui库）、目前更推荐大家选择we-ui使用、此项目已不在维护、深表歉意 5 | 6 | 微信小程序组件如此之丰富、你还需要重量级的组件库来冗余代码吗？ 7 | 8 | 所以只需要Wa-UI这个轻量级的库很快捷的做布局就可以了 9 | 10 | ##使用须知 11 | import引入即可使用，[快速开始](https://github.com/liujians/wa-ui/wiki/get%20started) 12 | 13 | Wa-UI说明文档请参考[Wiki](https://github.com/liujians/wa-ui/wiki "wiki") 14 | 15 | IDE更新2800版本之后外部字体icon暂时不能用了，可以使用官方icon和图片替代 16 | ###展示 17 | 18 | 栅格（想要几几分？） 19 | 20 | ![](https://github.com/liujians/Wa-UI/blob/master/image/show/grid.png) 21 | ![](https://github.com/liujians/Wa-UI/blob/master/image/show/grid-view.png) 22 | 23 | 列表 24 | 25 | ![](https://github.com/liujians/Wa-UI/blob/master/image/show/list.png) 26 | 27 | ## 目前样式 ## 28 | ### 列表 29 | - 列表&列表项 30 | - 带头像的列表项 31 | - 带缩略图的列表项 32 | - 列表间隔空间 33 | - 列表icon（icon暂停使用） 34 | 35 | ### 表单 36 | 37 | - 按钮三种大小 38 | - 按钮六种颜色 39 | - input默认样式 40 | - input横向 41 | - input堆叠 42 | - 带icon的input（icon暂停使用） 43 | - 带icon的button（icon暂停使用） 44 | 45 | ###布局 46 | 47 | - row&col基于flex的网格布局 48 | - grid-view 基于float的九宫格布局 49 | 50 | 不断更新中 51 | 52 | 欢迎一起学习交流 53 | 前端群居所 54 | 55 | 测试使用中，如果你有好的意见或建议请及时联系我 56 | 57 | ###License 58 | 59 | [MIT](https://opensource.org/licenses/MIT) 60 | 61 | Copyright (c) 2016 liujians 62 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | //调用API从本地缓存中获取数据 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | }, 9 | getUserInfo:function(cb){ 10 | var that = this 11 | if(this.globalData.userInfo){ 12 | typeof cb == "function" && cb(this.globalData.userInfo) 13 | }else{ 14 | //调用登录接口 15 | wx.login({ 16 | success: function () { 17 | wx.getUserInfo({ 18 | success: function (res) { 19 | that.globalData.userInfo = res.userInfo 20 | typeof cb == "function" && cb(that.globalData.userInfo) 21 | } 22 | }) 23 | } 24 | }) 25 | } 26 | }, 27 | globalData:{ 28 | userInfo:null 29 | } 30 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | 4 | "pages/index/index", 5 | "pages/general/general", 6 | "pages/basic/basic", 7 | "pages/button/button", 8 | "pages/background-color/background-color", 9 | "pages/button-icon/button-icon", 10 | "pages/list/list", 11 | "pages/grid/grid", 12 | "pages/input/input", 13 | "pages/mark/mark", 14 | "pages/grid-view/grid-view", 15 | "pages/test/test", 16 | 17 | "pages/start/start" 18 | ], 19 | "window":{ 20 | "backgroundTextStyle":"light", 21 | "backgroundColor":"#eee", 22 | "navigationBarBackgroundColor": "#000", 23 | "navigationBarTitleText": "weapp-ui", 24 | "navigationBarTextStyle":"white" 25 | }, 26 | "networkTimeout": { 27 | "request": 10000, 28 | "downloadFile": 10000 29 | }, 30 | "debug": true 31 | } 32 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | @import 'wa-ui.wxss'; -------------------------------------------------------------------------------- /dist/wa-ui.wxss: -------------------------------------------------------------------------------- 1 | /* Wa-UI V 0.7.7 2 | * author:liujians 3 | * https://github.com/liujians/weapp-ui 4 | */ 5 | /*general*/ 6 | page{ 7 | height: 100%; 8 | } 9 | page text{ 10 | font-size: 14px; 11 | font-family: "Helvetica Neue",Helvetica,'microsoft yahei ui', 'microsoft yahei','simhei',Arial,sans-serif 12 | } 13 | page view{ 14 | font-size: 14px; 15 | font-family: "Helvetica Neue",Helvetica,'microsoft yahei ui', 'microsoft yahei','simhei',Arial,sans-serif 16 | } 17 | /*basic*/ 18 | .text-center{ 19 | text-align: center 20 | } 21 | .text-right{ 22 | text-align: right 23 | } 24 | .text-left{ 25 | text-align: left 26 | } 27 | .textSl{ 28 | overflow: hidden; 29 | white-space:nowrap; 30 | text-overflow: ellipsis; 31 | } 32 | .title{ 33 | font-size: 36rpx; 34 | font-weight: bold; 35 | } 36 | .border-basic{ 37 | border: 1px solid #ddd 38 | } 39 | .padding{ 40 | padding:20rpx; 41 | } 42 | .padding-half{ 43 | padding:10rpx; 44 | } 45 | .space{ 46 | background: #f5f5f5; 47 | display:block; 48 | font-weight: 600; 49 | border: 1px solid #ddd; 50 | margin: -1px 0; 51 | padding:20rpx 52 | } 53 | .pull-right{ 54 | float: right; 55 | } 56 | /*background*/ 57 | page .wa-primary{ 58 | border-color: #0c63ee; 59 | background-color: #387ef5; 60 | color: #fff; 61 | } 62 | page .wa-info { 63 | border-color: #0a9ec7; 64 | background-color: #11c1f3; 65 | color: #fff; 66 | } 67 | page .wa-success { 68 | border-color: #28a54c; 69 | background-color: #33cd5f; 70 | color: #fff; 71 | } 72 | page .wa-warning { 73 | border-color: #e6b400; 74 | background-color: #ffc900; 75 | color: #fff; 76 | } 77 | page .wa-danger { 78 | border-color: #e42012; 79 | background-color: #ef473a; 80 | color: #fff; 81 | } 82 | page .wa-dark { 83 | border-color: #111; 84 | background-color: #444; 85 | color: #fff; 86 | } 87 | /*list*/ 88 | .wa-list{ 89 | width:100%; 90 | position:relative; 91 | } 92 | .wa-item{ 93 | width: 100%; 94 | border: 1px solid #ddd; 95 | margin: -1px 0; 96 | font-size: 16px; 97 | display: block; 98 | color: #444; 99 | padding:10px; 100 | height: 40px; 101 | box-sizing: border-box; 102 | position:relative; 103 | } 104 | .wa-item-ava{ 105 | padding-left:60px; 106 | min-height: 60px; 107 | } 108 | .wa-item-ava .item-img{ 109 | position:absolute; 110 | top:10px; 111 | left: 10px; 112 | width: 40px; 113 | height: 40px; 114 | } 115 | .wa-item-ava .item-img-round{ 116 | position:absolute; 117 | top:10px; 118 | left: 10px; 119 | width: 40px; 120 | height: 40px; 121 | border-radius: 50%; 122 | } 123 | .wa-item-thumbnail-left{ 124 | padding-left:100px; 125 | min-height: 100px; 126 | } 127 | .wa-item-thumbnail-left .item-img{ 128 | position:absolute; 129 | top:10px; 130 | left: 10px; 131 | width: 80px; 132 | height: 80px; 133 | } 134 | .wa-item-thumbnail-right{ 135 | padding-right:100px; 136 | min-height: 100px; 137 | } 138 | .wa-item-thumbnail-right .item-img{ 139 | position:absolute; 140 | top:10px; 141 | right: 10px; 142 | width: 80px; 143 | height: 80px; 144 | } 145 | .wa-item:active{ 146 | background-color: #e5e5e5; 147 | } 148 | .wa-item .icon-left{ 149 | float: left; 150 | font-size: 20px; 151 | line-height: 20px; 152 | } 153 | .wa-item .icon-right{ 154 | float: right; 155 | font-size: 20px; 156 | line-height: 20px; 157 | opacity: .4; 158 | } 159 | .wa-item-thumbnail-left .icon-right{ 160 | float: right; 161 | font-size: 20px; 162 | line-height: 80px; 163 | opacity: .4; 164 | } 165 | .wa-item-ava .icon-right{ 166 | float: right; 167 | font-size: 20px; 168 | line-height: 40px; 169 | opacity: .4; 170 | } 171 | .icon-left::before{ 172 | width: 20px; 173 | } 174 | .icon-right::before{ 175 | width: 20px; 176 | } 177 | /*button*/ 178 | .wa-button{ 179 | border-color: #b2b2b2; 180 | background-color: #f8f8f8; 181 | color: #444; 182 | position: relative; 183 | display: inline-block; 184 | margin: 0; 185 | padding: 0 12px; 186 | min-width: 120rpx; 187 | min-height: 40px; 188 | border-width: 1px; 189 | border-style: solid; 190 | border-radius: 2px; 191 | vertical-align: top; 192 | text-align: center; 193 | text-overflow: ellipsis; 194 | font-size: 16px; 195 | line-height: 38px; 196 | } 197 | 198 | .wa-button-block{ 199 | width:100%; 200 | } 201 | .wa-button-sm{ 202 | padding: 0 8px; 203 | min-width: 90rpx; 204 | min-height: 28px; 205 | font-size: 12px; 206 | line-height: 26px; 207 | } 208 | .wa-button-lg{ 209 | padding: 0 16px; 210 | min-width: 150rpx; 211 | min-height: 52px; 212 | font-size: 20px; 213 | line-height: 48px; 214 | } 215 | .wa-button:active{ 216 | border-color: #999; 217 | background: #ccc; 218 | color: #444 219 | } 220 | /*.wa-button-dark:active{ 221 | background: #333; 222 | color: #eee 223 | }*/ 224 | .wa-button-outline{ 225 | border-color: #b2b2b2; 226 | background: transparent; 227 | color: #b2b2b2; 228 | } 229 | .wa-button .icon-left{ 230 | padding-right:8rpx; 231 | font-size: 36rpx; 232 | } 233 | .wa-button-sm .icon-left{ 234 | padding-right:5px; 235 | font-size: 26rpx 236 | } 237 | .wa-button-lg .icon-left{ 238 | padding-right:5px; 239 | font-size: 46rpx 240 | } 241 | .wa-button .icon-right{ 242 | float:right; 243 | line-height: 38px; 244 | padding-left:5px; 245 | font-size: 36rpx; 246 | } 247 | .wa-button-sm .icon-right{ 248 | float:right; 249 | line-height: 26px; 250 | padding-left:5px; 251 | font-size: 22rpx 252 | } 253 | .wa-button-lg .icon-right{ 254 | float:right; 255 | line-height: 48px; 256 | padding-left:5px; 257 | font-size: 46rpx 258 | } 259 | /*input*/ 260 | .wa-input{ 261 | display: block; 262 | height: 34px; 263 | color: #111; 264 | font-size: 14px; 265 | line-height: 16px; 266 | flex: 1; 267 | } 268 | .wa-input-item{ 269 | display: flex; 270 | padding:20rpx; 271 | border: 1px solid #ddd; 272 | margin: -1px 0; 273 | } 274 | .wa-input-label{ 275 | flex: 0 0 100px; 276 | font-size: 14px; 277 | line-height: 26px; 278 | font-weight: bold; 279 | padding: 4px 0; 280 | } 281 | .wa-input-stacked{ 282 | padding:20rpx; 283 | } 284 | .wa-input-stacked input{ 285 | width: 100% 286 | } 287 | .wa-input-icon{ 288 | padding: 5px; 289 | padding-left: 44px; 290 | position: relative; 291 | border: 1px solid #ddd; 292 | border-radius: 3px; 293 | } 294 | .wa-input-icon .icon-left{ 295 | text-align: center; 296 | position: absolute; 297 | top: 5px; 298 | left: 5px; 299 | width: 34px; 300 | height: 34px; 301 | line-height: 34px; 302 | font-size: 20px; 303 | } 304 | .placeholder-icon{ 305 | color: #aaa; 306 | } 307 | /*radio*/ 308 | /*.wa-radio radio{ 309 | visibility: hidden; 310 | }*/ 311 | /*.wa-radio radio::before{ 312 | content:" "; 313 | width:500px; 314 | height: 500px; 315 | background: red; 316 | }*/ 317 | /*.wa-radio{ 318 | background: red; 319 | }*/ 320 | /*.wa-radio radio:checked:before{ 321 | background: blue; 322 | }*/ 323 | /*mark*/ 324 | .wa-mark{ 325 | border-radius: 20px; 326 | padding: 2px 6px; 327 | font-size: 12px; 328 | 329 | } 330 | .wa-item .wa-mark{ 331 | margin-top: -2px; 332 | } 333 | /*grid*/ 334 | .wa-row{ 335 | display: flex; 336 | padding: 10rpx; 337 | width: 100%; 338 | box-sizing: border-box 339 | } 340 | .wa-col{ 341 | flex:1; 342 | display: block; 343 | width:100%; 344 | box-sizing: border-box; 345 | } 346 | .wa-col-10{ 347 | flex: 0 0 10%; 348 | max-width: 10%; 349 | box-sizing: border-box; 350 | } 351 | .wa-col-20{ 352 | flex: 0 0 20%; 353 | max-width: 20%; 354 | box-sizing: border-box; 355 | } 356 | .wa-col-25{ 357 | flex: 0 0 25%; 358 | max-width: 25%; 359 | box-sizing: border-box; 360 | } 361 | .wa-col-33{ 362 | flex: 0 0 33%; 363 | max-width: 33%; 364 | box-sizing: border-box; 365 | } 366 | .wa-col-50{ 367 | flex: 0 0 50%; 368 | max-width: 50%; 369 | box-sizing: border-box; 370 | } 371 | .wa-col-66{ 372 | flex: 0 0 66%; 373 | max-width: 66%; 374 | box-sizing: border-box; 375 | } 376 | .wa-col-75{ 377 | flex: 0 0 75%; 378 | max-width: 75%; 379 | box-sizing: border-box; 380 | } 381 | .wa-col-80{ 382 | flex: 0 0 80%; 383 | max-width: 80%; 384 | box-sizing: border-box; 385 | } 386 | .wa-col-90{ 387 | flex: 0 0 90%; 388 | max-width: 90%; 389 | box-sizing: border-box; 390 | } 391 | /*grid-view*/ 392 | .wa-grid{ 393 | width:100%; 394 | overflow: hidden; 395 | } 396 | .wa-grid-33{ 397 | float: left; 398 | width: 33.3%; 399 | box-sizing: border-box; 400 | } 401 | .wa-grid-50{ 402 | float: left; 403 | width: 50%; 404 | box-sizing: border-box; 405 | } -------------------------------------------------------------------------------- /image/show/GIF_wa.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/show/GIF_wa.gif -------------------------------------------------------------------------------- /image/show/background-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/show/background-color.png -------------------------------------------------------------------------------- /image/show/basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/show/basic.png -------------------------------------------------------------------------------- /image/show/button-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/show/button-color.png -------------------------------------------------------------------------------- /image/show/button-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/show/button-icon.png -------------------------------------------------------------------------------- /image/show/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/show/button.png -------------------------------------------------------------------------------- /image/show/general.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/show/general.png -------------------------------------------------------------------------------- /image/show/get_started.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/show/get_started.png -------------------------------------------------------------------------------- /image/show/grid-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/show/grid-view.png -------------------------------------------------------------------------------- /image/show/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/show/grid.png -------------------------------------------------------------------------------- /image/show/input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/show/input.png -------------------------------------------------------------------------------- /image/show/list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/show/list.png -------------------------------------------------------------------------------- /image/show/mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/show/mark.png -------------------------------------------------------------------------------- /image/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liujians/Wa-UI/b9d28c956ea4d5f8c860de7de354915e03cf6a6b/image/user.jpg -------------------------------------------------------------------------------- /pages/background-color/background-color.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | }, 8 | onReady:function(){ 9 | // 页面渲染完成 10 | }, 11 | onShow:function(){ 12 | // 页面显示 13 | }, 14 | onHide:function(){ 15 | // 页面隐藏 16 | }, 17 | onUnload:function(){ 18 | // 页面关闭 19 | } 20 | }) -------------------------------------------------------------------------------- /pages/background-color/background-color.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "background-color" 3 | } -------------------------------------------------------------------------------- /pages/background-color/background-color.wxml: -------------------------------------------------------------------------------- 1 | 2 | background-color 3 | background color 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /pages/background-color/background-color.wxss: -------------------------------------------------------------------------------- 1 | /* pages/background-color/background-color.wxss */ -------------------------------------------------------------------------------- /pages/basic/basic.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | }, 8 | onReady:function(){ 9 | // 页面渲染完成 10 | }, 11 | onShow:function(){ 12 | // 页面显示 13 | }, 14 | onHide:function(){ 15 | // 页面隐藏 16 | }, 17 | onUnload:function(){ 18 | // 页面关闭 19 | } 20 | }) -------------------------------------------------------------------------------- /pages/basic/basic.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "basic" 3 | } -------------------------------------------------------------------------------- /pages/basic/basic.wxml: -------------------------------------------------------------------------------- 1 | 2 | basic 3 | text-left 4 | text-center 5 | text-right 6 | title 7 | border-basic 8 | padding 9 | padding-half 10 | 11 | -------------------------------------------------------------------------------- /pages/basic/basic.wxss: -------------------------------------------------------------------------------- 1 | /* pages/basic/basic.wxss */ -------------------------------------------------------------------------------- /pages/button-icon/button-icon.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | }, 8 | onReady:function(){ 9 | // 页面渲染完成 10 | }, 11 | onShow:function(){ 12 | // 页面显示 13 | }, 14 | onHide:function(){ 15 | // 页面隐藏 16 | }, 17 | onUnload:function(){ 18 | // 页面关闭 19 | } 20 | }) -------------------------------------------------------------------------------- /pages/button-icon/button-icon.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "button-icon" 3 | } -------------------------------------------------------------------------------- /pages/button-icon/button-icon.wxml: -------------------------------------------------------------------------------- 1 | 2 | button-icon 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /pages/button-icon/button-icon.wxss: -------------------------------------------------------------------------------- 1 | /* pages/button-icon/button-icon.wxss */ -------------------------------------------------------------------------------- /pages/button/button.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | }, 8 | onReady:function(){ 9 | // 页面渲染完成 10 | }, 11 | onShow:function(){ 12 | // 页面显示 13 | }, 14 | onHide:function(){ 15 | // 页面隐藏 16 | }, 17 | onUnload:function(){ 18 | // 页面关闭 19 | } 20 | }) -------------------------------------------------------------------------------- /pages/button/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "button" 3 | } -------------------------------------------------------------------------------- /pages/button/button.wxml: -------------------------------------------------------------------------------- 1 | 2 | button 3 | button size 4 | 5 | 6 | 7 | button outline 8 | 9 | button block 10 | 11 | -------------------------------------------------------------------------------- /pages/button/button.wxss: -------------------------------------------------------------------------------- 1 | /* pages/button/button.wxss */ -------------------------------------------------------------------------------- /pages/general/general.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | }, 8 | onReady:function(){ 9 | // 页面渲染完成 10 | }, 11 | onShow:function(){ 12 | // 页面显示 13 | }, 14 | onHide:function(){ 15 | // 页面隐藏 16 | }, 17 | onUnload:function(){ 18 | // 页面关闭 19 | } 20 | }) -------------------------------------------------------------------------------- /pages/general/general.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "general" 3 | } -------------------------------------------------------------------------------- /pages/general/general.wxml: -------------------------------------------------------------------------------- 1 | 2 | general 3 | 这是中文文字 4 | this is English 5 | -------------------------------------------------------------------------------- /pages/general/general.wxss: -------------------------------------------------------------------------------- 1 | /* pages/general/general.wxss */ -------------------------------------------------------------------------------- /pages/grid-view/grid-view.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | }, 8 | onReady:function(){ 9 | // 页面渲染完成 10 | }, 11 | onShow:function(){ 12 | // 页面显示 13 | }, 14 | onHide:function(){ 15 | // 页面隐藏 16 | }, 17 | onUnload:function(){ 18 | // 页面关闭 19 | } 20 | }) -------------------------------------------------------------------------------- /pages/grid-view/grid-view.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "grid-view" 3 | } -------------------------------------------------------------------------------- /pages/grid-view/grid-view.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 18 | 19 | 这是容器下面的内容 20 | -------------------------------------------------------------------------------- /pages/grid-view/grid-view.wxss: -------------------------------------------------------------------------------- 1 | /* pages/grid-view/grid-view.wxss */ -------------------------------------------------------------------------------- /pages/grid/grid.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | }, 8 | onReady:function(){ 9 | // 页面渲染完成 10 | }, 11 | onShow:function(){ 12 | // 页面显示 13 | }, 14 | onHide:function(){ 15 | // 页面隐藏 16 | }, 17 | onUnload:function(){ 18 | // 页面关闭 19 | } 20 | }) -------------------------------------------------------------------------------- /pages/grid/grid.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "grid" 3 | } -------------------------------------------------------------------------------- /pages/grid/grid.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 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 | -------------------------------------------------------------------------------- /pages/grid/grid.wxss: -------------------------------------------------------------------------------- 1 | /* pages/grid/grid.wxss */ -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp() 4 | Page({ 5 | data: { 6 | motto: 'Hello World', 7 | userInfo: {} 8 | }, 9 | //事件处理函数 10 | bindViewTap: function() { 11 | wx.navigateTo({ 12 | url: '../logs/logs' 13 | }) 14 | }, 15 | onLoad: function () { 16 | console.log('onLoad') 17 | var that = this 18 | //调用应用实例的方法获取全局数据 19 | app.getUserInfo(function(userInfo){ 20 | //更新数据 21 | that.setData({ 22 | userInfo:userInfo 23 | }) 24 | }) 25 | } 26 | }) 27 | -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Welcome to the weapp-ui wiki! 5 | 6 | 7 | 快速上手 8 | 9 | 10 | get started 11 | 12 | 13 | CSS使用 14 | 15 | 16 | 21 | 26 | 31 | 36 | 41 | 46 | 51 | 56 | 61 | 66 | 67 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | /*.userinfo { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | 8 | .userinfo-avatar { 9 | width: 128rpx; 10 | height: 128rpx; 11 | margin: 20rpx; 12 | border-radius: 50%; 13 | } 14 | 15 | .userinfo-nickname { 16 | color: #aaa; 17 | } 18 | 19 | .usermotto { 20 | margin-top: 200px; 21 | }*/ -------------------------------------------------------------------------------- /pages/input/input.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | }, 8 | onReady:function(){ 9 | // 页面渲染完成 10 | }, 11 | onShow:function(){ 12 | // 页面显示 13 | }, 14 | onHide:function(){ 15 | // 页面隐藏 16 | }, 17 | onUnload:function(){ 18 | // 页面关闭 19 | } 20 | }) -------------------------------------------------------------------------------- /pages/input/input.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "input" 3 | } -------------------------------------------------------------------------------- /pages/input/input.wxml: -------------------------------------------------------------------------------- 1 | 2 | input 3 | input-icon 4 | 5 | 9 | 10 | input-stacked 11 | 12 | 13 | 14 | 15 | input-item 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /pages/input/input.wxss: -------------------------------------------------------------------------------- 1 | /* pages/input/input.wxss */ -------------------------------------------------------------------------------- /pages/list/list.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | }, 8 | onReady:function(){ 9 | // 页面渲染完成 10 | }, 11 | onShow:function(){ 12 | // 页面显示 13 | }, 14 | onHide:function(){ 15 | // 页面隐藏 16 | }, 17 | onUnload:function(){ 18 | // 页面关闭 19 | } 20 | }) -------------------------------------------------------------------------------- /pages/list/list.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "list" 3 | } -------------------------------------------------------------------------------- /pages/list/list.wxml: -------------------------------------------------------------------------------- 1 | 2 | list 3 | 4 | 7 | 8 | 12 | 16 | 21 | 25 | 30 | 34 | space 35 | 36 | -------------------------------------------------------------------------------- /pages/list/list.wxss: -------------------------------------------------------------------------------- 1 | /* pages/list/list.wxss */ -------------------------------------------------------------------------------- /pages/mark/mark.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | }, 8 | onReady:function(){ 9 | // 页面渲染完成 10 | }, 11 | onShow:function(){ 12 | // 页面显示 13 | }, 14 | onHide:function(){ 15 | // 页面隐藏 16 | }, 17 | onUnload:function(){ 18 | // 页面关闭 19 | } 20 | }) -------------------------------------------------------------------------------- /pages/mark/mark.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "mark" 3 | } -------------------------------------------------------------------------------- /pages/mark/mark.wxml: -------------------------------------------------------------------------------- 1 | 2 | mark 3 | 4 | 5 | 6 | item 7 | 8 | 9 | 10 | item 11 | 12 | 13 | 14 | item 15 | 16 | 17 | 18 | item 19 | 20 | 21 | 22 | item 23 | 24 | 25 | 26 | item 27 | 28 | -------------------------------------------------------------------------------- /pages/mark/mark.wxss: -------------------------------------------------------------------------------- 1 | /* pages/mark/mark.wxss */ -------------------------------------------------------------------------------- /pages/start/start.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | }, 5 | onLoad:function(options){ 6 | // 页面初始化 options为页面跳转所带来的参数 7 | }, 8 | onReady:function(){ 9 | // 页面渲染完成 10 | }, 11 | onShow:function(){ 12 | // 页面显示 13 | }, 14 | onHide:function(){ 15 | // 页面隐藏 16 | }, 17 | onUnload:function(){ 18 | // 页面关闭 19 | } 20 | }) -------------------------------------------------------------------------------- /pages/start/start.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "grid" 3 | } -------------------------------------------------------------------------------- /pages/start/start.wxml: -------------------------------------------------------------------------------- 1 | 2 | get started 3 | 下载：https://github.com/liujians/Wa-UI 4 | 将wa-ui.wxss引入 5 | 6 | 7 | -------------------------------------------------------------------------------- /pages/start/start.wxss: -------------------------------------------------------------------------------- 1 | /* pages/start/start.wxss */ -------------------------------------------------------------------------------- /pages/test/test.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | // text:"这是一个页面" 4 | r:{ 5 | value:"r1", 6 | checked:true 7 | }, 8 | r2:{ 9 | value:"r2", 10 | checked:false 11 | } 12 | }, 13 | onLoad:function(options){ 14 | // 页面初始化 options为页面跳转所带来的参数 15 | }, 16 | onReady:function(){ 17 | // 页面渲染完成 18 | }, 19 | onShow:function(){ 20 | // 页面显示 21 | }, 22 | onHide:function(){ 23 | // 页面隐藏 24 | }, 25 | onUnload:function(){ 26 | // 页面关闭 27 | }, 28 | radioChange:function(e){ 29 | console.log('radio发生change事件，携带value值为：', e.detail.value) 30 | } 31 | }) -------------------------------------------------------------------------------- /pages/test/test.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/test/test.wxml: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 17 | 21 | 25 | 29 | 33 | 37 | 38 | 42 | 46 | 49 | 52 | 56 | 60 | 64 | space 65 | 66 | 67 | 68 | 69 | 70 | 71 | row&col 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | wa-ui 80 | input-stacked 81 | 82 | 83 | 84 | 85 | input-item 86 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /pages/test/test.wxss: -------------------------------------------------------------------------------- 1 | /* pages/test/test.wxss */ -------------------------------------------------------------------------------- /update.md: -------------------------------------------------------------------------------- 1 | - 0.7.4 background提取，替代之前的button颜色，变成可复用的wa-[background]，加入wa-mark类，加入了pull-right类 2 | - 0.7.5 修改版本更新界面的bug，删除icon相关 3 | - 0.7.6 为更好的支持wx:for加入grid-view布局方式 4 | - 0.7.7 加入了textSl做单行文字省略,去掉title的默认title，推荐组合使用，去掉pull-right的margin、可以自己拓展，去掉列表项的默认白色背景色、加入wa-grid-33和wa-grid-50两种布局 -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | var year = date.getFullYear() 3 | var month = date.getMonth() + 1 4 | var day = date.getDate() 5 | 6 | var hour = date.getHours() 7 | var minute = date.getMinutes() 8 | var second = date.getSeconds() 9 | 10 | 11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 | } 13 | 14 | function formatNumber(n) { 15 | n = n.toString() 16 | return n[1] ? n : '0' + n 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } 22 | -------------------------------------------------------------------------------- /wa-ui.wxss: -------------------------------------------------------------------------------- 1 | /* Wa-UI V 0.7.7 2 | * author:liujians 3 | * https://github.com/liujians/weapp-ui 4 | */ 5 | /*general*/ 6 | page{ 7 | height: 100%; 8 | } 9 | page text{ 10 | font-size: 14px; 11 | font-family: "Helvetica Neue",Helvetica,'microsoft yahei ui', 'microsoft yahei','simhei',Arial,sans-serif 12 | } 13 | page view{ 14 | font-size: 14px; 15 | font-family: "Helvetica Neue",Helvetica,'microsoft yahei ui', 'microsoft yahei','simhei',Arial,sans-serif 16 | } 17 | /*basic*/ 18 | .text-center{ 19 | text-align: center 20 | } 21 | .text-right{ 22 | text-align: right 23 | } 24 | .text-left{ 25 | text-align: left 26 | } 27 | .textSl{ 28 | overflow: hidden; 29 | white-space:nowrap; 30 | text-overflow: ellipsis; 31 | } 32 | .title{ 33 | font-size: 36rpx; 34 | font-weight: bold; 35 | } 36 | .border-basic{ 37 | border: 1px solid #ddd 38 | } 39 | .padding{ 40 | padding:20rpx; 41 | } 42 | .padding-half{ 43 | padding:10rpx; 44 | } 45 | .space{ 46 | background: #f5f5f5; 47 | display:block; 48 | font-weight: 600; 49 | border: 1px solid #ddd; 50 | margin: -1px 0; 51 | padding:20rpx 52 | } 53 | .pull-right{ 54 | float: right; 55 | } 56 | /*background*/ 57 | page .wa-primary{ 58 | border-color: #0c63ee; 59 | background-color: #387ef5; 60 | color: #fff; 61 | } 62 | page .wa-info { 63 | border-color: #0a9ec7; 64 | background-color: #11c1f3; 65 | color: #fff; 66 | } 67 | page .wa-success { 68 | border-color: #28a54c; 69 | background-color: #33cd5f; 70 | color: #fff; 71 | } 72 | page .wa-warning { 73 | border-color: #e6b400; 74 | background-color: #ffc900; 75 | color: #fff; 76 | } 77 | page .wa-danger { 78 | border-color: #e42012; 79 | background-color: #ef473a; 80 | color: #fff; 81 | } 82 | page .wa-dark { 83 | border-color: #111; 84 | background-color: #444; 85 | color: #fff; 86 | } 87 | /*list*/ 88 | .wa-list{ 89 | width:100%; 90 | position:relative; 91 | } 92 | .wa-item{ 93 | width: 100%; 94 | border: 1px solid #ddd; 95 | margin: -1px 0; 96 | font-size: 16px; 97 | display: block; 98 | color: #444; 99 | padding:10px; 100 | height: 40px; 101 | box-sizing: border-box; 102 | position:relative; 103 | } 104 | .wa-item-ava{ 105 | padding-left:60px; 106 | min-height: 60px; 107 | } 108 | .wa-item-ava .item-img{ 109 | position:absolute; 110 | top:10px; 111 | left: 10px; 112 | width: 40px; 113 | height: 40px; 114 | } 115 | .wa-item-ava .item-img-round{ 116 | position:absolute; 117 | top:10px; 118 | left: 10px; 119 | width: 40px; 120 | height: 40px; 121 | border-radius: 50%; 122 | } 123 | .wa-item-thumbnail-left{ 124 | padding-left:100px; 125 | min-height: 100px; 126 | } 127 | .wa-item-thumbnail-left .item-img{ 128 | position:absolute; 129 | top:10px; 130 | left: 10px; 131 | width: 80px; 132 | height: 80px; 133 | } 134 | .wa-item-thumbnail-right{ 135 | padding-right:100px; 136 | min-height: 100px; 137 | } 138 | .wa-item-thumbnail-right .item-img{ 139 | position:absolute; 140 | top:10px; 141 | right: 10px; 142 | width: 80px; 143 | height: 80px; 144 | } 145 | .wa-item:active{ 146 | background-color: #e5e5e5; 147 | } 148 | .wa-item .icon-left{ 149 | float: left; 150 | font-size: 20px; 151 | line-height: 20px; 152 | } 153 | .wa-item .icon-right{ 154 | float: right; 155 | font-size: 20px; 156 | line-height: 20px; 157 | opacity: .4; 158 | } 159 | .wa-item-thumbnail-left .icon-right{ 160 | float: right; 161 | font-size: 20px; 162 | line-height: 80px; 163 | opacity: .4; 164 | } 165 | .wa-item-ava .icon-right{ 166 | float: right; 167 | font-size: 20px; 168 | line-height: 40px; 169 | opacity: .4; 170 | } 171 | .icon-left::before{ 172 | width: 20px; 173 | } 174 | .icon-right::before{ 175 | width: 20px; 176 | } 177 | /*button*/ 178 | .wa-button{ 179 | border-color: #b2b2b2; 180 | background-color: #f8f8f8; 181 | color: #444; 182 | position: relative; 183 | display: inline-block; 184 | margin: 0; 185 | padding: 0 12px; 186 | min-width: 120rpx; 187 | min-height: 40px; 188 | border-width: 1px; 189 | border-style: solid; 190 | border-radius: 2px; 191 | vertical-align: top; 192 | text-align: center; 193 | text-overflow: ellipsis; 194 | font-size: 16px; 195 | line-height: 38px; 196 | } 197 | 198 | .wa-button-block{ 199 | width:100%; 200 | } 201 | .wa-button-sm{ 202 | padding: 0 8px; 203 | min-width: 90rpx; 204 | min-height: 28px; 205 | font-size: 12px; 206 | line-height: 26px; 207 | } 208 | .wa-button-lg{ 209 | padding: 0 16px; 210 | min-width: 150rpx; 211 | min-height: 52px; 212 | font-size: 20px; 213 | line-height: 48px; 214 | } 215 | .wa-button:active{ 216 | border-color: #999; 217 | background: #ccc; 218 | color: #444 219 | } 220 | /*.wa-button-dark:active{ 221 | background: #333; 222 | color: #eee 223 | }*/ 224 | .wa-button-outline{ 225 | border-color: #b2b2b2; 226 | background: transparent; 227 | color: #b2b2b2; 228 | } 229 | .wa-button .icon-left{ 230 | padding-right:8rpx; 231 | font-size: 36rpx; 232 | } 233 | .wa-button-sm .icon-left{ 234 | padding-right:5px; 235 | font-size: 26rpx 236 | } 237 | .wa-button-lg .icon-left{ 238 | padding-right:5px; 239 | font-size: 46rpx 240 | } 241 | .wa-button .icon-right{ 242 | float:right; 243 | line-height: 38px; 244 | padding-left:5px; 245 | font-size: 36rpx; 246 | } 247 | .wa-button-sm .icon-right{ 248 | float:right; 249 | line-height: 26px; 250 | padding-left:5px; 251 | font-size: 22rpx 252 | } 253 | .wa-button-lg .icon-right{ 254 | float:right; 255 | line-height: 48px; 256 | padding-left:5px; 257 | font-size: 46rpx 258 | } 259 | /*input*/ 260 | .wa-input{ 261 | display: block; 262 | height: 34px; 263 | color: #111; 264 | font-size: 14px; 265 | line-height: 16px; 266 | flex: 1; 267 | } 268 | .wa-input-item{ 269 | display: flex; 270 | padding:20rpx; 271 | border: 1px solid #ddd; 272 | margin: -1px 0; 273 | } 274 | .wa-input-label{ 275 | flex: 0 0 100px; 276 | font-size: 14px; 277 | line-height: 26px; 278 | font-weight: bold; 279 | padding: 4px 0; 280 | } 281 | .wa-input-stacked{ 282 | padding:20rpx; 283 | } 284 | .wa-input-stacked input{ 285 | width: 100% 286 | } 287 | .wa-input-icon{ 288 | padding: 5px; 289 | padding-left: 44px; 290 | position: relative; 291 | border: 1px solid #ddd; 292 | border-radius: 3px; 293 | } 294 | .wa-input-icon .icon-left{ 295 | text-align: center; 296 | position: absolute; 297 | top: 5px; 298 | left: 5px; 299 | width: 34px; 300 | height: 34px; 301 | line-height: 34px; 302 | font-size: 20px; 303 | } 304 | .placeholder-icon{ 305 | color: #aaa; 306 | } 307 | /*radio*/ 308 | /*.wa-radio radio{ 309 | visibility: hidden; 310 | }*/ 311 | /*.wa-radio radio::before{ 312 | content:" "; 313 | width:500px; 314 | height: 500px; 315 | background: red; 316 | }*/ 317 | /*.wa-radio{ 318 | background: red; 319 | }*/ 320 | /*.wa-radio radio:checked:before{ 321 | background: blue; 322 | }*/ 323 | /*mark*/ 324 | .wa-mark{ 325 | border-radius: 20px; 326 | padding: 2px 6px; 327 | font-size: 12px; 328 | 329 | } 330 | .wa-item .wa-mark{ 331 | margin-top: -2px; 332 | } 333 | /*grid*/ 334 | .wa-row{ 335 | display: flex; 336 | padding: 10rpx; 337 | width: 100%; 338 | box-sizing: border-box 339 | } 340 | .wa-col{ 341 | flex:1; 342 | display: block; 343 | width:100%; 344 | box-sizing: border-box; 345 | } 346 | .wa-col-10{ 347 | flex: 0 0 10%; 348 | max-width: 10%; 349 | box-sizing: border-box; 350 | } 351 | .wa-col-20{ 352 | flex: 0 0 20%; 353 | max-width: 20%; 354 | box-sizing: border-box; 355 | } 356 | .wa-col-25{ 357 | flex: 0 0 25%; 358 | max-width: 25%; 359 | box-sizing: border-box; 360 | } 361 | .wa-col-33{ 362 | flex: 0 0 33%; 363 | max-width: 33%; 364 | box-sizing: border-box; 365 | } 366 | .wa-col-50{ 367 | flex: 0 0 50%; 368 | max-width: 50%; 369 | box-sizing: border-box; 370 | } 371 | .wa-col-66{ 372 | flex: 0 0 66%; 373 | max-width: 66%; 374 | box-sizing: border-box; 375 | } 376 | .wa-col-75{ 377 | flex: 0 0 75%; 378 | max-width: 75%; 379 | box-sizing: border-box; 380 | } 381 | .wa-col-80{ 382 | flex: 0 0 80%; 383 | max-width: 80%; 384 | box-sizing: border-box; 385 | } 386 | .wa-col-90{ 387 | flex: 0 0 90%; 388 | max-width: 90%; 389 | box-sizing: border-box; 390 | } 391 | /*grid-view*/ 392 | .wa-grid{ 393 | width:100%; 394 | overflow: hidden; 395 | } 396 | .wa-grid-33{ 397 | float: left; 398 | width: 33.3%; 399 | box-sizing: border-box; 400 | } 401 | .wa-grid-50{ 402 | float: left; 403 | width: 50%; 404 | box-sizing: border-box; 405 | } --------------------------------------------------------------------------------