From 21561bd26e3b03fb2ca61d35fbf16feed74c3b48 Mon Sep 17 00:00:00 2001
From: Nino <ninofocus@gmail.com>
Date: Sat, 4 Feb 2017 16:38:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96example=E6=96=87=E6=A1=A3=20(?=
 =?UTF-8?q?#2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

优化example文档
---
 app.wxss                    |  8 ++++
 dist/panel/index.wxss       |  2 +-
 example/badge/index.wxml    |  3 ++
 example/btn/index.wxml      | 44 ++++++++++++-------
 example/btns/index.js       | 13 ------
 example/btns/index.wxml     |  7 ---
 example/card/index.wxml     |  6 ++-
 example/cell/index.wxml     | 86 ++++++++++++++++++++++++++++---------
 example/dialog/index.wxml   | 14 +++---
 example/form/index.wxml     |  2 +
 example/icon/index.wxml     |  3 ++
 example/label/index.wxml    |  3 ++
 example/loadmore/index.wxml |  4 +-
 example/panel/index.wxml    |  8 ++--
 example/quantity/index.wxml |  3 ++
 example/steps/index.wxml    |  3 ++
 example/tab/index.wxml      |  3 ++
 example/toast/index.js      |  2 +-
 example/toast/index.wxml    | 13 +++---
 example/toptips/index.js    |  2 +-
 example/toptips/index.wxml  | 11 +++--
 21 files changed, 155 insertions(+), 85 deletions(-)
 delete mode 100644 example/btns/index.js
 delete mode 100644 example/btns/index.wxml

diff --git a/app.wxss b/app.wxss
index c8a32817..d191022d 100644
--- a/app.wxss
+++ b/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;
+}
diff --git a/dist/panel/index.wxss b/dist/panel/index.wxss
index b4b29840..6d0006b0 100644
--- a/dist/panel/index.wxss
+++ b/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;
 }
 
 
diff --git a/example/badge/index.wxml b/example/badge/index.wxml
index 81bc5d3f..4a7df4a1 100644
--- a/example/badge/index.wxml
+++ b/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">
diff --git a/example/btn/index.wxml b/example/btn/index.wxml
index 2d659adb..33c3a7b3 100644
--- a/example/btn/index.wxml
+++ b/example/btn/index.wxml
@@ -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>
diff --git a/example/btns/index.js b/example/btns/index.js
deleted file mode 100644
index 99e7458d..00000000
--- a/example/btns/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-var app = getApp()
-
-Page({
-  data: {
-  },
-
-  onLoad: function () {
-
-  },
-
-  onShow: function() {
-  },
-})
diff --git a/example/btns/index.wxml b/example/btns/index.wxml
deleted file mode 100644
index b33cc46b..00000000
--- a/example/btns/index.wxml
+++ /dev/null
@@ -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>
diff --git a/example/card/index.wxml b/example/card/index.wxml
index 0a8f9885..abf8fca8 100644
--- a/example/card/index.wxml
+++ b/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">
@@ -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>
diff --git a/example/cell/index.wxml b/example/cell/index.wxml
index b96ac57a..299d12dc 100644
--- a/example/cell/index.wxml
+++ b/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__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>
 
diff --git a/example/dialog/index.wxml b/example/dialog/index.wxml
index b0335096..f74e82ea 100644
--- a/example/dialog/index.wxml
+++ b/example/dialog/index.wxml
@@ -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>
 
diff --git a/example/form/index.wxml b/example/form/index.wxml
index f72dc660..47c5b94f 100644
--- a/example/form/index.wxml
+++ b/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>
diff --git a/example/icon/index.wxml b/example/icon/index.wxml
index cab21238..87df64f2 100644
--- a/example/icon/index.wxml
+++ b/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>
diff --git a/example/label/index.wxml b/example/label/index.wxml
index 072ee8e2..309ed007 100644
--- a/example/label/index.wxml
+++ b/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>
diff --git a/example/loadmore/index.wxml b/example/loadmore/index.wxml
index 2bb89344..61a57774 100644
--- a/example/loadmore/index.wxml
+++ b/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}}" />
diff --git a/example/panel/index.wxml b/example/panel/index.wxml
index c95911cb..b2e38abb 100644
--- a/example/panel/index.wxml
+++ b/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>
diff --git a/example/quantity/index.wxml b/example/quantity/index.wxml
index 42aa274e..3975ca89 100644
--- a/example/quantity/index.wxml
+++ b/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>
diff --git a/example/steps/index.wxml b/example/steps/index.wxml
index 849197b1..991fdc7e 100644
--- a/example/steps/index.wxml
+++ b/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">
diff --git a/example/tab/index.wxml b/example/tab/index.wxml
index ddddbfa8..2aa1e49c 100644
--- a/example/tab/index.wxml
+++ b/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>
diff --git a/example/toast/index.js b/example/toast/index.js
index 61debe1e..8f68611e 100644
--- a/example/toast/index.js
+++ b/example/toast/index.js
@@ -4,6 +4,6 @@ Page(Object.assign({}, ZUI.Toast, {
   data: {},
 
   showToast() {
-    this.showZuiToast('哎呀，出了点小问题');
+    this.showZuiToast('toast的内容');
   }
 }));
diff --git a/example/toast/index.wxml b/example/toast/index.wxml
index e3dcbb9a..c55fb7c0 100644
--- a/example/toast/index.wxml
+++ b/example/toast/index.wxml
@@ -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>
diff --git a/example/toptips/index.js b/example/toptips/index.js
index a4fb138d..552e6b38 100644
--- a/example/toptips/index.js
+++ b/example/toptips/index.js
@@ -4,6 +4,6 @@ Page(Object.assign({}, ZUI.TopTips, {
   data: {},
 
   showTopTips() {
-    this.showZuiTopTips('哎呀，出了点小问题');
+    this.showZuiTopTips('toptips的内容');
   }
 }));
diff --git a/example/toptips/index.wxml b/example/toptips/index.wxml
index c46d5499..b613e137 100644
--- a/example/toptips/index.wxml
+++ b/example/toptips/index.wxml
@@ -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>