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

优化example文档 (#2)

Browse Source 
优化example文档
This commit is contained in:
Nino 2017-02-04 16:38:31 +08:00 committed by GitHub
parent e973a1185f
commit 21561bd26e
21 changed files with 155 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app.wxss
View File

@ -16,3 +16,11 @@
background-color: #e2e2e2;
z-index: 5;
}
.doc-title {
font-size: 25px;
line-height: 25px;
color: #666;
padding: 15px 0;
margin: 20px 15px;
border-bottom: 1rpx solid #e5e5e5;
}

2
dist/panel/index.wxss vendored
View File

@ -10,7 +10,7 @@
font-size: 14px;
line-height: 14px;
color: #999;
padding: 10px 15px 0 15px;
padding: 20px 15px 0 15px;
}

3
example/badge/index.wxml
View File

@ -1,4 +1,7 @@
<view class="container">
<view class="doc-title">BADGE</view>
<view class="demo">
<view class="demo__item">
<view class="demo__icon zui-badge">

44
example/btn/index.wxml
View File

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

13
example/btns/index.js
View File

@ -1,13 +0,0 @@
var app = getApp()
Page({
data: {
},
onLoad: function () {
},
onShow: function() {
},
})

7
example/btns/index.wxml
View File

@ -1,7 +0,0 @@
<view class="container">
<view class="zui-btns">
<button class="zui-btn zui-btn--danger">1号按钮</button>
<button class="zui-btn zui-btn--primary">1号按钮</button>
<button class="zui-btn">2号按钮</button>
</view>
</view>

6
example/card/index.wxml
View File

@ -1,5 +1,7 @@
<view class="container">
<view class="doc-title">CARD</view>
<view class="zui-panel">
<view class="zui-card">
<view class="zui-card__thumb">
@ -11,7 +13,7 @@
<view class="zui-card__detail">
<view class="zui-card__detail-row">
<view class="zui-card__right-col">¥ 999.99</view>
<view class="goods-card__left-col zui-ellipsis--l2">
<view class="zui-card__left-col zui-ellipsis--l2">
红烧牛肉【虚拟商品】【有库存】【有sku】
</view>
</view>
@ -24,7 +26,7 @@
</view>
<view class="zui-card__detail-row zui-c-gray-darker">
<view class="goods-card__left-col zui-c-red">已发货</view>
<view class="zui-card__left-col zui-c-red">已发货</view>
</view>
</view>
</view>

86
example/cell/index.wxml
View File

@ -1,42 +1,88 @@
<view class="container">
<view class="doc-title">CELL</view>
<view class="zui-panel">
<view class="zui-cell zui-cell--access">
<view class="zui-cell__bd">字段1</view>
<view class="zui-cell__ft"></view>
</view>
<view class="zui-cell zui-cell--access">
<view class="zui-cell__bd">字段2</view>
<view class="zui-cell__ft"></view>
</view>
<view class="zui-cell zui-cell--last-child zui-cell--access">
<view class="zui-cell__bd">最后一个字段</view>
<view class="zui-cell__ft"></view>
<view class="zui-cell zui-cell--last-child">
<view class="zui-cell__bd">单行列表</view>
</view>
</view>
<view class="zui-panel">
<view class="zui-cell zui-cell--last-child">
<view class="zui-cell__bd">不带箭头</view>
<view class="zui-cell__bd">单行列表</view>
<view class="zui-cell__ft">详细信息</view>
</view>
</view>
<view class="zui-panel">
<navigator class="zui-cell zui-cell--last-child">
<view class="zui-cell__bd">点击时背景会变色</view>
<view class="zui-cell zui-cell--last-child zui-cell--access">
<view class="zui-cell__bd">单行列表</view>
<view class="zui-cell__ft"></view>
</navigator>
</view>
</view>
<view class="zui-panel">
<view class="zui-cell zui-cell--last-child zui-cell--access">
<view class="zui-cell__bd">单行列表</view>
<view class="zui-cell__ft">详细信息</view>
</view>
</view>
<view class="zui-panel-title">营业时间</view>
<view class="zui-panel">
<view class="zui-cell">
<view class="zui-cell__bd">日期</view>
<view class="zui-cell__ft">每天</view>
<view class="zui-cell__bd">多行列表</view>
</view>
<view class="zui-cell">
<view class="zui-cell__bd">多行列表</view>
</view>
<view class="zui-cell zui-cell--last-child">
<view class="zui-cell__bd">时间段</view>
<view class="zui-cell__ft">08:00~22:00</view>
<view class="zui-cell__bd">多行列表</view>
</view>
</view>
<view class="zui-panel">
<view class="zui-cell">
<view class="zui-cell__bd">多行列表</view>
<view class="zui-cell__ft">详细信息</view>
</view>
<view class="zui-cell">
<view class="zui-cell__bd">多行列表</view>
<view class="zui-cell__ft">详细信息</view>
</view>
<view class="zui-cell zui-cell--last-child">
<view class="zui-cell__bd">多行列表</view>
<view class="zui-cell__ft">详细信息</view>
</view>
</view>
<view class="zui-panel">
<view class="zui-cell zui-cell--access">
<view class="zui-cell__bd">多行列表</view>
<view class="zui-cell__ft"></view>
</view>
<view class="zui-cell zui-cell--access">
<view class="zui-cell__bd">多行列表</view>
<view class="zui-cell__ft"></view>
</view>
<view class="zui-cell zui-cell--access zui-cell--last-child">
<view class="zui-cell__bd">多行列表</view>
<view class="zui-cell__ft"></view>
</view>
</view>
<view class="zui-panel">
<view class="zui-cell zui-cell--access">
<view class="zui-cell__bd">多行列表</view>
<view class="zui-cell__ft">详细信息</view>
</view>
<view class="zui-cell zui-cell--access">
<view class="zui-cell__bd">多行列表</view>
<view class="zui-cell__ft">详细信息</view>
</view>
<view class="zui-cell zui-cell--access zui-cell--last-child">
<view class="zui-cell__bd">多行列表</view>
<view class="zui-cell__ft">详细信息</view>
</view>
</view>

