blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

zui 改名为 zanui-weapp

Browse Source
This commit is contained in:
Nino 2017-02-07 20:33:18 +08:00
parent 8274f5694c
commit 2808f7632f
55 changed files with 498 additions and 498 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@ -3,19 +3,19 @@
</p> </p>
ZUI 为微信小程序量身设计 ZanUI Weapp是有赞移动端UI规范ZanUI的小程序现实版本。
==== ====
## 概述 ## 概述
[ZUI] 是一套用于微信小程序开发的基础UI组件库，由有赞官方提供，结合了微信的视觉规范，为用户提供更加统一的使用感知。包含 `btn`、`card`、`cell`、`icon`、`tab` 等各式元素 [ZanUI Weapp] 是一套用于微信小程序开发的基础UI组件库，由有赞官方提供，结合了微信的视觉规范，为用户提供更加统一的使用感知。包含 `btn`、`card`、`cell`、`icon`、`tab` 等各式元素
## 例子 ## 例子
``` bash ``` bash
git clone https://github.com/youzan/zui.git git clone https://github.com/youzan/zanui-weapp.git
cd zui cd zan
``` ```
将 [ZUI] 目录放入 微信Web开发者工具 中，可以预览各种组件的 Demo 和使用方法 将 [ZanUI Weapp] 目录放入 微信Web开发者工具 中，可以预览各种组件的 Demo 和使用方法
## 协议 ## 协议
[MIT] [MIT]
@ -24,9 +24,9 @@ cd zui
## 贡献 ## 贡献
如果你有好的意见或建议，欢迎给我们提 [issue] 或 [PR]，为提升 [ZUI] 贡献力量 如果你有好的意见或建议，欢迎给我们提 [issue] 或 [PR]，为提升 [ZanUI Weapp] 贡献力量
[issue]: https://github.com/youzan/zui/issues/new [issue]: https://github.com/youzan/zanui-weapp/issues/new
[PR]: https://github.com/youzan/zui/compare [PR]: https://github.com/youzan/zanui-weapp/compare
[ZUI]: https://github.com/youzan/zui [ZanUI Weapp]: https://github.com/youzan/zanui-weapp
[MIT]: http://opensource.org/licenses/MIT [MIT]: http://opensource.org/licenses/MIT

2
app.json
View File

