WeChat UI 设计
来自Jack's Lab
（版本间的差异）
(→Reference) |
|||
| （未显示1个用户的13个中间版本） | |||
| 第2行： | 第2行： | ||
微信官方开源了 WeUI ，其是一套与微信原生 UI 一致的 UI 库，核心文件是 weui.css，只需要获取到该文件，然后在页面中引入，即可使用 WeUI 的组件。有以下几种获取方式： | 微信官方开源了 WeUI ，其是一套与微信原生 UI 一致的 UI 库，核心文件是 weui.css，只需要获取到该文件，然后在页面中引入，即可使用 WeUI 的组件。有以下几种获取方式： | ||
| + | |||
* 微信官方 http://res.wx.qq.com/open/libs/weui/0.4.0/weui.css | * 微信官方 http://res.wx.qq.com/open/libs/weui/0.4.0/weui.css | ||
* BootCDN http://cdn.bootcss.com/weui/0.4.0/style/weui.css | * BootCDN http://cdn.bootcss.com/weui/0.4.0/style/weui.css | ||
* cdnjs http://cdnjs.cloudflare.com/ajax/libs/weui/0.4.0/style/weui.css | * cdnjs http://cdnjs.cloudflare.com/ajax/libs/weui/0.4.0/style/weui.css | ||
| + | |||
| + | |||
| + | 其中，0.4.0 是目前 WeUI 最新的版本号，其他版本同理。 | ||
| + | |||
| + | 以上链接，均支持 http 和 https 协议，均包含未压缩版 weui.css 和压缩版 weui.min.css | ||
| + | |||
| + | |||
| + | WeUI 的源码在： https://github.com/weui/weui | ||
| + | |||
| + | WeUI 页面示例： | ||
| + | |||
| + | * http://weui.github.io/react-weui | ||
| + | * http://weui.github.io/weui | ||
| + | |||
| + | <br><br> | ||
| + | |||
| + | == Quick Start == | ||
| + | |||
| + | <pre> | ||
| + | <html lang="en"> | ||
| + | <head> | ||
| + | <meta charset="UTF-8"> | ||
| + | <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> | ||
| + | <title>WeUI</title> | ||
| + | <!-- 引入 WeUI --> | ||
| + | <link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css"/> | ||
| + | </head> | ||
| + | <body> | ||
| + | <!-- 使用 --> | ||
| + | <a href="javascript:;" class="weui_btn weui_btn_primary">绿色按钮</a> | ||
| + | </body> | ||
| + | </html> | ||
| + | </pre> | ||
<br><br> | <br><br> | ||
== Notes == | == Notes == | ||
| + | |||
| + | === Switch === | ||
| + | |||
| + | <pre> | ||
| + | <div class="weui_cells_title">鱼缸控制系统</div> | ||
| + | <div class="weui_cells weui_cells_form"> | ||
| + | |||
| + | <div class="weui_cell weui_cell_switch"> | ||
| + | <div class="weui_cell_hd weui_cell_primary">氧气泵</div> | ||
| + | <div class="weui_cell_ft"> | ||
| + | <input class="weui_switch" type="checkbox"> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="weui_cell weui_cell_switch"> | ||
| + | <div class="weui_cell_hd weui_cell_primary">景观灯</div> | ||
| + | <div class="weui_cell_ft"> | ||
| + | <input class="weui_switch" type="checkbox" checked> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="weui_cell weui_cell_switch"> | ||
| + | <div class="weui_cell_hd weui_cell_primary">水质净化</div> | ||
| + | <div class="weui_cell_ft"> | ||
| + | <input class="weui_switch" type="checkbox" checked> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | </pre> | ||
<br><br> | <br><br> | ||
| + | |||
| + | === Tabs === | ||
| + | |||
| + | <pre> | ||
| + | |||
| + | </pre> | ||
<br><br> | <br><br> | ||
| − | + | ||
| + | == Reference == | ||
| + | |||
| + | * http://codepen.io/progrape/pen/dGmJPw | ||
| + | * http://weui.github.io/weui/ | ||
| + | |||
| + | |||
| + | * http://www.color-hex.com/color/ff525e | ||
| + | |||
<br><br> | <br><br> | ||
<br><br> | <br><br> | ||
2017年3月5日 (日) 20:06的最后版本
目录 |
[编辑] 1 概述
微信官方开源了 WeUI ，其是一套与微信原生 UI 一致的 UI 库，核心文件是 weui.css，只需要获取到该文件，然后在页面中引入，即可使用 WeUI 的组件。有以下几种获取方式：
- 微信官方 http://res.wx.qq.com/open/libs/weui/0.4.0/weui.css
- BootCDN http://cdn.bootcss.com/weui/0.4.0/style/weui.css
- cdnjs http://cdnjs.cloudflare.com/ajax/libs/weui/0.4.0/style/weui.css
其中，0.4.0 是目前 WeUI 最新的版本号，其他版本同理。
以上链接，均支持 http 和 https 协议，均包含未压缩版 weui.css 和压缩版 weui.min.css
WeUI 的源码在： https://github.com/weui/weui
WeUI 页面示例：
[编辑] 2 Quick Start
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css"/>
</head>
<body>
<!-- 使用 -->
<a href="javascript:;" class="weui_btn weui_btn_primary">绿色按钮</a>
</body>
</html>
[编辑] 3 Notes
[编辑] 3.1 Switch
<div class="weui_cells_title">鱼缸控制系统</div>
<div class="weui_cells weui_cells_form">
<div class="weui_cell weui_cell_switch">
<div class="weui_cell_hd weui_cell_primary">氧气泵</div>
<div class="weui_cell_ft">
<input class="weui_switch" type="checkbox">
</div>
</div>
<div class="weui_cell weui_cell_switch">
<div class="weui_cell_hd weui_cell_primary">景观灯</div>
<div class="weui_cell_ft">
<input class="weui_switch" type="checkbox" checked>
</div>
</div>
<div class="weui_cell weui_cell_switch">
<div class="weui_cell_hd weui_cell_primary">水质净化</div>
<div class="weui_cell_ft">
<input class="weui_switch" type="checkbox" checked>
</div>
</div>
</div>
[编辑] 3.2 Tabs
[编辑] 4 Reference
