优化example文档

app.wxss

@@ -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;
+}

dist/panel/index.wxss

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

example/badge/index.wxml

@@ -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">

example/btn/index.wxml

@@ -1,23 +1,31 @@
 <view class="container">
 
-  <view class="zui-panel" style="padding: 15px;">
+  <view class="doc-title">BUTTON</view>
-    <button class="zui-btn">取消订单</button>
+
-    <button class="zui-btn zui-btn--primary">确认付款</button>
+  <view class="zui-panel-title">普通按钮</view>
-    <button class="zui-btn zui-btn--danger">确认付款</button>
+  <view class="zui-panel">
-    <button class="zui-btn zui-btn--warn zui-btn--last-child">确认付款</button>
+    <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;">
+  <view class="zui-panel-title">Loading</view>
-    <button class="zui-btn zui-btn--loading">取消订单</button>
+  <view class="zui-panel">
-    <button class="zui-btn zui-btn--loading zui-btn--primary">确认付款</button>
+    <view class="zui-btns">
-    <button class="zui-btn zui-btn--loading zui-btn--danger">确认付款</button>
+      <button class="zui-btn zui-btn--loading">取消订单</button>
-    <button class="zui-btn zui-btn--loading zui-btn--warn zui-btn--last-child">确认付款</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;">
+  <view class="zui-panel-title">Disabled</view>
-    <button class="zui-btn zui-btn--disabled" disabled>取消订单</button>
+  <view class="zui-panel">
-    <button class="zui-btn zui-btn--disabled zui-btn--primary" disabled>确认付款</button>
+    <view class="zui-btns">
-    <button class="zui-btn zui-btn--disabled zui-btn--danger" disabled>确认付款</button>
+      <button class="zui-btn zui-btn--disabled" disabled>取消订单</button>
-    <button class="zui-btn zui-btn--disabled zui-btn--warn zui-btn--last-child" 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>

example/btns/index.js

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

example/btns/index.wxml

@@ -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>

example/card/index.wxml

@@ -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">

example/cell/index.wxml

@@ -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 zui-cell--last-child">
-      <view class="zui-cell__bd">字段1</view>
+      <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">字段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>
   </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 zui-cell--last-child zui-cell--access">
-      <view class="zui-cell__bd">点击时背景会变色</view>
+      <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__bd">多行列表</view>
-      <view class="zui-cell__ft">每天</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__bd">多行列表</view>
-      <view class="zui-cell__ft">08:00~22:00</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>
 

example/dialog/index.wxml

@@ -1,19 +1,17 @@
 <view class="container">
 
-  <view class="zui-btns">
+  <view class="doc-title">DIALOG</view>
-    <button
+
-      class="zui-btn zui-btn--primary zui-btn--large"
+  <view class="zui-btns" style="margin-top: 30vh;">
-      bindtap="toggleDialog"
+    <button class="zui-btn" bindtap="toggleDialog">
-      style="margin-top: 40vh;"
+      显示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>
 

example/form/index.wxml

@@ -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>

example/icon/index.wxml

@@ -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>

example/label/index.wxml

@@ -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>

example/loadmore/index.wxml

@@ -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}}" />

example/panel/index.wxml

@@ -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>

example/quantity/index.wxml

@@ -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>

example/steps/index.wxml

@@ -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">

example/tab/index.wxml

@@ -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>

example/toast/index.js

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

example/toast/index.wxml

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

example/toptips/index.js

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

example/toptips/index.wxml

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