@ -20,7 +20,7 @@
], ],
"window":{ "window":{
"navigationBarBackgroundColor": "#FAFAFA", "navigationBarBackgroundColor": "#FAFAFA",
"navigationBarTitleText": "ZUI", "navigationBarTitleText": "ZanUI",
"navigationBarTextStyle":"black", "navigationBarTextStyle":"black",
"backgroundTextStyle":"dark", "backgroundTextStyle":"dark",
"backgroundColor": "#f9f9f9" "backgroundColor": "#f9f9f9"

8
bower.json
View File

@ -1,12 +1,12 @@
{ {
"name": "zui", "name": "zanui-weapp",
"authors": [ "authors": [
"Nino <nino@youzan.com>", "Nino <ninofocus@gmail.com>",
"Pangxie <pangxie@youzan.com>" "Pangxie <pangxie@youzan.com>"
], ],
"directory": "zui", "directory": "zanui-weapp",
"description": "A UI Library for Weapp", "description": "A UI Library for Weapp",
"main": "zui", "main": "zan",
"license": "MIT", "license": "MIT",
"homepage": "", "homepage": "",
"ignore": [ "ignore": [

4
dist/badge/index.wxss vendored
View File

@ -1,7 +1,7 @@
.zui-badge { .zan-badge {
position: relative; position: relative;
} }
.zui-badge__count { .zan-badge__count {
position: absolute; position: absolute;
top: -8px; top: -8px;
right: 0px; right: 0px;

40
dist/btn/index.wxss vendored
View File

@ -1,4 +1,4 @@
.zui-btn { .zan-btn {
position: relative; position: relative;
color: #333; color: #333;
background-color: #fff; background-color: #fff;
@ -15,34 +15,34 @@
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.zui-btn::after { .zan-btn::after {
display: none; display: none;
} }
.zui-btns { .zan-btns {
margin: 15px; margin: 15px;
} }
/* type */ /* type */
.zui-btn--primary { .zan-btn--primary {
color: #fff; color: #fff;
background-color: #4b0; background-color: #4b0;
border-color: #0a0; border-color: #0a0;
} }
.zui-btn--warn { .zan-btn--warn {
color: #fff; color: #fff;
background-color: #f85; background-color: #f85;
border-color: #f85; border-color: #f85;
} }
.zui-btn--danger { .zan-btn--danger {
color: #fff; color: #fff;
background-color: #f44; background-color: #f44;
border-color: #e33; border-color: #e33;
} }
/* size */ /* size */
.zui-btn--small { .zan-btn--small {
display: inline-block; display: inline-block;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
@ -50,7 +50,7 @@
margin-right: 5px; margin-right: 5px;
margin-bottom: 0; margin-bottom: 0;
} }
.zui-btn--mini { .zan-btn--mini {
display: inline-block; display: inline-block;
line-height: 21px; line-height: 21px;
height: 22px; height: 22px;
@ -60,7 +60,7 @@
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
} }
.zui-btn--large { .zan-btn--large {
border-radius: 0; border-radius: 0;
margin-bottom: 0; margin-bottom: 0;
border: none; border: none;
@ -69,16 +69,16 @@
} }
/* plain */ /* plain */
.zui-btn--plain.zui-btn { .zan-btn--plain.zan-btn {
background-color: transparent; background-color: transparent;
} }
.zui-btn--plain.zui-btn--primary { .zan-btn--plain.zan-btn--primary {
color: #06BF04; color: #06BF04;
} }
.zui-btn--plain.zui-btn--warn { .zan-btn--plain.zan-btn--warn {
color: #FF6600; color: #FF6600;
} }
.zui-btn--plain.zui-btn--danger { .zan-btn--plain.zan-btn--danger {
color: #FF4444; color: #FF4444;
} }
@ -88,11 +88,11 @@
} }
/* loading */ /* loading */
.zui-btn--loading { .zan-btn--loading {
color: transparent; color: transparent;
opacity: 1; opacity: 1;
} }
.zui-btn--loading::before { .zan-btn--loading::before {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
@ -108,9 +108,9 @@
animation: btn-spin 0.6s linear; animation: btn-spin 0.6s linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
.zui-btn--primary.zui-btn--loading::before, .zan-btn--primary.zan-btn--loading::before,
.zui-btn--warn.zui-btn--loading::before, .zan-btn--warn.zan-btn--loading::before,
.zui-btn--danger.zui-btn--loading::before { .zan-btn--danger.zan-btn--loading::before {
border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
} }
@ -124,7 +124,7 @@
} }
/* disabled */ /* disabled */
.zui-btn.zui-btn--disabled { .zan-btn.zan-btn--disabled {
/* 防止样式被 button[disabled] 的规则覆盖，所以使用了important */ /* 防止样式被 button[disabled] 的规则覆盖，所以使用了important */
color: #999 ! important; color: #999 ! important;
background: #f8f8f8 ! important; background: #f8f8f8 ! important;
@ -134,7 +134,7 @@
} }
/* ::last-child */ /* ::last-child */
.zui-btn--last-child { .zan-btn--last-child {
margin-bottom: 0; margin-bottom: 0;
margin-right: 0; margin-right: 0;
} }

14
dist/card/index.wxss vendored
View File

@ -1,4 +1,4 @@
.zui-card { .zan-card {
margin-left: 0px; margin-left: 0px;
width: auto; width: auto;
padding: 5px 15px; padding: 5px 15px;
@ -7,7 +7,7 @@
font-size: 14px; font-size: 14px;
} }
.zui-card__thumb { .zan-card__thumb {
width: 90px; width: 90px;
height: 90px; height: 90px;
float: left; float: left;
@ -18,7 +18,7 @@
background-size: cover; background-size: cover;
} }
.zui-card__img { .zan-card__img {
position: absolute; position: absolute;
margin: auto; margin: auto;
top: 0; top: 0;
@ -31,24 +31,24 @@
max-height: 100%; max-height: 100%;
} }
.zui-card__detail { .zan-card__detail {
margin-left: 100px; margin-left: 100px;
width: auto; width: auto;
position: relative; position: relative;
} }
.zui-card__detail-row { .zan-card__detail-row {
overflow: hidden; overflow: hidden;
line-height: 20px; line-height: 20px;
min-height: 20px; min-height: 20px;
margin-bottom: 3px; margin-bottom: 3px;
} }
.zui-card__right-col { .zan-card__right-col {
float: right; float: right;
} }
.zui-card__left-col { .zan-card__left-col {
margin-right: 80px; margin-right: 80px;
} }

14
dist/cell/index.wxss vendored
View File

@ -1,4 +1,4 @@
.zui-cell { .zan-cell {
position: relative; position: relative;
padding: 12px 15px; padding: 12px 15px;
display: flex; display: flex;
@ -7,7 +7,7 @@
font-size: 14px; font-size: 14px;
} }
.zui-cell::after { .zan-cell::after {
position: absolute; position: absolute;
left: 15px; left: 15px;
right: 0; right: 0;
@ -16,24 +16,24 @@
background: #e5e5e5; background: #e5e5e5;
content: ' '; content: ' ';
} }
.zui-cell__bd { .zan-cell__bd {
flex: 1; flex: 1;
} }
.zui-cell__ft { .zan-cell__ft {
position: relative; position: relative;
text-align: right; text-align: right;
color: #666; color: #666;
} }
.zui-cell--last-child::after { .zan-cell--last-child::after {
display: none; display: none;
} }
.zui-cell--access .zui-cell__ft { .zan-cell--access .zan-cell__ft {
padding-right: 13px; padding-right: 13px;
} }
.zui-cell--access .zui-cell__ft::after { .zan-cell--access .zan-cell__ft::after {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 2px; right: 2px;

14
dist/color/index.wxss vendored
View File

@ -1,27 +1,27 @@
.zui-c-red { .zan-c-red {
color: #f44 !important; color: #f44 !important;
} }
.zui-c-gray { .zan-c-gray {
color: #c9c9c9 !important; color: #c9c9c9 !important;
} }
.zui-c-gray-dark { .zan-c-gray-dark {
color: #999 !important; color: #999 !important;
} }
.zui-c-gray-darker { .zan-c-gray-darker {
color: #666 !important; color: #666 !important;
} }
.zui-c-black { .zan-c-black {
color: #333 !important; color: #333 !important;
} }
.zui-c-blue { .zan-c-blue {
color: #3283fa !important; color: #3283fa !important;
} }
.zui-c-green { .zan-c-green {
color: #44BB00 !important; color: #44BB00 !important;
} }

8
dist/dialog/index.wxss vendored
View File

@ -1,4 +1,4 @@
.zui-dialog__mask { .zan-dialog__mask {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -8,7 +8,7 @@
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
display: none; display: none;
} }
.zui-dialog__container { .zan-dialog__container {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 750rpx; width: 750rpx;
@ -17,10 +17,10 @@
transition: all 0.4s ease; transition: all 0.4s ease;
z-index: 11; z-index: 11;
} }
.zui-dialog--show .zui-dialog__container { .zan-dialog--show .zan-dialog__container {
transform: translateY(0); transform: translateY(0);
} }
.zui-dialog--show .zui-dialog__mask { .zan-dialog--show .zan-dialog__mask {
display: block; display: block;
} }

16
dist/form/index.wxss vendored
View File

@ -1,38 +1,38 @@
.zui-form { .zan-form {
background-color: #fff; background-color: #fff;
border-top: 1rpx solid #e5e5e5; border-top: 1rpx solid #e5e5e5;
border-bottom: 1rpx solid #e5e5e5; border-bottom: 1rpx solid #e5e5e5;
} }
.zui-form__item { .zan-form__item {
line-height: 26px; line-height: 26px;
} }
.zui-form__title { .zan-form__title {
float: left; float: left;
width: 80px; width: 80px;
font-size: 14px; font-size: 14px;
} }
.zui-form__title--top { .zan-form__title--top {
align-self: flex-start; align-self: flex-start;
} }
.zui-form__input, .zui-form__textarea { .zan-form__input, .zan-form__textarea {
min-height: 26px; min-height: 26px;
} }
.zui-form__input input { .zan-form__input input {
min-height: 26px; min-height: 26px;
} }
.zui-form__textarea { .zan-form__textarea {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.zui-form__textarea textarea { .zan-form__textarea textarea {
width: auto; width: auto;
flex: 1; flex: 1;
} }

44
dist/helper/index.wxss vendored
View File

@ -1,57 +1,57 @@
.zui-pull-left { .zan-pull-left {
float: left; float: left;
} }
.zui-pull-right { .zan-pull-right {
float: right; float: right;
} }
.zui-center { .zan-center {
text-align: center; text-align: center;
} }
.zui-right { .zan-right {
text-align: right; text-align: right;
} }
.zui-text-deleted { .zan-text-deleted {
text-decoration: line-through; text-decoration: line-through;
} }
.zui-font-8 { .zan-font-8 {
font-size: 8px; font-size: 8px;
} }
.zui-font-10 { .zan-font-10 {
font-size: 10px; font-size: 10px;
} }
.zui-font-12 { .zan-font-12 {
font-size: 12px; font-size: 12px;
} }
.zui-font-14 { .zan-font-14 {
font-size: 14px; font-size: 14px;
} }
.zui-font-16 { .zan-font-16 {
font-size: 16px; font-size: 16px;
} }
.zui-font-18 { .zan-font-18 {
font-size: 18px; font-size: 18px;
} }
.zui-font-20 { .zan-font-20 {
font-size: 20px; font-size: 20px;
} }
.zui-font-22 { .zan-font-22 {
font-size: 22px; font-size: 22px;
} }
.zui-font-24 { .zan-font-24 {
font-size: 22px; font-size: 22px;
} }
.zui-font-30 { .zan-font-30 {
font-size: 30px; font-size: 30px;
} }
.zui-font-bold { .zan-font-bold {
font-weight: bold; font-weight: bold;
} }
.zui-arrow { .zan-arrow {
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 50%; top: 50%;
@ -64,14 +64,14 @@
transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0); transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
} }
.zui-ellipsis { .zan-ellipsis {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
word-wrap: normal; word-wrap: normal;
} }
.zui-ellipsis--l2 { .zan-ellipsis--l2 {
max-height: 40px; max-height: 40px;
line-height: 20px; line-height: 20px;
overflow: hidden; overflow: hidden;
@ -81,7 +81,7 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.zui-ellipsis--l3 { .zan-ellipsis--l3 {
max-height: 60px; max-height: 60px;
line-height: 20px; line-height: 20px;
overflow: hidden; overflow: hidden;
@ -91,10 +91,10 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.zui-clearfix { .zan-clearfix {
zoom: 1; zoom: 1;
} }
.zui-clearfix::after { .zan-clearfix::after {
content: ''; content: '';
display: table; display: table;
clear: both; clear: both;

38
dist/icon/index.wxss vendored
View File

@ -9,10 +9,10 @@
url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.ttf') format('truetype') url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.ttf') format('truetype')
} }
.zui-icon { .zan-icon {
display: inline-block; display: inline-block;
} }
.zui-icon::before { .zan-icon::before {
font-family: "zuiicon" !important; font-family: "zuiicon" !important;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -47,20 +47,20 @@
/* DO NOT EDIT! Generated by fount */ /* DO NOT EDIT! Generated by fount */
.zui-icon-album:before { content: '\e800'; } /* '' */ .zan-icon-album:before { content: '\e800'; } /* '' */
.zui-icon-arrow:before { content: '\e801'; } /* '' */ .zan-icon-arrow:before { content: '\e801'; } /* '' */
.zui-icon-camera:before { content: '\e802'; } /* '' */ .zan-icon-camera:before { content: '\e802'; } /* '' */
.zui-icon-certificate:before { content: '\e803'; } /* '' */ .zan-icon-certificate:before { content: '\e803'; } /* '' */
.zui-icon-check:before { content: '\e804'; } /* '' */ .zan-icon-check:before { content: '\e804'; } /* '' */
.zui-icon-checked:before { content: '\e805'; } /* '' */ .zan-icon-checked:before { content: '\e805'; } /* '' */
.zui-icon-close:before { content: '\e806'; } /* '' */ .zan-icon-close:before { content: '\e806'; } /* '' */
.zui-icon-gift:before { content: '\e807'; } /* '' */ .zan-icon-gift:before { content: '\e807'; } /* '' */
.zui-icon-home:before { content: '\e808'; } /* '' */ .zan-icon-home:before { content: '\e808'; } /* '' */
.zui-icon-location:before { content: '\e809'; } /* '' */ .zan-icon-location:before { content: '\e809'; } /* '' */
.zui-icon-message:before { content: '\e80a'; } /* '' */ .zan-icon-message:before { content: '\e80a'; } /* '' */
.zui-icon-send:before { content: '\e80b'; } /* '' */ .zan-icon-send:before { content: '\e80b'; } /* '' */
.zui-icon-shopping-cart:before { content: '\e80c'; } /* '' */ .zan-icon-shopping-cart:before { content: '\e80c'; } /* '' */
.zui-icon-sign:before { content: '\e80d'; } /* '' */ .zan-icon-sign:before { content: '\e80d'; } /* '' */
.zui-icon-store:before { content: '\e80e'; } /* '' */ .zan-icon-store:before { content: '\e80e'; } /* '' */
.zui-icon-topay:before { content: '\e80f'; } /* '' */ .zan-icon-topay:before { content: '\e80f'; } /* '' */
.zui-icon-tosend:before { content: '\e810'; } /* '' */ .zan-icon-tosend:before { content: '\e810'; } /* '' */

10
dist/label/index.wxss vendored
View File

@ -1,4 +1,4 @@
.zui-label { .zan-label {
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
height: 28px; height: 28px;
@ -12,23 +12,23 @@
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
} }
.zui-label--primary { .zan-label--primary {
color: #fff; color: #fff;
background: #f44; background: #f44;
border: 1rpx solid #f44; border: 1rpx solid #f44;
} }
.zui-label--disabled { .zan-label--disabled {
color: #cacaca; color: #cacaca;
background: #eee; background: #eee;
border: 1rpx solid #e5e5e5; border: 1rpx solid #e5e5e5;
} }
.zui-label--small { .zan-label--small {
font-size: 11px; font-size: 11px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
padding: 0px 3px; padding: 0px 3px;
} }
.zui-label--plain.zui-label--primary { .zan-label--plain.zan-label--primary {
color: #f44; color: #f44;
background: #fff; background: #fff;
} }

18
dist/loadmore/index.wxml vendored
View File

@ -1,23 +1,23 @@
<template name="zui-loadmore"> <template name="zan-loadmore">
<block wx:if="{{nomore}}"> <block wx:if="{{nomore}}">
<view class="zui-loadmore zui-loadmore--nomore"> <view class="zan-loadmore zan-loadmore--nomore">
<view class="zui-loadmore__tips"> <view class="zan-loadmore__tips">
<view class="zui-loadmore__dot"></view> <view class="zan-loadmore__dot"></view>
</view> </view>
</view> </view>
</block> </block>
<block wx:elif="{{nodata}}"> <block wx:elif="{{nodata}}">
<view class="zui-loadmore zui-loadmore--nodata"> <view class="zan-loadmore zan-loadmore--nodata">
<view class="zui-loadmore__tips">{{ nodata_str || '暂无数据' }}</view> <view class="zan-loadmore__tips">{{ nodata_str || '暂无数据' }}</view>
</view> </view>
</block> </block>
<block wx:elif="{{loading}}"> <block wx:elif="{{loading}}">
<view class="zui-loadmore"> <view class="zan-loadmore">
<view class="zui-loading"></view> <view class="zan-loading"></view>
<view class="zui-loadmore__tips">加载中...</view> <view class="zan-loadmore__tips">加载中...</view>
</view> </view>
</block> </block>

20
dist/loadmore/index.wxss vendored
View File

@ -1,4 +1,4 @@
.zui-loadmore { .zan-loadmore {
position: relative; position: relative;
width: 65%; width: 65%;
margin: 21px auto; margin: 21px auto;
@ -8,7 +8,7 @@
vertical-align: middle; vertical-align: middle;
} }
.zui-loading { .zan-loading {
width:20px; width:20px;
height:20px; height:20px;
display: inline-block; display: inline-block;
@ -19,42 +19,42 @@
background-size: 100%; background-size: 100%;
} }
.zui-loadmore .zui-loading { .zan-loadmore .zan-loading {
margin-right: 4px; margin-right: 4px;
} }
.zui-loadmore__tips { .zan-loadmore__tips {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
} }
.zui-loadmore--nodata, .zan-loadmore--nodata,
.zui-loadmore--nomore { .zan-loadmore--nomore {
border-top: 1rpx solid #e5e5e5; border-top: 1rpx solid #e5e5e5;
color: #999; color: #999;
} }
.zui-loadmore--nodata { .zan-loadmore--nodata {
margin-top: 120px; margin-top: 120px;
} }
.zui-loadmore--nodata .zui-loadmore__tips { .zan-loadmore--nodata .zan-loadmore__tips {
position: relative; position: relative;
top: -11px; top: -11px;
background: #f9f9f9; background: #f9f9f9;
padding: 0 6px; padding: 0 6px;
} }
.zui-loadmore--nomore .zui-loadmore__tips { .zan-loadmore--nomore .zan-loadmore__tips {
position: relative; position: relative;
top: -11px; top: -11px;
background: #f9f9f9; background: #f9f9f9;
padding: 0 6px; padding: 0 6px;
} }
.zui-loadmore__dot { .zan-loadmore__dot {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 10px; top: 10px;

6
dist/panel/index.wxss vendored
View File

@ -1,4 +1,4 @@
.zui-panel { .zan-panel {
background: #fff; background: #fff;
border-top: 1rpx solid #e5e5e5; border-top: 1rpx solid #e5e5e5;
border-bottom: 1rpx solid #e5e5e5; border-bottom: 1rpx solid #e5e5e5;
@ -6,7 +6,7 @@
overflow: hidden; overflow: hidden;
} }
.zui-panel-title { .zan-panel-title {
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
color: #999; color: #999;
@ -14,6 +14,6 @@
} }
.zui-panel--without-margin-top { .zan-panel--without-margin-top {
margin-top: 0; margin-top: 0;
} }

14
dist/quantity/index.js vendored
View File

@ -12,25 +12,25 @@ function handle(e, num) {
function callback(componentId, quantity) { function callback(componentId, quantity) {
quantity = +quantity; quantity = +quantity;
var e = { componentId, quantity }; var e = { componentId, quantity };
console.info('[zui:quantity:change]', e); console.info('[zan:quantity:change]', e);
if (this.handleZuiQuantityChange) { if (this.handleZanQuantityChange) {
this.handleZuiQuantityChange(e); this.handleZanQuantityChange(e);
} else { } else {
console.warn('页面缺少 handleZuiQuantityChange 回调函数'); console.warn('页面缺少 handleZanQuantityChange 回调函数');
} }
} }
var Quantity = { var Quantity = {
_handleZuiQuantityMinus(e) { _handleZanQuantityMinus(e) {
handle.call(this, e, -1); handle.call(this, e, -1);
}, },
_handleZuiQuantityPlus(e) { _handleZanQuantityPlus(e) {
handle.call(this, e, +1); handle.call(this, e, +1);
}, },
_handleZuiQuantityBlur(e) { _handleZanQuantityBlur(e) {
var dataset = e.currentTarget.dataset; var dataset = e.currentTarget.dataset;
var componentId = dataset.componentId; var componentId = dataset.componentId;
var max = +dataset.max; var max = +dataset.max;

16
dist/quantity/index.wxml vendored
View File

@ -1,28 +1,28 @@
<template name="zui-quantity"> <template name="zan-quantity">
<view class="zui-quantity {{ size === 'small' ? 'zui-quantity--small' : '' }}"> <view class="zan-quantity {{ size === 'small' ? 'zan-quantity--small' : '' }}">
<view <view
class="zui-quantity__minus {{ quantity <= min ? 'zui-quantity--disabled' : '' }}" class="zan-quantity__minus {{ quantity <= min ? 'zan-quantity--disabled' : '' }}"
data-component-id="{{ componentId }}" data-component-id="{{ componentId }}"
data-quantity="{{ quantity }}" data-quantity="{{ quantity }}"
data-disabled="{{ quantity <= min }}" data-disabled="{{ quantity <= min }}"
bindtap="_handleZuiQuantityMinus" bindtap="_handleZanQuantityMinus"
>-</view> >-</view>
<input <input
class="zui-quantity__text {{ min >= max ? 'zui-quantity--disabled' : '' }}" class="zan-quantity__text {{ min >= max ? 'zan-quantity--disabled' : '' }}"
type="number" type="number"
data-component-id="{{ componentId }}" data-component-id="{{ componentId }}"
data-min="{{ min }}" data-min="{{ min }}"
data-max="{{ max }}" data-max="{{ max }}"
value="{{ quantity }}" value="{{ quantity }}"
disabled="{{ min >= max }}" disabled="{{ min >= max }}"
bindblur="_handleZuiQuantityBlur" bindblur="_handleZanQuantityBlur"
></input> ></input>
<view <view
class="zui-quantity__plus {{ quantity >= max ? 'zui-quantity--disabled' : '' }}" class="zan-quantity__plus {{ quantity >= max ? 'zan-quantity--disabled' : '' }}"
data-component-id="{{ componentId }}" data-component-id="{{ componentId }}"
data-quantity="{{ quantity }}" data-quantity="{{ quantity }}"
data-disabled="{{ quantity >= max }}" data-disabled="{{ quantity >= max }}"
bindtap="_handleZuiQuantityPlus" bindtap="_handleZanQuantityPlus"
>+</view> >+</view>
</view> </view>
</template> </template>

16
dist/quantity/index.wxss vendored
View File

@ -1,7 +1,7 @@
.zui-quantity { .zan-quantity {
color: #666; color: #666;
} }
.zui-quantity view { .zan-quantity view {
display: inline-block; display: inline-block;
line-height: 20px; line-height: 20px;
padding: 5px 0; padding: 5px 0;
@ -12,11 +12,11 @@
font-size: 12px; font-size: 12px;
border: 1rpx solid #999; border: 1rpx solid #999;
} }
.zui-quantity .zui-quantity__minus { .zan-quantity .zan-quantity__minus {
border-right: none; border-right: none;
border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;
} }
.zui-quantity .zui-quantity__text { .zan-quantity .zan-quantity__text {
border: 1rpx solid #999; border: 1rpx solid #999;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
@ -26,20 +26,20 @@
font-size: 12px; font-size: 12px;
line-height: 30px; line-height: 30px;
} }
.zui-quantity .zui-quantity__plus { .zan-quantity .zan-quantity__plus {
border-left: none; border-left: none;
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
} }
.zui-quantity .zui-quantity--disabled { .zan-quantity .zan-quantity--disabled {
background: #f8f8f8; background: #f8f8f8;
color: #bbb; color: #bbb;
border-color: #e8e8e8; border-color: #e8e8e8;
} }
.zui-quantity--small view { .zan-quantity--small view {
min-width: 36px; min-width: 36px;
line-height: 18px; line-height: 18px;
} }
.zui-quantity--small .zui-quantity__text { .zan-quantity--small .zan-quantity__text {
width: 36px; width: 36px;
line-height: 28px; line-height: 28px;
height: 28px; height: 28px;

16
dist/steps/index.wxml vendored
View File

@ -1,15 +1,15 @@
<template name="zui-steps"> <template name="zan-steps">
<view class="zui-steps zui-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zui-steps--{{ steps.length }} {{ className }}"> <view class="zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
<view <view
wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index" wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
class="zui-steps__step {{ hasDesc ? 'zui-steps__step--db-title' : '' }} {{ index == 0 ? 'zui-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zui-steps__step--last-child' : '' }} {{ step.done ? 'zui-steps__step--done' : '' }} {{ step.current ? 'zui-steps__step--cur' : '' }}" class="zan-steps__step {{ hasDesc ? 'zan-steps__step--db-title' : '' }} {{ index == 0 ? 'zan-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zan-steps__step--last-child' : '' }} {{ step.done ? 'zan-steps__step--done' : '' }} {{ step.current ? 'zan-steps__step--cur' : '' }}"
> >
<view class="zui-steps__title">{{ step.text }}</view> <view class="zan-steps__title">{{ step.text }}</view>
<view wx:if="{{ hasDesc && step.desc }}" class="zui-steps__title zui-steps__title--desc">{{ step.desc }}</view> <view wx:if="{{ hasDesc && step.desc }}" class="zan-steps__title zan-steps__title--desc">{{ step.desc }}</view>
<view class="zui-steps__icons"> <view class="zan-steps__icons">
<view class="zui-steps__circle"></view> <view class="zan-steps__circle"></view>
</view> </view>
<view class="zui-steps__line"></view> <view class="zan-steps__line"></view>
</view> </view>
</view> </view>
</template> </template>

2
dist/steps/index.wxss vendored
View File

@ -1,6 +1,6 @@
@import "wxss/step.wxss"; @import "wxss/step.wxss";
@import "wxss/vstep.wxss"; @import "wxss/vstep.wxss";
.zui-steps { .zan-steps {
position: relative; position: relative;
} }

48
dist/steps/wxss/step.wxss vendored
View File

@ -1,29 +1,29 @@
.zui-steps--steps.zui-steps--5 .zui-steps__step { .zan-steps--steps.zan-steps--5 .zan-steps__step {
width: 25%; width: 25%;
} }
.zui-steps--steps.zui-steps--4 .zui-steps__step { .zan-steps--steps.zan-steps--4 .zan-steps__step {
width: 33%; width: 33%;
} }
.zui-steps--steps.zui-steps--3 .zui-steps__step { .zan-steps--steps.zan-steps--3 .zan-steps__step {
width: 50%; width: 50%;
} }
.zui-steps--steps .zui-steps__step { .zan-steps--steps .zan-steps__step {
position: relative; position: relative;
float: left; float: left;
padding-bottom: 25px; padding-bottom: 25px;
color: #b1b1b1; color: #b1b1b1;
} }
.zui-steps--steps .zui-steps__title { .zan-steps--steps .zan-steps__title {
transform: translateX(-50%); transform: translateX(-50%);
font-size: 10px; font-size: 10px;
text-align: center; text-align: center;
} }
.zui-steps--steps .zui-steps__icons { .zan-steps--steps .zan-steps__icons {
position: absolute; position: absolute;
top: 30px; top: 30px;
left: -10px; left: -10px;
@ -32,7 +32,7 @@
z-index: 10; z-index: 10;
} }
.zui-steps--steps .zui-steps__circle { .zan-steps--steps .zan-steps__circle {
display: block; display: block;
position: relative; position: relative;
width: 5px; width: 5px;
@ -41,7 +41,7 @@
border-radius: 50%; border-radius: 50%;
} }
.zui-steps--steps .zui-steps__line { .zan-steps--steps .zan-steps__line {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 32px; top: 32px;
@ -52,82 +52,82 @@
/* 已完成的steps */ /* 已完成的steps */
.zui-steps--steps .zui-steps__step--done { .zan-steps--steps .zan-steps__step--done {
color: #333; color: #333;
} }
.zui-steps--steps .zui-steps__step--done .zui-steps__line { .zan-steps--steps .zan-steps__step--done .zan-steps__line {
background-color: #06bf04; background-color: #06bf04;
} }
.zui-steps--steps .zui-steps__step--done .zui-steps__circle { .zan-steps--steps .zan-steps__step--done .zan-steps__circle {
width: 5px; width: 5px;
height: 5px; height: 5px;
background-color: #09bb07; background-color: #09bb07;
} }
/* 正在进行中的steps */ /* 正在进行中的steps */
.zui-steps--steps .zui-steps__step--cur .zui-steps__icons { .zan-steps--steps .zan-steps__step--cur .zan-steps__icons {
top: 25px; top: 25px;
left: -14px; left: -14px;
} }
.zui-steps--steps .zui-steps__step--cur .zui-steps__circle { .zan-steps--steps .zan-steps__step--cur .zan-steps__circle {
width: 13px; width: 13px;
height: 13px; height: 13px;
background-image: url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png"); background-image: url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
background-size: 13px 13px; background-size: 13px 13px;
} }
.zui-steps--steps .zui-steps__step--cur .zui-steps__line { .zan-steps--steps .zan-steps__step--cur .zan-steps__line {
background-color: #e5e5e5; background-color: #e5e5e5;
} }
/* 各种不同位置的 */ /* 各种不同位置的 */
.zui-steps--steps .zui-steps__step--first-child .zui-steps__title { .zan-steps--steps .zan-steps__step--first-child .zan-steps__title {
margin-left: 0; margin-left: 0;
transform: none; transform: none;
text-align: left; text-align: left;
} }
.zui-steps--steps .zui-steps__step--first-child .zui-steps__icons { .zan-steps--steps .zan-steps__step--first-child .zan-steps__icons {
left: -7px; left: -7px;
} }
.zui-steps--steps .zui-steps__step--last-child { .zan-steps--steps .zan-steps__step--last-child {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
text-align: right; text-align: right;
} }
.zui-steps--steps .zui-steps__step--last-child .zui-steps__title { .zan-steps--steps .zan-steps__step--last-child .zan-steps__title {
transform: none; transform: none;
text-align: right; text-align: right;
} }
.zui-steps--steps .zui-steps__step--last-child .zui-steps__icons { .zan-steps--steps .zan-steps__step--last-child .zan-steps__icons {
left: auto; left: auto;
right: -6px; right: -6px;
} }
.zui-steps--steps .zui-steps__step--last-child .zui-steps__line { .zan-steps--steps .zan-steps__step--last-child .zan-steps__line {
display: none; display: none;
} }
/* 有描述的step */ /* 有描述的step */
.zui-steps--steps .zui-steps__step--db-title { .zan-steps--steps .zan-steps__step--db-title {
min-height: 29px; min-height: 29px;
} }
.zui-steps--steps .zui-steps__step--db-title .zui-steps__line { .zan-steps--steps .zan-steps__step--db-title .zan-steps__line {
top: 45px; top: 45px;
} }
.zui-steps--steps .zui-steps__step--db-title .zui-steps__icons { .zan-steps--steps .zan-steps__step--db-title .zan-steps__icons {
top: 43px; top: 43px;
} }
.zui-steps--steps .zui-steps__step--db-title.zui-steps__step--cur .zui-steps__icons { .zan-steps--steps .zan-steps__step--db-title.zan-steps__step--cur .zan-steps__icons {
top: 39px; top: 39px;
} }

24
dist/steps/wxss/vstep.wxss vendored
View File

@ -1,18 +1,18 @@
.zui-steps--vsteps { .zan-steps--vsteps {
color: #999; color: #999;
font-size: 14px; font-size: 14px;
} }
.zui-steps--vsteps .zui-steps__step { .zan-steps--vsteps .zan-steps__step {
position: relative; position: relative;
padding: 15px 0; padding: 15px 0;
} }
.zui-steps--vsteps .zui-steps__step--done { .zan-steps--vsteps .zan-steps__step--done {
color: #44BB00; color: #44BB00;
} }
.zui-steps--vsteps .zui-steps__line { .zan-steps--vsteps .zan-steps__line {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -21,17 +21,17 @@
background-color: #e5e5e5; background-color: #e5e5e5;
} }
.zui-steps--vsteps .zui-steps__title { .zan-steps--vsteps .zan-steps__title {
display: inline-block; display: inline-block;
line-height: 20px; line-height: 20px;
padding-left: 27px; padding-left: 27px;
} }
.zui-steps--vsteps .zui-steps__title--desc { .zan-steps--vsteps .zan-steps__title--desc {
padding-left: 3px; padding-left: 3px;
} }
.zui-steps--vsteps .zui-steps__icons { .zan-steps--vsteps .zan-steps__icons {
position: absolute; position: absolute;
left: 7px; left: 7px;
top: 50%; top: 50%;
@ -41,14 +41,14 @@
background-color: #fff; background-color: #fff;
} }
.zui-steps--vsteps .zui-steps__circle { .zan-steps--vsteps .zan-steps__circle {
width: 5px; width: 5px;
height: 5px; height: 5px;
background-color: #cacaca; background-color: #cacaca;
border-radius: 10px; border-radius: 10px;
} }
.zui-steps--vsteps .zui-steps__step--done .zui-steps__circle { .zan-steps--vsteps .zan-steps__step--done .zan-steps__circle {
width: 13px; width: 13px;
height: 13px; height: 13px;
background: transparent url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png"); background: transparent url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
@ -56,12 +56,12 @@
border-radius:0; border-radius:0;
} }
.zui-steps--vsteps .zui-steps__icon--active { .zan-steps--vsteps .zan-steps__icon--active {
width: 13px; width: 13px;
height: 13px; height: 13px;
} }
.zui-steps--vsteps .zui-steps__step--first-child .zui-steps__title::before { .zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -72,7 +72,7 @@
z-index: 1; z-index: 1;
} }
.zui-steps--vsteps .zui-steps__step--last-child .zui-steps__title::before { .zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;

10
dist/tab/index.js vendored
View File

@ -1,15 +1,15 @@
var Tab = { var Tab = {
_handleZuiTabChange(e) { _handleZanTabChange(e) {
var dataset = e.currentTarget.dataset; var dataset = e.currentTarget.dataset;
var componentId = dataset.componentId; var componentId = dataset.componentId;
var selectedId = dataset.itemId; var selectedId = dataset.itemId;
var data = { componentId, selectedId }; var data = { componentId, selectedId };
console.info('[zui:tab:change]', data); console.info('[zan:tab:change]', data);
if (this.handleZuiTabChange) { if (this.handleZanTabChange) {
this.handleZuiTabChange(data); this.handleZanTabChange(data);
} else { } else {
console.warn('页面缺少 handleZuiTabChange 回调函数'); console.warn('页面缺少 handleZanTabChange 回调函数');
} }
} }
}; };

20
dist/tab/index.wxml vendored
View File

@ -1,27 +1,27 @@
<template name="zui-tab"> <template name="zan-tab">
<view class="zui-tab"> <view class="zan-tab">
<block wx:if="{{tab.scroll}}"> <block wx:if="{{tab.scroll}}">
<scroll-view class="zui-tab__bd zui-tab__bd--scroll {{fixed ? 'zui-tab__bd--fixed' : ''}}" scroll-x="true"> <scroll-view class="zan-tab__bd zan-tab__bd--scroll {{fixed ? 'zan-tab__bd--fixed' : ''}}" scroll-x="true">
<template is="zui-tab-list" data="{{ tab, componentId }}"></template> <template is="zan-tab-list" data="{{ tab, componentId }}"></template>
</scroll-view> </scroll-view>
</block> </block>
<block wx:else> <block wx:else>
<view class="zui-tab__bd {{fixed ? 'zui-tab__bd--fixed' : ''}}"> <view class="zan-tab__bd {{fixed ? 'zan-tab__bd--fixed' : ''}}">
<template is="zui-tab-list" data="{{ tab, componentId }}"></template> <template is="zan-tab-list" data="{{ tab, componentId }}"></template>
</view> </view>
</block> </block>
</view> </view>
</template> </template>
<template name="zui-tab-list"> <template name="zan-tab-list">
<view <view
wx:for="{{tab.list}}" wx:for="{{tab.list}}"
wx:key="id" wx:key="id"
class="zui-tab__item {{tab.selectedId == item.id ? 'zui-tab__item--selected' : ''}}" class="zan-tab__item {{tab.selectedId == item.id ? 'zan-tab__item--selected' : ''}}"
data-component-id="{{componentId}}" data-component-id="{{componentId}}"
data-item-id="{{item.id}}" data-item-id="{{item.id}}"
bindtap="_handleZuiTabChange" bindtap="_handleZanTabChange"
> >
<view class="zui-tab__title">{{item.title}}</view> <view class="zan-tab__title">{{item.title}}</view>
</view> </view>
</template> </template>

18
dist/tab/index.wxss vendored
View File

@ -1,26 +1,26 @@
.zui-tab { .zan-tab {
height: 45px; height: 45px;
} }
.zui-tab__bd { .zan-tab__bd {
width: 750rpx; width: 750rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-bottom: 1rpx solid #e5e5e5; border-bottom: 1rpx solid #e5e5e5;
background: #fff; background: #fff;
} }
.zui-tab__bd--fixed { .zan-tab__bd--fixed {
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 2; z-index: 2;
} }
.zui-tab__item { .zan-tab__item {
flex: 1; flex: 1;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
} }
.zui-tab__title { .zan-tab__title {
font-size: 14px; font-size: 14px;
display: inline-block; display: inline-block;
color: #666; color: #666;
@ -31,18 +31,18 @@
word-break: keep-all; word-break: keep-all;
} }
.zui-tab__item--selected .zui-tab__title { .zan-tab__item--selected .zan-tab__title {
color: #f44; color: #f44;
border-bottom: 2px solid #f44; border-bottom: 2px solid #f44;
} }
.zui-tab__bd--scroll { .zan-tab__bd--scroll {
display: block; display: block;
white-space: nowrap; white-space: nowrap;
} }
.zui-tab__bd--scroll .zui-tab__item { .zan-tab__bd--scroll .zan-tab__item {
min-width: 80px; min-width: 80px;
} }
.zui-tab__bd--scroll .zui-tab__text { .zan-tab__bd--scroll .zan-tab__text {
margin: 0 20px; margin: 0 20px;
} }

22
dist/toast/index.js vendored
View File

@ -1,32 +1,32 @@
module.exports = { module.exports = {
showZuiToast(title, timeout) { showZanToast(title, timeout) {
var zuiToast = this.data.zuiToast || {}; var zanToast = this.data.zanToast || {};
clearTimeout(zuiToast.timer); clearTimeout(zanToast.timer);
// 弹层设置~ // 弹层设置~
zuiToast = { zanToast = {
show: true, show: true,
title title
}; };
this.setData({ this.setData({
zuiToast zanToast
}); });
var timer = setTimeout(() => { var timer = setTimeout(() => {
this.clearZuiToast(); this.clearZanToast();
}, timeout || 3000); }, timeout || 3000);
this.setData({ this.setData({
'zuiToast.timer': timer 'zanToast.timer': timer
}); });
}, },
clearZuiToast() { clearZanToast() {
var zuiToast = this.data.zuiToast || {}; var zanToast = this.data.zanToast || {};
clearTimeout(zuiToast.timer); clearTimeout(zanToast.timer);
this.setData({ this.setData({
'zuiToast.show': false 'zanToast.show': false
}); });
} }
}; };

4
dist/toast/index.wxml vendored
View File

@ -1,3 +1,3 @@
<template name="zui-toast"> <template name="zan-toast">
<view class="zui-toast" wx:if="{{ zuiToast.show }}" bindtap="clearZuiToast">{{ zuiToast.title }}</view> <view class="zan-toast" wx:if="{{ zanToast.show }}" bindtap="clearZanToast">{{ zanToast.title }}</view>
</template> </template>

2
dist/toast/index.wxss vendored
View File

@ -1,4 +1,4 @@
.zui-toast { .zan-toast {
position: fixed; position: fixed;
top: 35%; top: 35%;
left: 20%; left: 20%;

6
dist/toptips/index.js vendored
View File

@ -1,7 +1,7 @@
var timer = undefined; var timer = undefined;
module.exports = { module.exports = {
showZuiTopTips(content = '', options = {}) { showZanTopTips(content = '', options = {}) {
// 如果已经有一个计时器在了，就清理掉先 // 如果已经有一个计时器在了，就清理掉先
if (timer) { if (timer) {
clearTimeout(timer); clearTimeout(timer);
@ -21,7 +21,7 @@ module.exports = {
// 展示出topTips // 展示出topTips
this.setData({ this.setData({
zuiTopTips: { zanTopTips: {
show: true, show: true,
content, content,
options options
@ -31,7 +31,7 @@ module.exports = {
// 设置定时器，定时关闭topTips // 设置定时器，定时关闭topTips
timer = setTimeout(() => { timer = setTimeout(() => {
this.setData({ this.setData({
'zuiTopTips.show': false 'zanTopTips.show': false
}); });
timer = undefined; timer = undefined;
}, options.duration); }, options.duration);

4
dist/toptips/index.wxml vendored
View File

@ -1,3 +1,3 @@
<template name="zui-toptips"> <template name="zan-toptips">
<view class="zui-toptips {{ zuiTopTips.show ? 'zui-toptips--show' : '' }}">{{ zuiTopTips.content }}</view> <view class="zan-toptips {{ zanTopTips.show ? 'zan-toptips--show' : '' }}">{{ zanTopTips.content }}</view>
</template> </template>

4
dist/toptips/index.wxss vendored
View File

@ -1,4 +1,4 @@
.zui-toptips { .zan-toptips {
display: block; display: block;
position: fixed; position: fixed;
-webkit-transform: translateZ(0) translateY(-100%); -webkit-transform: translateZ(0) translateY(-100%);
@ -17,6 +17,6 @@
transition: all 0.4s ease; transition: all 0.4s ease;
} }
.zui-toptips--show { .zan-toptips--show {
-webkit-transform: translateZ(0) translateY(0); -webkit-transform: translateZ(0) translateY(0);
} }

14
example/badge/index.wxml
View File

@ -4,22 +4,22 @@
<view class="demo"> <view class="demo">
<view class="demo__item"> <view class="demo__item">
<view class="demo__icon zui-badge"> <view class="demo__icon zan-badge">
</view> </view>
</view> </view>
<view class="demo__item"> <view class="demo__item">
<view class="demo__icon zui-badge"> <view class="demo__icon zan-badge">
<view class="zui-badge__count">9</view> <view class="zan-badge__count">9</view>
</view> </view>
</view> </view>
<view class="demo__item"> <view class="demo__item">
<view class="demo__icon zui-badge"> <view class="demo__icon zan-badge">
<view class="zui-badge__count">19</view> <view class="zan-badge__count">19</view>
</view> </view>
</view> </view>
<view class="demo__item"> <view class="demo__item">
<view class="demo__icon zui-badge"> <view class="demo__icon zan-badge">
<view class="zui-badge__count">99+</view> <view class="zan-badge__count">99+</view>
</view> </view>
</view> </view>
</view> </view>

72
example/btn/index.wxml
View File

@ -2,54 +2,54 @@
<view class="doc-title">BUTTON</view> <view class="doc-title">BUTTON</view>
<view class="zui-panel-title">普通按钮</view> <view class="zan-panel-title">普通按钮</view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-btns"> <view class="zan-btns">
<button class="zui-btn">取消订单</button> <button class="zan-btn">取消订单</button>
<button class="zui-btn zui-btn--primary">确认付款</button> <button class="zan-btn zan-btn--primary">确认付款</button>
<button class="zui-btn zui-btn--danger">确认付款</button> <button class="zan-btn zan-btn--danger">确认付款</button>
<button class="zui-btn zui-btn--warn zui-btn--last-child">确认付款</button> <button class="zan-btn zan-btn--warn zan-btn--last-child">确认付款</button>
</view> </view>
</view> </view>
<view class="zui-panel-title">大号按钮，没有边框线及圆角</view> <view class="zan-panel-title">大号按钮，没有边框线及圆角</view>
<view class="zui-panel"> <view class="zan-panel">
<button class="zui-btn zui-btn--large zui-btn--primary">确认付款</button> <button class="zan-btn zan-btn--large zan-btn--primary">确认付款</button>
<button class="zui-btn zui-btn--large zui-btn--warn">立即购买</button> <button class="zan-btn zan-btn--large zan-btn--warn">立即购买</button>
<button class="zui-btn zui-btn--large zui-btn--danger">立即购买</button> <button class="zan-btn zan-btn--large zan-btn--danger">立即购买</button>
</view> </view>
<view class="zui-panel-title">小号按钮</view> <view class="zan-panel-title">小号按钮</view>
<view class="zui-panel" style="padding: 15px;"> <view class="zan-panel" style="padding: 15px;">
<button class="zui-btn zui-btn--small">取消订单</button> <button class="zan-btn zan-btn--small">取消订单</button>
<button class="zui-btn zui-btn--small zui-btn--primary">确认付款</button> <button class="zan-btn zan-btn--small zan-btn--primary">确认付款</button>
</view> </view>
<view class="zui-panel-title">迷你按钮</view> <view class="zan-panel-title">迷你按钮</view>
<view class="zui-panel" style="padding: 15px;"> <view class="zan-panel" style="padding: 15px;">
<button class="zui-btn zui-btn--mini zui-btn--plain">取消订单</button> <button class="zan-btn zan-btn--mini zan-btn--plain">取消订单</button>
<button class="zui-btn zui-btn--mini zui-btn--primary zui-btn--plain">确认付款</button> <button class="zan-btn zan-btn--mini zan-btn--primary zan-btn--plain">确认付款</button>
<button class="zui-btn zui-btn--mini zui-btn--warn zui-btn--plain">确认付款</button> <button class="zan-btn zan-btn--mini zan-btn--warn zan-btn--plain">确认付款</button>
<button class="zui-btn zui-btn--mini zui-btn--danger zui-btn--plain">确认付款</button> <button class="zan-btn zan-btn--mini zan-btn--danger zan-btn--plain">确认付款</button>
</view> </view>
<view class="zui-panel-title">Loading</view> <view class="zan-panel-title">Loading</view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-btns"> <view class="zan-btns">
<button class="zui-btn zui-btn--loading">取消订单</button> <button class="zan-btn zan-btn--loading">取消订单</button>
<button class="zui-btn zui-btn--loading zui-btn--primary">确认付款</button> <button class="zan-btn zan-btn--loading zan-btn--primary">确认付款</button>
<button class="zui-btn zui-btn--loading zui-btn--danger">确认付款</button> <button class="zan-btn zan-btn--loading zan-btn--danger">确认付款</button>
<button class="zui-btn zui-btn--loading zui-btn--warn zui-btn--last-child">确认付款</button> <button class="zan-btn zan-btn--loading zan-btn--warn zan-btn--last-child">确认付款</button>
</view> </view>
</view> </view>
<view class="zui-panel-title">Disabled</view> <view class="zan-panel-title">Disabled</view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-btns"> <view class="zan-btns">
<button class="zui-btn zui-btn--disabled" disabled>取消订单</button> <button class="zan-btn zan-btn--disabled" disabled>取消订单</button>
<button class="zui-btn zui-btn--disabled zui-btn--primary" disabled>确认付款</button> <button class="zan-btn zan-btn--disabled zan-btn--primary" disabled>确认付款</button>
<button class="zui-btn zui-btn--disabled zui-btn--danger" disabled>确认付款</button> <button class="zan-btn zan-btn--disabled zan-btn--danger" disabled>确认付款</button>
<button class="zui-btn zui-btn--disabled zui-btn--warn zui-btn--last-child" disabled>确认付款</button> <button class="zan-btn zan-btn--disabled zan-btn--warn zan-btn--last-child" disabled>确认付款</button>
</view> </view>
</view> </view>

26
example/card/index.wxml
View File

@ -2,31 +2,31 @@
<view class="doc-title">CARD</view> <view class="doc-title">CARD</view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-card"> <view class="zan-card">
<view class="zui-card__thumb"> <view class="zan-card__thumb">
<image class="zui-card__img" <image class="zan-card__img"
src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg" src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
mode="aspectFit" mode="aspectFit"
></image> ></image>
</view> </view>
<view class="zui-card__detail"> <view class="zan-card__detail">
<view class="zui-card__detail-row"> <view class="zan-card__detail-row">
<view class="zui-card__right-col">¥ 999.99</view> <view class="zan-card__right-col">¥ 999.99</view>
<view class="zui-card__left-col zui-ellipsis--l2"> <view class="zan-card__left-col zan-ellipsis--l2">
红烧牛肉【虚拟商品】【有库存】【有sku】 红烧牛肉【虚拟商品】【有库存】【有sku】
</view> </view>
</view> </view>
<view class="zui-card__detail-row zui-c-gray-darker"> <view class="zan-card__detail-row zan-c-gray-darker">
<view class="zui-card__right-col">x2</view> <view class="zan-card__right-col">x2</view>
<view class="zui-card__left-col"> <view class="zan-card__left-col">
3000克 50% 3000克 50%
</view> </view>
</view> </view>
<view class="zui-card__detail-row zui-c-gray-darker"> <view class="zan-card__detail-row zan-c-gray-darker">
<view class="zui-card__left-col zui-c-red">已发货</view> <view class="zan-card__left-col zan-c-red">已发货</view>
</view> </view>
</view> </view>
</view> </view>

104
example/cell/index.wxml
View File

@ -2,87 +2,87 @@
<view class="doc-title">CELL</view> <view class="doc-title">CELL</view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell zui-cell--last-child"> <view class="zan-cell zan-cell--last-child">
<view class="zui-cell__bd">单行列表</view> <view class="zan-cell__bd">单行列表</view>
</view> </view>
</view> </view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell zui-cell--last-child"> <view class="zan-cell zan-cell--last-child">
<view class="zui-cell__bd">单行列表</view> <view class="zan-cell__bd">单行列表</view>
<view class="zui-cell__ft">详细信息</view> <view class="zan-cell__ft">详细信息</view>
</view> </view>
</view> </view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell zui-cell--last-child zui-cell--access"> <view class="zan-cell zan-cell--last-child zan-cell--access">
<view class="zui-cell__bd">单行列表</view> <view class="zan-cell__bd">单行列表</view>
<view class="zui-cell__ft"></view> <view class="zan-cell__ft"></view>
</view> </view>
</view> </view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell zui-cell--last-child zui-cell--access"> <view class="zan-cell zan-cell--last-child zan-cell--access">
<view class="zui-cell__bd">单行列表</view> <view class="zan-cell__bd">单行列表</view>
<view class="zui-cell__ft">详细信息</view> <view class="zan-cell__ft">详细信息</view>
</view> </view>
</view> </view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd">多行列表</view> <view class="zan-cell__bd">多行列表</view>
</view> </view>
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd">多行列表</view> <view class="zan-cell__bd">多行列表</view>
</view> </view>
<view class="zui-cell zui-cell--last-child"> <view class="zan-cell zan-cell--last-child">
<view class="zui-cell__bd">多行列表</view> <view class="zan-cell__bd">多行列表</view>
</view> </view>
</view> </view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd">多行列表</view> <view class="zan-cell__bd">多行列表</view>
<view class="zui-cell__ft">详细信息</view> <view class="zan-cell__ft">详细信息</view>
</view> </view>
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd">多行列表</view> <view class="zan-cell__bd">多行列表</view>
<view class="zui-cell__ft">详细信息</view> <view class="zan-cell__ft">详细信息</view>
</view> </view>
<view class="zui-cell zui-cell--last-child"> <view class="zan-cell zan-cell--last-child">
<view class="zui-cell__bd">多行列表</view> <view class="zan-cell__bd">多行列表</view>
<view class="zui-cell__ft">详细信息</view> <view class="zan-cell__ft">详细信息</view>
</view> </view>
</view> </view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell zui-cell--access"> <view class="zan-cell zan-cell--access">
<view class="zui-cell__bd">多行列表</view> <view class="zan-cell__bd">多行列表</view>
<view class="zui-cell__ft"></view> <view class="zan-cell__ft"></view>
</view> </view>
<view class="zui-cell zui-cell--access"> <view class="zan-cell zan-cell--access">
<view class="zui-cell__bd">多行列表</view> <view class="zan-cell__bd">多行列表</view>
<view class="zui-cell__ft"></view> <view class="zan-cell__ft"></view>
</view> </view>
<view class="zui-cell zui-cell--access zui-cell--last-child"> <view class="zan-cell zan-cell--access zan-cell--last-child">
<view class="zui-cell__bd">多行列表</view> <view class="zan-cell__bd">多行列表</view>
<view class="zui-cell__ft"></view> <view class="zan-cell__ft"></view>
</view> </view>
</view> </view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell zui-cell--access"> <view class="zan-cell zan-cell--access">
<view class="zui-cell__bd">多行列表</view> <view class="zan-cell__bd">多行列表</view>
<view class="zui-cell__ft">详细信息</view> <view class="zan-cell__ft">详细信息</view>
</view> </view>
<view class="zui-cell zui-cell--access"> <view class="zan-cell zan-cell--access">
<view class="zui-cell__bd">多行列表</view> <view class="zan-cell__bd">多行列表</view>
<view class="zui-cell__ft">详细信息</view> <view class="zan-cell__ft">详细信息</view>
</view> </view>
<view class="zui-cell zui-cell--access zui-cell--last-child"> <view class="zan-cell zan-cell--access zan-cell--last-child">
<view class="zui-cell__bd">多行列表</view> <view class="zan-cell__bd">多行列表</view>
<view class="zui-cell__ft">详细信息</view> <view class="zan-cell__ft">详细信息</view>
</view> </view>
</view> </view>

8
example/dashboard/index.wxml
View File

@ -2,10 +2,10 @@
<image class="logo" src="https://img.yzcdn.cn/public_files/2017/02/06/ee0ebced79a80457d77ce71c7d414c74.png"></image> <image class="logo" src="https://img.yzcdn.cn/public_files/2017/02/06/ee0ebced79a80457d77ce71c7d414c74.png"></image>
<view class="zui-panel"> <view class="zan-panel">
<navigator wx:for="{{ list }}" wx:key="name" class="zui-cell zui-cell--access" url="{{ item.path }}"> <navigator wx:for="{{ list }}" wx:key="name" class="zan-cell zan-cell--access" url="{{ item.path }}">
<view class="zui-cell__bd">{{ item.name }}</view> <view class="zan-cell__bd">{{ item.name }}</view>
<view class="zui-cell__ft"></view> <view class="zan-cell__ft"></view>
</navigator> </navigator>
</view> </view>

10
example/dialog/index.wxml
View File

@ -2,15 +2,15 @@
<view class="doc-title">DIALOG</view> <view class="doc-title">DIALOG</view>
<view class="zui-btns" style="margin-top: 30vh;"> <view class="zan-btns" style="margin-top: 30vh;">
<button class="zui-btn" bindtap="toggleDialog"> <button class="zan-btn" bindtap="toggleDialog">
显示Dialog 显示Dialog
</button> </button>
</view> </view>
<view class="zui-dialog {{ showDialog ? 'zui-dialog--show' : '' }}"> <view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}">
<view class="zui-dialog__mask" bindtap="toggleDialog" /> <view class="zan-dialog__mask" bindtap="toggleDialog" />
<view class="zui-dialog__container"> <view class="zan-dialog__container">
<view style="padding: 100px 0; text-align: center;">Dialog内容</view> <view style="padding: 100px 0; text-align: center;">Dialog内容</view>
</view> </view>
</view> </view>

20
example/form/index.wxml
View File

@ -2,26 +2,26 @@
<view class="doc-title">FORM</view> <view class="doc-title">FORM</view>
<view class="zui-form"> <view class="zan-form">
<view class="zui-cell zui-form__item"> <view class="zan-cell zan-form__item">
<text class="zui-form__title">收货人</text> <text class="zan-form__title">收货人</text>
<input <input
class="zui-form__input zui-cell__bd" class="zan-form__input zan-cell__bd"
placeholder="名字" placeholder="名字"
/> />
</view> </view>
<view class="zui-cell zui-form__item"> <view class="zan-cell zan-form__item">
<text class="zui-form__title">联系电话</text> <text class="zan-form__title">联系电话</text>
<input <input
class="zui-form__input zui-cell__bd" class="zan-form__input zan-cell__bd"
type="number" type="number"
maxlength="20" maxlength="20"
placeholder="手机或固定电话" placeholder="手机或固定电话"
/> />
</view> </view>
<view class="zui-cell zui-form__item zui-cell--last-child"> <view class="zan-cell zan-form__item zan-cell--last-child">
<text class="zui-form__title">选择区域</text> <text class="zan-form__title">选择区域</text>
<view class="zui-form__input zui-cell__bd"> <view class="zan-form__input zan-cell__bd">
<picker <picker
mode="selector" mode="selector"
range="{{ area }}" range="{{ area }}"

72
example/helper/index.wxml
View File

@ -1,71 +1,71 @@
<view class="container"> <view class="container">
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<view class="zui-pull-right">zui-pull-right: 往右靠</view> <view class="zan-pull-right">zan-pull-right: 往右靠</view>
</view> </view>
</view> </view>
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<view class="zui-text-deleted">zui-text-deleted：被删除的效果</view> <view class="zan-text-deleted">zan-text-deleted：被删除的效果</view>
</view> </view>
</view> </view>
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<view> <view>
<view class="zui-font-12">zui-font-12：字号12</view> <view class="zan-font-12">zan-font-12：字号12</view>
<view class="zui-font-12 zui-font-bold">zui-font-bold：再来个加粗</view> <view class="zan-font-12 zan-font-bold">zan-font-bold：再来个加粗</view>
</view> </view>
</view> </view>
</view> </view>
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<view> <view>
<view class="zui-font-16">zui-font-16：字号16</view> <view class="zan-font-16">zan-font-16：字号16</view>
<view class="zui-font-16 zui-font-bold">zui-font-bold：再来个加粗</view> <view class="zan-font-16 zan-font-bold">zan-font-bold：再来个加粗</view>
</view> </view>
</view> </view>
</view> </view>
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<view class=""> <view class="">
<view>字体颜色</view> <view>字体颜色</view>
<view class="zui-c-red">zui-c-red: 红色</view> <view class="zan-c-red">zan-c-red: 红色</view>
<view class="zui-c-gray">zui-c-gray: 灰色</view> <view class="zan-c-gray">zan-c-gray: 灰色</view>
<view class="zui-c-gray-dark">zui-c-gray-dark: 再灰一点点</view> <view class="zan-c-gray-dark">zan-c-gray-dark: 再灰一点点</view>
<view class="zui-c-gray-darker">zui-c-gray-darker: 更深的灰色</view> <view class="zan-c-gray-darker">zan-c-gray-darker: 更深的灰色</view>
<view class="zui-c-black">zui-c-black: 黑色</view> <view class="zan-c-black">zan-c-black: 黑色</view>
<view class="zui-c-blue">zui-c-blue: 蓝色</view> <view class="zan-c-blue">zan-c-blue: 蓝色</view>
<view class="zui-c-green">zui-c-green: 绿色</view> <view class="zan-c-green">zan-c-green: 绿色</view>
</view> </view>
</view> </view>
</view> </view>
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<view>zui-arrow：箭头</view> <view>zan-arrow：箭头</view>
<view class="zui-arrow"></view> <view class="zan-arrow"></view>
</view> </view>
</view> </view>
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<view class="zui-ellipsis" style="width: 300px;"> <view class="zan-ellipsis" style="width: 300px;">
zui-ellipsis：单行点点点 zan-ellipsis：单行点点点
->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符 ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
</view> </view>
</view> </view>
</view> </view>
<view class="zui-cell zui-cell--last-child"> <view class="zan-cell zan-cell--last-child">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<view class="zui-ellipsis--l2"> <view class="zan-ellipsis--l2">
zui-ellipsis--l2：单行点点点 zan-ellipsis--l2：单行点点点
->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符 ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
</view> </view>
</view> </view>

12
example/icon/index.wxml
View File

@ -2,16 +2,16 @@
<view class="doc-title">ICON</view> <view class="doc-title">ICON</view>
<view class="zui-panel"> <view class="zan-panel">
<view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap"> <view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap">
<view class="zui-icon zui-icon-{{ icon }}" style="font-size: 20px; color: #ff4343;"></view> <view class="zan-icon zan-icon-{{ icon }}" style="font-size: 20px; color: #ff4343;"></view>
<view class="icon-classname">zui-icon-{{ icon }}</view> <view class="icon-classname">zan-icon-{{ icon }}</view>
</view> </view>
</view> </view>
<view class="zui-panel" style="margin-bottom: 40px;"> <view class="zan-panel" style="margin-bottom: 40px;">
<view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap"> <view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap">
<view class="zui-icon zui-icon-{{ icon }}" style="font-size: 40px;"></view> <view class="zan-icon zan-icon-{{ icon }}" style="font-size: 40px;"></view>
<view class="icon-classname">zui-icon-{{ icon }}</view> <view class="icon-classname">zan-icon-{{ icon }}</view>
</view> </view>
</view> </view>
</view> </view>

2
example/icon/index.wxss
View File

@ -8,7 +8,7 @@
color: #999; color: #999;
font-size: 10px; font-size: 10px;
} }
.zui-icon { .zan-icon {
font-size: 40px; font-size: 40px;
margin: 20px; margin: 20px;
} }

26
example/label/index.wxml
View File

@ -2,24 +2,24 @@
<view class="doc-title">LABEL</view> <view class="doc-title">LABEL</view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell zui-cell--last-child"> <view class="zan-cell zan-cell--last-child">
<view class="zui-label">蓝色</view> <view class="zan-label">蓝色</view>
<view class="zui-label zui-label--primary">红色</view> <view class="zan-label zan-label--primary">红色</view>
<view class="zui-label zui-label--disabled">黑色</view> <view class="zan-label zan-label--disabled">黑色</view>
</view> </view>
</view> </view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell zui-cell--last-child"> <view class="zan-cell zan-cell--last-child">
<view class="zui-label zui-label--primary zui-label--small">会员折扣</view> <view class="zan-label zan-label--primary zan-label--small">会员折扣</view>
<view class="zui-label zui-label--primary zui-label--small">返现</view> <view class="zan-label zan-label--primary zan-label--small">返现</view>
</view> </view>
</view> </view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell zui-cell--last-child"> <view class="zan-cell zan-cell--last-child">
<view class="zui-label zui-label--primary zui-label--small zui-label--plain">会员折扣</view> <view class="zan-label zan-label--primary zan-label--small zan-label--plain">会员折扣</view>
<view class="zui-label zui-label--primary zui-label--small zui-label--plain">返现</view> <view class="zan-label zan-label--primary zan-label--small zan-label--plain">返现</view>
</view> </view>
</view> </view>
</view> </view>

6
example/loadmore/index.wxml
View File

@ -3,7 +3,7 @@
<view class="doc-title">LOADMORE</view> <view class="doc-title">LOADMORE</view>
<template is="zui-loadmore" data="{{loading: true}}" /> <template is="zan-loadmore" data="{{loading: true}}" />
<template is="zui-loadmore" data="{{nodata: true}}" /> <template is="zan-loadmore" data="{{nodata: true}}" />
<template is="zui-loadmore" data="{{nomore: true}}" /> <template is="zan-loadmore" data="{{nomore: true}}" />
</view> </view>

8
example/panel/index.wxml
View File

@ -2,16 +2,16 @@
<view class="doc-title">PANEL</view> <view class="doc-title">PANEL</view>
<view class="zui-panel-title">标题</view> <view class="zan-panel-title">标题</view>
<view class="zui-panel"> <view class="zan-panel">
<view style="padding: 15px;">内容</view> <view style="padding: 15px;">内容</view>
</view> </view>
<view class="zui-panel"> <view class="zan-panel">
<view style="padding: 15px;">内容</view> <view style="padding: 15px;">内容</view>
</view> </view>
<view class="zui-panel"> <view class="zan-panel">
<view style="padding: 15px;">内容</view> <view style="padding: 15px;">内容</view>
</view> </view>

6
example/quantity/index.js
View File

@ -1,6 +1,6 @@
var ZUI = require('../../dist/index'); var Zan = require('../../dist/index');
Page(Object.assign({}, ZUI.Quantity, { Page(Object.assign({}, Zan.Quantity, {
data: { data: {
quantity1: { quantity1: {
quantity: 10, quantity: 10,
@ -19,7 +19,7 @@ Page(Object.assign({}, ZUI.Quantity, {
} }
}, },
handleZuiQuantityChange(e) { handleZanQuantityChange(e) {
var componentId = e.componentId; var componentId = e.componentId;
var quantity = e.quantity; var quantity = e.quantity;

6
example/quantity/index.wxml
View File

@ -5,16 +5,16 @@
<view class="doc-title">QUANTITY</view> <view class="doc-title">QUANTITY</view>
<view style="padding: 40px 15px"> <view style="padding: 40px 15px">
<template is="zui-quantity" data="{{ ...quantity1, componentId: 'quantity1' }}" /> <template is="zan-quantity" data="{{ ...quantity1, componentId: 'quantity1' }}" />
</view> </view>
<!-- 当最大值等于最小值时，组件不可用 --> <!-- 当最大值等于最小值时，组件不可用 -->
<view style="padding: 40px 15px "> <view style="padding: 40px 15px ">
<template is="zui-quantity" data="{{ ...quantity2, componentId: 'quantity2' }}" /> <template is="zan-quantity" data="{{ ...quantity2, componentId: 'quantity2' }}" />
</view> </view>
<!-- small size --> <!-- small size -->
<view style="padding: 40px 15px "> <view style="padding: 40px 15px ">
<template is="zui-quantity" data="{{ ...quantity3, componentId: 'quantity3', size: 'small' }}" /> <template is="zan-quantity" data="{{ ...quantity3, componentId: 'quantity3', size: 'small' }}" />
</view> </view>
</view> </view>

66
example/steps/index.wxml
View File

@ -4,66 +4,66 @@
<view class="doc-title">STEPS</view> <view class="doc-title">STEPS</view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<template is="zui-steps" data="{{ type: 'horizon', steps: steps }}"></template> <template is="zan-steps" data="{{ type: 'horizon', steps: steps }}"></template>
</view> </view>
</view> </view>
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<template is="zui-steps" data="{{ type: 'horizon', steps: steps2 }}"></template> <template is="zan-steps" data="{{ type: 'horizon', steps: steps2 }}"></template>
</view> </view>
</view> </view>
<view class="zui-cell zui-cell--last-child"> <view class="zan-cell zan-cell--last-child">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<template is="zui-steps" data="{{ type: 'horizon', steps: steps3 }}"></template> <template is="zan-steps" data="{{ type: 'horizon', steps: steps3 }}"></template>
</view> </view>
</view> </view>
</view> </view>
<view class="zui-panel-title">有描述的steps</view> <view class="zan-panel-title">有描述的steps</view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<template is="zui-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps }}"></template> <template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps }}"></template>
</view> </view>
</view> </view>
<view class="zui-cell"> <view class="zan-cell">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<template is="zui-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps2 }}"></template> <template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps2 }}"></template>
</view> </view>
</view> </view>
<view class="zui-cell zui-cell--last-child"> <view class="zan-cell zan-cell--last-child">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<template is="zui-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps3 }}"></template> <template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps3 }}"></template>
</view> </view>
</view> </view>
</view> </view>
<view class="zui-panel-title">垂直方向的steps</view> <view class="zan-panel-title">垂直方向的steps</view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell zui-cell"> <view class="zan-cell zan-cell">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<template is="zui-steps" data="{{ type: 'vertical', hasDesc: true, steps }}"></template> <template is="zan-steps" data="{{ type: 'vertical', hasDesc: true, steps }}"></template>
</view> </view>
</view> </view>
<view class="zui-cell zui-cell--last-child"> <view class="zan-cell zan-cell--last-child">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<template is="zui-steps" data="{{ type: 'vertical', steps }}"></template> <template is="zan-steps" data="{{ type: 'vertical', steps }}"></template>
</view> </view>
</view> </view>
</view> </view>
<view class="zui-panel-title">可自定义class</view> <view class="zan-panel-title">可自定义class</view>
<view class="zui-panel"> <view class="zan-panel">
<view class="zui-cell__bd"> <view class="zan-cell__bd">
<template is="zui-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template> <template is="zan-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template>
</view> </view>
</view> </view>

2
example/steps/index.wxss
View File

@ -1,6 +1,6 @@
.my-class { .my-class {
padding: 10px; padding: 10px;
} }
.my-class .zui-steps__step--done { .my-class .zan-steps__step--done {
color: #f44; color: #f44;
} }

6
example/tab/index.js
View File

@ -1,6 +1,6 @@
var ZUI = require('../../dist/index'); var Zan = require('../../dist/index');
Page(Object.assign({}, ZUI.Tab, { Page(Object.assign({}, Zan.Tab, {
data: { data: {
tab1: { tab1: {
list: [{ list: [{
@ -70,7 +70,7 @@ Page(Object.assign({}, ZUI.Tab, {
} }
}, },
handleZuiTabChange(e) { handleZanTabChange(e) {
var componentId = e.componentId; var componentId = e.componentId;
var selectedId = e.selectedId; var selectedId = e.selectedId;

6
example/tab/index.wxml
View File

@ -5,12 +5,12 @@
<view class="doc-title">TAB</view> <view class="doc-title">TAB</view>
<view style="margin: 20px 0"> <view style="margin: 20px 0">
<template is="zui-tab" data="{{tab: tab1, componentId: 'tab1'}}"></template> <template is="zan-tab" data="{{tab: tab1, componentId: 'tab1'}}"></template>
</view> </view>
<view style="margin: 20px 0"> <view style="margin: 20px 0">
<template is="zui-tab" data="{{tab: tab2, componentId: 'tab2'}}"></template> <template is="zan-tab" data="{{tab: tab2, componentId: 'tab2'}}"></template>
</view> </view>
<view style="margin: 20px 0"> <view style="margin: 20px 0">
<template is="zui-tab" data="{{tab: tab3, componentId: 'tab3'}}"></template> <template is="zan-tab" data="{{tab: tab3, componentId: 'tab3'}}"></template>
</view> </view>
</view> </view>

6
example/toast/index.js
View File

@ -1,9 +1,9 @@
var ZUI = require('../../dist/index'); var Zan = require('../../dist/index');
Page(Object.assign({}, ZUI.Toast, { Page(Object.assign({}, Zan.Toast, {
data: {}, data: {},
showToast() { showToast() {
this.showZuiToast('toast的内容'); this.showZanToast('toast的内容');
} }
})); }));

6
example/toast/index.wxml
View File

@ -4,11 +4,11 @@
<view class="doc-title">TOAST</view> <view class="doc-title">TOAST</view>
<view class="zui-btns" style="margin-top: 30vh;"> <view class="zan-btns" style="margin-top: 30vh;">
<button class="zui-btn" bindtap="showToast"> <button class="zan-btn" bindtap="showToast">
显示toast 显示toast
</button> </button>
</view> </view>
</view> </view>
<template is="zui-toast" data="{{ zuiToast }}"></template> <template is="zan-toast" data="{{ zanToast }}"></template>

6
example/toptips/index.js
View File

@ -1,9 +1,9 @@
var ZUI = require('../../dist/index'); var Zan = require('../../dist/index');
Page(Object.assign({}, ZUI.TopTips, { Page(Object.assign({}, Zan.TopTips, {
data: {}, data: {},
showTopTips() { showTopTips() {
this.showZuiTopTips('toptips的内容'); this.showZanTopTips('toptips的内容');
} }
})); }));

6
example/toptips/index.wxml
View File

@ -4,11 +4,11 @@
<view class="doc-title">TOPTIPS</view> <view class="doc-title">TOPTIPS</view>
<view class="zui-btns" style="margin-top: 30vh;"> <view class="zan-btns" style="margin-top: 30vh;">
<button class="zui-btn" bindtap="showTopTips"> <button class="zan-btn" bindtap="showTopTips">
显示toptips 显示toptips
</button> </button>
</view> </view>
</view> </view>
<template is="zui-toptips" data="{{ zuiTopTips }}"></template> <template is="zan-toptips" data="{{ zanTopTips }}"></template>