高颜值、好用、易扩展的小程序 UI 库
## 概述 [ZanUI-WeApp]是有赞移动 Web UI 规范 `ZanUI` 的小程序现实版本，结合了微信的视觉规范，为用户提供更加统一的使用感受。 现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等组件或元素。具体可以扫描下方小程序二维码，体验组件库示例 Demo  更多背景介绍，请移步 [我们写的介绍文章](http://tech.youzan.com/zanui-weapp/)。 ## 下载 ``` bash git clone https://github.com/youzan/zanui-weapp.git ``` ## 预览 1. 在 zanui-weapp 根目录下运行 ``` bash # 安装项目依赖 npm install # 执行组件编译 npm run dev ``` 2. 打开[微信web开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)，'本地小程序项目 - 添加项目'，把 zanui-weapp/example 目录添加进去就可以预览示例demo了。  ## 使用 1. 使用 [ZanUI-WeApp] 前请确保已经学习过微信官方的 [小程序简易教程] 和 [小程序框架介绍]。 2. 然后用 [Bower] 将 [ZanUI-WeApp] 添加到你的项目中使用。 3. 你也可以 fork 出一份你自己的 [ZanUI-WeApp]，这样可以获得更稳定的代码和更方便的进行个性定制。 我们推荐在你的`app.wxss`直接引入`zanui-weapp/dist/index.wxss`。 #### 具体组件文档 * [Badge - 徽章](./packages/badge/README.md) * [Button - 按钮](./packages/btn/README.md) * [Capsule - 胶囊](./packages/capsule/README.md) * [Card - 卡片](./packages/card/README.md) * [Cell - 单元格](./packages/cell/README.md) * [Helper - 基础样式](./packages/helper/README.md) * [Icon - 图标](./packages/icon/README.md) * [Layout - 布局](./packages/row/README.md) * [Loadmore - 加载](./packages/loadmore/README.md) * [Noticebar - 通告栏](./packages/noticebar/README.md) * [Panel - 面板](./packages/panel/README.md) * [Popup - 弹出层](./packages/popup/README.md) * [Quantity - 计数器](./packages/quantity/README.md) * [Select - 选择](./packages/select/README.md) * [Steps - 步骤条](./packages/steps/README.md) * [Switch - 开关](./packages/switch/README.md) * [Tab - 标签](./packages/tab/README.md) * [Field - 输入框](./packages/field/README.md) * [Dialog - 弹出框](./packages/dialog/README.md) * [Tag - 标签](./packages/tag/README.md) * [Toast - 轻提示](./packages/toast/README.md) * [Toptips - 顶部提示](./packages/toptips/README.md) 根据功能的不同，可以将组件大致的分为4类： #### 1. 简单组件 如按钮组件，只要按照wxml结构写就好了 ~~~html