文档优化 (#194)

example/pages/actionsheet/index.json

@@ -2,6 +2,7 @@
   "navigationBarTitleText": "Actionsheet 行动按钮",
   "usingComponents": {
     "zan-actionsheet": "../../dist/actionsheet/index",
-    "zan-btn": "../../dist/btn/index"
+    "zan-button": "../../dist/btn/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/actionsheet/index.wxml

@@ -1,17 +1,18 @@
-<view class="container">
-  <view class="doc-title zan-hairline--bottom zan-hairline--bottom">ACTIONSHEET</view>
+
+<doc-page title="ACTIONSHEET">
   <view class="zan-btns" style="margin-top: 30vh;">
-    <button class="zan-btn" bindtap="openActionsheet">
+    <zan-button bind:btnclick="openActionsheet">
       Actionsheet
-    </button>
-    <zan-actionsheet
-      show="{{ show }}"
-      actions="{{ actions }}"
-      cancel-text="{{ cancelText }}"
-      cancel-with-mask="{{ cancelWithMask }}"
-      bind:cancel="closeActionSheet"
-      bind:actionclick="clickAction"
-      mask-class="tiny"
-    />
+    </zan-button>
   </view>
-</view>
+
+  <zan-actionsheet
+    show="{{ show }}"
+    actions="{{ actions }}"
+    cancel-text="{{ cancelText }}"
+    cancel-with-mask="{{ cancelWithMask }}"
+    bind:cancel="closeActionSheet"
+    bind:actionclick="clickAction"
+    mask-class="tiny"
+  />
+</doc-page>

example/pages/field/index.js

@@ -1,6 +1,6 @@
 const config = require('./config');
 
-Page(Object.assign({}, {
+Page({
   data: {
     config,
     value: 'test',
@@ -79,4 +79,4 @@ Page(Object.assign({}, {
     });
   }
 
-}));
+});

example/pages/field/index.json

@@ -1,6 +1,9 @@
 {
   "navigationBarTitleText": "Field 输入框",
   "usingComponents": {
-    "zan-field": "../../dist/field/index"
+    "zan-button": "../../dist/btn/index",
+    "zan-field": "../../dist/field/index",
+    "zan-panel": "../../dist/panel/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/field/index.wxml

@@ -1,9 +1,6 @@
-<import src="/dist/field/index.wxml" />
-
-<doc-page title="Field">
+<doc-page title="Field" without-padding>
   <!-- Field 基础用法 -->
-  <view class="zan-panel-title">基础用法</view>
-  <view class="zan-panel">
+  <zan-panel title="基础用法">
     <zan-field
       title="{{ config.base.name.title }}"
       placeholder="{{ config.base.name.placeholder }}"
@@ -30,65 +27,55 @@
       disabled="{{ config.base.disabled.disabled }}"
     >
     </zan-field>
-  </view>
+  </zan-panel>
   
   <view class="zan-btns">
-    <button
-      class="zan-btn zan-btn--primary"
-      bindtap="clearInput"
-    >
-      清除输入
-    </button>
+    <zan-button type="primary" bind:btnclick="clearInput">清除输入</zan-button>
   </view>
 
   <!-- 去除标题后的输入框样式 -->
-  <view class="zan-panel-title">无标题输入框</view>
-  <view class="zan-panel">
+  <zan-panel title="无标题输入框">
     <zan-field
       placeholder="{{ config.notitle.placeholder }}"
       value="{{ textareaValue }}"
     >
     </zan-field>
-  </view>
+  </zan-panel>
 
   <view class="zan-btns">
-    <button
-      class="zan-btn zan-btn--primary"
-      bindtap="clearTextarea"
-    >
-      清除输入
-    </button>
+    <zan-button type="primary" bind:btnclick="clearTextarea">清除输入</zan-button>
   </view>
 
   <!-- 使用 Field 圆角样式 -->
-  <view class="zan-panel-title field__title--radius">圆角输入框</view>
-  <zan-field
-    title="{{ config.radius.totalPrice.title }}"
-    type="{{ config.radius.totalPrice.type }}"
-    placeholder="{{ config.radius.totalPrice.placeholder }}"
-    right="{{ config.radius.totalPrice.right }}"
-    mode="{{ config.radius.totalPrice.mode }}"
-  >
-  </zan-field>
-  <zan-field
-    class="zan-field--radius"
-    title="{{ config.radius.excludePrice.title }}"
-    type="{{ config.radius.excludePrice.type }}"
-    placeholder="{{ config.radius.excludePrice.placeholder }}"
-    right="{{ config.radius.excludePrice.right }}"
-    mode="{{ config.radius.excludePrice.mode }}"
-    error="{{ config.radius.excludePrice.error }}"
-  >
-  </zan-field>
-  <zan-field
-    placeholder="{{ config.radius.notitle.placeholder }}"
-    mode="{{ config.radius.notitle.mode }}"
-    input-type="{{ config.radius.notitle.inputTitle }}"
-  >
-  </zan-field>
-
-  <view class="zan-panel-title">Form 表单中的field应用</view>
-  <form bindsubmit="formSubmit" bindreset="formReset">
+  <zan-panel title="圆角输入框">
+    <zan-field
+      title="{{ config.radius.totalPrice.title }}"
+      type="{{ config.radius.totalPrice.type }}"
+      placeholder="{{ config.radius.totalPrice.placeholder }}"
+      right="{{ config.radius.totalPrice.right }}"
+      mode="{{ config.radius.totalPrice.mode }}"
+    >
+    </zan-field>
+    <zan-field
+      class="zan-field--radius"
+      title="{{ config.radius.excludePrice.title }}"
+      type="{{ config.radius.excludePrice.type }}"
+      placeholder="{{ config.radius.excludePrice.placeholder }}"
+      right="{{ config.radius.excludePrice.right }}"
+      mode="{{ config.radius.excludePrice.mode }}"
+      error="{{ config.radius.excludePrice.error }}"
+    >
+    </zan-field>
+    <zan-field
+      placeholder="{{ config.radius.notitle.placeholder }}"
+      mode="{{ config.radius.notitle.mode }}"
+      input-type="{{ config.radius.notitle.inputTitle }}"
+    >
+    </zan-field>
+  </zan-panel>
+  
+  <!-- <view class="zan-panel-title">Form 表单中的field应用</view> -->
+  <!-- <form bindsubmit="formSubmit" bindreset="formReset">
     <view class="zan-panel">
       <zan-field
         name="{{ config.form.name.name }}"
@@ -110,33 +97,5 @@
           formType="reset">重置数据</button>
       </view>
     </view>
-  </form>
-
-  <view class="zan-panel-title">自定义显示内容</view>
-  <view class="zan-panel">
-    <!-- 简单 picker 示例 -->
-    <view class="zan-cell zan-field">
-      <view class="zan-cell__hd zan-field__title">选择区域</view>
-      <picker
-        mode="selector"
-        class="zan-field__input zan-cell__bd"
-        range="{{ area }}"
-        value="{{ areaIndex }}"
-        bindchange="onAreaChange"
-      >
-        {{ area[areaIndex] }}
-      </picker>
-    </view>
-
-    <view class="zan-cell zan-field">
-      <view class="zan-cell__hd zan-field__title">验证码</view>
-      <input
-        type="text"
-        placeholder="请输入短信验证码"
-        class="zan-field__input zan-cell__bd"/>
-      <view class="zan-cell__ft">
-        <button class="zan-btn zan-btn--mini zan-btn--primary">获取验证码</button>
-      </view>
-    </view>
-  </view>
+  </form> -->
 </doc-page>

example/pages/stepper/index.json

@@ -1,6 +1,8 @@
 {
   "navigationBarTitleText": "Stepper 计数器",
   "usingComponents": {
-    "zan-stepper": "../../dist/stepper/index"
+    "zan-stepper": "../../dist/stepper/index",
+    "zan-panel": "../../dist/panel/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/stepper/index.wxml

@@ -1,40 +1,43 @@
-<doc-page title="Stepper">
-  <view class="zan-panel-title">基础用法</view>
-  <view style="padding: 40px 15px">
-    <zan-stepper
-      stepper="{{ stepper1.stepper }}"
-      min="{{ stepper1.min }}"
-      max="{{ stepper1.max }}"
-      data-component-id="stepper1"
-      bind:change="handleZanStepperChange"
-    >
-    </zan-stepper>
-  </view>
+<doc-page title="Stepper" without-padding>
+  <zan-panel title="基础用法">
+    <view style="padding: 40px 15px">
+      <zan-stepper
+        stepper="{{ stepper1.stepper }}"
+        min="{{ stepper1.min }}"
+        max="{{ stepper1.max }}"
+        data-component-id="stepper1"
+        bind:change="handleZanStepperChange"
+      >
+      </zan-stepper>
+    </view>
+  </zan-panel>
 
   <!-- small size -->
-  <view class="zan-panel-title">不同尺寸</view>
-  <view style="padding: 40px 15px">
-    <zan-stepper
-      stepper="{{ stepper2.stepper }}"
-      min="{{ stepper2.min }}"
-      max="{{ stepper2.max }}"
-      size="small"
-      data-component-id="stepper2"
-      bind:change="handleZanStepperChange"
-    >
-    </zan-stepper>
-  </view>
+  <zan-panel title="不同尺寸-小尺寸类型">
+    <view style="padding: 40px 15px">
+      <zan-stepper
+        stepper="{{ stepper2.stepper }}"
+        min="{{ stepper2.min }}"
+        max="{{ stepper2.max }}"
+        size="small"
+        data-component-id="stepper2"
+        bind:change="handleZanStepperChange"
+      >
+      </zan-stepper>
+    </view>
+  </zan-panel>
 
-  <view class="zan-panel-title">高级用法</view>
-  <view style="padding: 40px 15px">
-    <zan-stepper
-      stepper="{{ stepper3.stepper }}"
-      min="{{ stepper3.min }}"
-      max="{{ stepper3.max }}"
-      step="{{ stepper3.step }}"
-      data-component-id="stepper3"
-      bind:change="handleZanStepperChange"
-    >
-    </zan-stepper>
-  </view>
+  <zan-panel title="高级用法-每次变动数量自定义">
+    <view style="padding: 40px 15px">
+      <zan-stepper
+        stepper="{{ stepper3.stepper }}"
+        min="{{ stepper3.min }}"
+        max="{{ stepper3.max }}"
+        step="{{ stepper3.step }}"
+        data-component-id="stepper3"
+        bind:change="handleZanStepperChange"
+      >
+      </zan-stepper>
+    </view>
+  </zan-panel>
 </doc-page>

example/pages/steps/index.json

@@ -1,6 +1,10 @@
 {
   "navigationBarTitleText": "Steps 步骤条",
   "usingComponents": {
-    "zan-steps": "../../dist/steps/index"
+    "zan-cell": "../../dist/cell/index",
+    "zan-cell-group": "../../dist/cell-group/index",
+    "zan-panel": "../../dist/panel/index",
+    "zan-steps": "../../dist/steps/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/steps/index.wxml

@@ -1,70 +1,47 @@
-<import src="/dist/steps/index.wxml" />
-
-<view class="container">
-
-  <view class="doc-title zan-hairline--bottom">STEPS</view>
-
-  <view class="zan-panel">
-    <view class="zan-cell">
-      <view class="zan-cell__bd">
+<doc-page title="STEPS" without-padding>
+  <zan-panel>
+    <zan-cell-group>
+      <zan-cell>
         <zan-steps type="horizon" steps="{{steps}}"></zan-steps>
-      </view>
-    </view>
-
-    <view class="zan-cell">
-      <view class="zan-cell__bd">
+      </zan-cell>
+      <zan-cell>
         <zan-steps type="horizon" steps="{{steps2}}"></zan-steps>
-      </view>
-    </view>
-
-    <view class="zan-cell zan-cell--last-child">
-      <view class="zan-cell__bd">
+      </zan-cell>
+      <zan-cell>
         <zan-steps type="horizon" steps="{{steps3}}"></zan-steps>
-      </view>
-    </view>
-  </view>
+      </zan-cell>
+    </zan-cell-group>
+  </zan-panel>
 
-  <view class="zan-panel-title">有描述的steps</view>
-  <view class="zan-panel">
-    <view class="zan-cell">
-      <view class="zan-cell__bd">
+  <zan-panel title="有描述的steps">
+    <zan-cell-group>
+      <zan-cell>
         <zan-steps type="horizon" hasDesc steps="{{steps}}"></zan-steps>
-      </view>
-    </view>
-
-    <view class="zan-cell">
-      <view class="zan-cell__bd">
+      </zan-cell>
+      <zan-cell>
         <zan-steps type="horizon" hasDesc steps="{{steps2}}"></zan-steps>
-      </view>
-    </view>
-
-    <view class="zan-cell zan-cell--last-child">
-      <view class="zan-cell__bd">
+      </zan-cell>
+      <zan-cell>
         <zan-steps type="horizon" hasDesc steps="{{steps3}}"></zan-steps>
-      </view>
-    </view>
-  </view>
+      </zan-cell>
+    </zan-cell-group>
+  </zan-panel>
 
-  <view class="zan-panel-title">垂直方向的steps</view>
-  <view class="zan-panel">
-    <view class="zan-cell zan-cell">
-      <view class="zan-cell__bd">
+  <zan-panel title="垂直方向的steps">
+    <zan-cell-group>
+      <zan-cell>
         <zan-steps type="vertical" hasDesc steps="{{steps}}"></zan-steps>
-      </view>
-    </view>
+      </zan-cell>
+      <zan-cell>
+        <zan-steps type="vertical" hasDesc steps="{{steps2}}"></zan-steps>
+      </zan-cell>
+    </zan-cell-group>
+  </zan-panel>
 
-    <view class="zan-cell zan-cell--last-child">
-      <view class="zan-cell__bd">
-        <zan-steps type="vertical" steps="{{steps}}"></zan-steps>
-      </view>
-    </view>
-  </view>
-
-  <view class="zan-panel-title">可自定义class</view>
-  <view class="zan-panel">
-    <view class="zan-cell__bd">
+  <zan-panel title="可自定义 class">
+    <zan-cell>
       <zan-steps type="vertical" steps="{{steps}}" className="my-class"></zan-steps>
-    </view>
-  </view>
+    </zan-cell>
+  </zan-panel>
+</doc-page>
 
-</view>

example/pages/switch/index.js

@@ -11,26 +11,20 @@ Page(Object.assign({}, Zan.Switch, {
     },
   },
 
-  syncChange(e, data) {
+  syncChange({ detail }) {
     this.setData({
-      sync: {
-        checked: data.checked
-      }
+      'sync.checked': detail.checked
     });
   },
 
-  asyncChange(e, data) {
+  asyncChange({ detail }) {
     this.setData({
-      async: {
-        loading: true
-      }
+      'async.loading': true
     });
     setTimeout(() => {
       this.setData({
-        async: {
-          loading: false,
-          checked: data.checked
-        }
+        'async.loading': false,
+        'async.checked': detail.checked
       });
     }, 500);
   }

example/pages/switch/index.json

@@ -1,7 +1,9 @@
 {
   "navigationBarTitleText": "Switch 开关",
   "usingComponents": {
-    "zan-switch": "/packages/switch/index",
-    "zan-panel": "/packages/panel/index"
+    "zan-switch": "../../dist/switch/index",
+    "zan-panel": "../../dist/panel/index",
+    "zan-cell": "../../dist/cell/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/switch/index.wxml

@@ -1,19 +1,21 @@
-<import src="/dist/switch/index.wxml" />
-
-<view class="container">
-
-  <view class="doc-title zan-hairline--bottom">SWITCH</view>
+<doc-page title="SWITCH" without-padding>
 
   <zan-panel title='同步开关'>
-    <zan-switch checked="{{sync.checked}}" bind:change="syncChange" />
+    <zan-cell>
+      <zan-switch checked="{{sync.checked}}" bind:change="syncChange" />
+    </zan-cell>
   </zan-panel>
 
   <zan-panel title='同步开关'>
-    <zan-switch checked="{{async.checked}}" disabled="{{ async.disabled }}" loading="{{ async.loading }}" bind:change="asyncChange" />
+    <zan-cell>
+      <zan-switch checked="{{async.checked}}" disabled="{{ async.disabled }}" loading="{{ async.loading }}" bind:change="asyncChange" />
+    </zan-cell>
   </zan-panel>
 
-  <zan-panel title='同步开关'>
-    <zan-switch disabled="{{ false }}" />
+  <zan-panel title='禁止改动的开关'>
+    <zan-cell>
+      <zan-switch disabled="{{ false }}" />
+    </zan-cell>
   </zan-panel>
 
-</view>
+</doc-page>

example/pages/tab/index.js

@@ -1,5 +1,18 @@
 Page({
   data: {
+    tab: {
+      list: [{
+        id: 1,
+        title: '选项1'
+      }, {
+        id: 2,
+        title: '选项2'
+      }, {
+        id: 3,
+        title: '选项3'
+      }],
+      selectedId: 1
+    },
     tab1: {
       list: [{
         id: 'all',
@@ -13,9 +26,6 @@ Page({
       }, {
         id: 'send',
         title: '待收货'
-      }, {
-        id: 'sign',
-        title: '已完成订单'
       }],
       selectedId: 'all'
     },
@@ -41,32 +51,7 @@ Page({
       }],
       selectedId: '1',
       scroll: true,
-      height: 80
-    },
-    tab3: {
-      list: [{
-        id: '1',
-        title: '商品1'
-      }, {
-        id: '2',
-        title: '商品2'
-      }, {
-        id: '3',
-        title: '商品3'
-      }, {
-        id: '4',
-        title: '商品4'
-      }, {
-        id: '5',
-        title: '商品5'
-      }, {
-        id: '6',
-        title: '商品6'
-      }],
-      selectedId: '1',
-      height: 45,
-      scroll: true,
-      fixed: true
+      height: 45
     }
   }
 });

example/pages/tab/index.json

@@ -1,6 +1,7 @@
 {
   "navigationBarTitleText": "Tab 标签",
   "usingComponents": {
-    "zan-tab": "../../dist/tab/index"
+    "zan-tab": "../../dist/tab/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/tab/index.wxml

@@ -1,16 +1,20 @@
-<import src="/dist/tab/index.wxml" />
+<doc-page title="TAB" without-padding>
 
-<view class="container">
+  <view style="margin: 30px 0">
+    <zan-tab
+      list="{{ tab.list }}"
+      selected-id="{{ tab.selectedId }}"
+    />
+  </view>
 
-  <view class="doc-title zan-hairline--bottom">TAB</view>
-
-  <view style="margin: 20px 0">
+  <view style="margin: 30px 0">
     <zan-tab
       list="{{ tab1.list }}"
       selected-id="{{ tab1.selectedId }}"
     />
   </view>
-  <view style="margin: 20px 0">
+
+  <view style="margin: 30px 0">
     <zan-tab
       list="{{ tab2.list }}"
       selected-id="{{ tab2.selectedId }}"
@@ -18,13 +22,5 @@
       height="{{ tab2.height }}"
     />
   </view>
-  <view style="margin: 20px 0">
-    <zan-tab
-      list="{{ tab3.list }}"
-      selected-id="{{ tab3.selectedId }}"
-      scroll="{{ tab3.scroll }}"
-      fixed="{{ tab3.fixed }}"
-      height="{{ tab3.height }}"
-    />
-  </view>
-</view>
+    
+</doc-page>

example/pages/tag/index.json

@@ -1,6 +1,9 @@
 {
   "navigationBarTitleText": "Tag 标记",
   "usingComponents": {
-    "zan-tag": "/dist/tag/index"
+    "zan-cell": "../../dist/cell/index",
+    "zan-panel": "../../dist/panel/index",
+    "zan-tag": "../../dist/tag/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/tag/index.wxml

@@ -1,30 +1,28 @@
-<view class="container">
-
-  <view class="doc-title zan-hairline--bottom">Tag</view>
-
-  <view class="zan-panel">
-    <view class="zan-cell zan-cell--last-child">
+<doc-page title="Tag" without-padding>
+  <zan-panel title="基础用法" class="tag-demo">
+    <zan-cell>
       <zan-tag>灰色</zan-tag>
       <zan-tag type="danger">红色</zan-tag>
       <zan-tag disabled>不可用</zan-tag>
-    </view>
-  </view>
-  <view class="zan-panel">
-    <view class="zan-cell zan-cell--last-child">
+    </zan-cell>
+  </zan-panel>
+
+  <zan-panel title="各种不同类型" class="tag-demo">
+    <zan-cell>
       <zan-tag type="danger">会员折扣</zan-tag>
       <zan-tag type="warn">返现</zan-tag>
       <zan-tag type="primary">返现</zan-tag>
       <zan-tag type="primary" disabled>不可用</zan-tag>
-    </view>
-  </view>
+    </zan-cell>
+  </zan-panel>
 
-    <view class="zan-panel">
-    <view class="zan-cell zan-cell--last-child">
+  <zan-panel title="镂空 Tag" class="tag-demo">
+    <zan-cell>
       <zan-tag plain>灰色</zan-tag>
       <zan-tag type="danger" plain>会员折扣</zan-tag>
       <zan-tag type="warn" plain>返现</zan-tag>
       <zan-tag type="primary" plain>返现</zan-tag>
       <zan-tag type="primary" plain disabled>返现不可用</zan-tag>
-    </view>
-  </view>
-</view>
+    </zan-cell>
+  </zan-panel>
+</doc-page>

example/pages/tag/index.wxss

@@ -1,3 +1,8 @@
+.tag-demo {
+  display: block;
+  margin: 15px 0;
+}
+
 zan-tag + zan-tag {
   margin-left: 10px;
 }

example/pages/toptips/index.json

@@ -1,6 +1,8 @@
 {
   "navigationBarTitleText": "Toptips 顶部提示",
   "usingComponents": {
-    "zan-toptips": "../../dist/toptips/index"
+    "zan-button": "../../dist/btn/index",
+    "zan-toptips": "../../dist/toptips/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/toptips/index.wxml

@@ -1,30 +1,27 @@
-<import src="/dist/toptips/index.wxml" />
-
-<view class="container">
-
-  <view class="doc-title zan-hairline--bottom">TOPTIPS</view>
-
+<doc-page title="TOPTIPS">
   <view class="zan-btns" style="margin-top: 30vh;">
-    <button class="zan-btn" bindtap="showTopTips">
+    <zan-button bind:btnclick="showTopTips">
       显示toptips，声明式调用
-    </button>
+    </zan-button>
   </view>
 
   <view class="zan-btns" style="margin-top: 30px;">
-    <button class="zan-btn" bindtap="showTopTips2">
+    <zan-button bind:btnclick="showTopTips2">
       显示toptips，命令式调用
-    </button>
+    </zan-button>
   </view>
 
   <view class="zan-btns" style="margin-top: 30px;">
-    <button class="zan-btn" bindtap="showTopTips3">
+    <zan-button bind:btnclick="showTopTips3">
       显示toptips，持续一秒
-    </button>
+    </zan-button>
   </view>
-</view>
+</doc-page>
 
 <zan-toptips
   id="zan-toptips"
   content="{{ content }}"
   is-show="{{ $zanui.toptips.show }}"
 />
+
+

packages/switch/index.js

@@ -22,7 +22,10 @@ Component({
         return;
       }
       let checked = !this.data.checked;
-      this.triggerEvent('change', event, { loading, checked });
+      this.triggerEvent('change', {
+        checked,
+        loading: this.data.loading
+      });
     }
   }
 });