14
example/dialog/index.wxml
View File

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

2
example/form/index.wxml
View File

@ -1,5 +1,7 @@
<view class="container">
<view class="doc-title">FORM</view>
<view class="zui-form">
<view class="zui-cell zui-form__item">
<text class="zui-form__title">收货人</text>

3
example/icon/index.wxml
View File

@ -1,4 +1,7 @@
<view class="container">
<view class="doc-title">ICON</view>
<view class="zui-panel">
<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>

3
example/label/index.wxml
View File

@ -1,4 +1,7 @@
<view class="container">
<view class="doc-title">LABEL</view>
<view class="zui-panel">
<view class="zui-cell zui-cell--last-child">
<view class="zui-label">蓝色</view>

4
example/loadmore/index.wxml
View File

@ -1,6 +1,8 @@
<import src="/dist/loadmore/index.wxml" />
<view class="container">
<view class="doc-title">LOADMORE</view>
<template is="zui-loadmore" data="{{loading: true}}" />
<template is="zui-loadmore" data="{{nodata: true}}" />
<template is="zui-loadmore" data="{{nomore: true}}" />

8
example/panel/index.wxml
View File

@ -1,16 +1,18 @@
<view class="container">
<view class="doc-title">PANEL</view>
<view class="zui-panel-title">标题</view>
<view class="zui-panel">
<view style="padding: 15px;">带标题的Panel</view>
<view style="padding: 15px;">内容</view>
</view>
<view class="zui-panel">
<view style="padding: 15px;">Panel</view>
<view style="padding: 15px;">内容</view>
</view>
<view class="zui-panel">
<view style="padding: 15px;">Panel</view>
<view style="padding: 15px;">内容</view>
</view>
</view>

3
example/quantity/index.wxml
View File

@ -1,6 +1,9 @@
<import src="/dist/quantity/index.wxml" />
<view class="container">
<view class="doc-title">QUANTITY</view>
<view style="padding: 40px 15px">
<template is="zui-quantity" data="{{ ...quantity1, componentId: 'quantity1' }}" />
</view>

3
example/steps/index.wxml
View File

@ -1,6 +1,9 @@
<import src="/dist/steps/index.wxml" />
<view class="container">
<view class="doc-title">STEPS</view>
<view class="zui-panel">
<view class="zui-cell">
<view class="zui-cell__bd">

3
example/tab/index.wxml
View File

@ -1,6 +1,9 @@
<import src="/dist/tab/index.wxml" />
<view class="container">
<view class="doc-title">TAB</view>
<view style="margin: 20px 0">
<template is="zui-tab" data="{{tab: tab1, componentId: 'tab1'}}"></template>
</view>

2
example/toast/index.js
View File

@ -4,6 +4,6 @@ Page(Object.assign({}, ZUI.Toast, {
data: {},
showToast() {
this.showZuiToast('哎呀，出了点小问题');
this.showZuiToast('toast的内容');
}
}));

13
example/toast/index.wxml
View File

@ -1,13 +1,12 @@
<import src="/dist/toast/index.wxml" />
<view class="container">
<view class="zui-btns">
<button
class="zui-btn zui-btn--primary zui-btn--large"
catchtap="showToast"
style="margin-top: 40vh;"
>
弹个窗~
<view class="doc-title">TOAST</view>
<view class="zui-btns" style="margin-top: 30vh;">
<button class="zui-btn" bindtap="showToast">
显示toast
</button>
</view>
</view>

2
example/toptips/index.js
View File

@ -4,6 +4,6 @@ Page(Object.assign({}, ZUI.TopTips, {
data: {},
showTopTips() {
this.showZuiTopTips('哎呀，出了点小问题');
this.showZuiTopTips('toptips的内容');
}
}));

11
example/toptips/index.wxml
View File

@ -1,12 +1,11 @@
<import src="/dist/toptips/index.wxml" />
<view class="container">
<view class="zui-btns">
<button
class="zui-btn zui-btn--primary zui-btn--large"
catchtap="showTopTips"
style="margin-top: 40vh;"
>
<view class="doc-title">TOPTIPS</view>
<view class="zui-btns" style="margin-top: 30vh;">
<button class="zui-btn" bindtap="showTopTips">
显示toptips
</button>
</view>