From 6726f1e4f1b2b0f077a7c3ae99325b0939296d9a Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Fri, 17 Mar 2017 17:20:56 +0800
Subject: [PATCH] zanui docs

---
 docs/components/mobile-nav.vue       |  2 +-
 docs/examples-dist/image-preview.vue | 10 ++++++-
 docs/examples-dist/popup.vue         |  5 +++-
 docs/examples-dist/switch.vue        | 22 ++++++++++++++--
 docs/examples-dist/tab.vue           |  9 +++++++
 docs/examples-dist/toast.vue         | 39 +++++++++++++++++++++-------
 docs/examples-docs/image-preview.md  | 10 +++++++
 docs/examples-docs/popup.md          |  5 +++-
 docs/examples-docs/tab.md            | 11 ++++++++
 docs/examples-docs/uploader.md       |  2 +-
 10 files changed, 98 insertions(+), 17 deletions(-)

diff --git a/docs/components/mobile-nav.vue b/docs/components/mobile-nav.vue
index 049d999ff..b188ff135 100644
--- a/docs/components/mobile-nav.vue
+++ b/docs/components/mobile-nav.vue
@@ -29,7 +29,7 @@
 export default {
   props: {
     group: {
-      type: Array,
+      type: Object,
       default: () => {
         return [];
       }
diff --git a/docs/examples-dist/image-preview.vue b/docs/examples-dist/image-preview.vue
index db90bc295..37389b507 100644
--- a/docs/examples-dist/image-preview.vue
+++ b/docs/examples-dist/image-preview.vue
@@ -4,7 +4,15 @@
 
 
               </example-block></section></template>
-
+<style>
+@component-namespace demo {
+  @b image-preview {
+    .zan-button {
+      margin-left: 15px;
+    }
+  }
+}
+</style>
 <script>
 import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 import { ImagePreview } from 'src/index';
diff --git a/docs/examples-dist/popup.vue b/docs/examples-dist/popup.vue
index 090fadd50..de1283f6f 100644
--- a/docs/examples-dist/popup.vue
+++ b/docs/examples-dist/popup.vue
@@ -55,7 +55,10 @@
 
     .zan-popup-4 {
       width: 60%;
-      height: 200px;
+      box-sizing: border-box;
+      padding: 20px;
+      border-radius: 5px;
+      text-align: center;
     }
 
     .zan-button {
diff --git a/docs/examples-dist/switch.vue b/docs/examples-dist/switch.vue
index cf6776b7f..2c07c2cac 100644
--- a/docs/examples-dist/switch.vue
+++ b/docs/examples-dist/switch.vue
@@ -1,6 +1,6 @@
 <template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
                 <div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
+  <zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
   <div class="demo-switch__text">{{switchStateText}}</div>
 </div>
 <div class="demo-switch__wrapper">
@@ -41,4 +41,22 @@
   }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+export default {
+  data() {
+    return {
+      switchState: true
+    };
+  },
+  computed: {
+    switchStateText() {
+      return this.switchState ? ' ON' : 'OFF';
+    }
+  },
+  methods: {
+    updateState(newState) {
+      this.switchState = newState;
+    }
+  }
+};  
+</script>
\ No newline at end of file
diff --git a/docs/examples-dist/tab.vue b/docs/examples-dist/tab.vue
index 748728183..6d5b91709 100644
--- a/docs/examples-dist/tab.vue
+++ b/docs/examples-dist/tab.vue
@@ -38,6 +38,15 @@
 
               </example-block></section></template>
 <style>
+@component-namespace demo {
+  @b tab {
+    .zan-tabs-pane {
+      background-color: #fff;
+      padding: 20px;
+    }
+  }
+}
+</style><style>
   .page-tab {
     padding: 0 15px;
   }
diff --git a/docs/examples-dist/toast.vue b/docs/examples-dist/toast.vue
index 76f734219..730642e4b 100644
--- a/docs/examples-dist/toast.vue
+++ b/docs/examples-dist/toast.vue
@@ -1,9 +1,9 @@
 <template><section class="demo-toast"><h1 class="demo-title">toast</h1><example-block title="基础用法">
-                <zan-button @click="showSimpleToast()">普通文字提示</zan-button>
-
-<zan-button @click="showToast('loading')">加载Toast</zan-button>
-<zan-button @click="showToast('success')">成功</zan-button>
-<zan-button @click="showToast('failure')">失败</zan-button>
+                <zan-button @click="showSimpleToast">普通文字提示</zan-button>
+<zan-button @click="showLoadingToast">加载Toast</zan-button>
+<zan-button @click="showSuccessToast">成功</zan-button>
+<zan-button @click="showFailToast">失败</zan-button>
+<zan-button @click="showCustomizedToast(5000)">倒数5秒</zan-button>
 
 
 
@@ -26,11 +26,30 @@ export default {
     showSimpleToast() {
       Toast('我是提示文案，建议不超过十五字~');
     },
-    showToast(type) {
-      Toast({
-        type: type,
-        message: '文案信息'
-      })
+    showLoadingToast() {
+      Toast.loading();
+    },
+    showSuccessToast() {
+      Toast.success('成功文案');
+    },
+    showFailToast() {
+      Toast.fail('失败文案');
+    },
+    showCustomizedToast(duration) {
+      let leftSec = duration / 1000;
+      let toast = Toast({
+        duration: duration + 1000,
+        type: 'success',
+        message: leftSec.toString()
+      });
+      window.setInterval(() => {
+        if (leftSec <= 1) {
+          window.clearInterval();
+          toast.message = '跳转中...'
+          return;
+        }
+        toast.message = (--leftSec).toString();
+      }, 1000);
     }
   }
 };
diff --git a/docs/examples-docs/image-preview.md b/docs/examples-docs/image-preview.md
index 954c6f8e1..05ec9729b 100644
--- a/docs/examples-docs/image-preview.md
+++ b/docs/examples-docs/image-preview.md
@@ -1,3 +1,13 @@
+<style>
+@component-namespace demo {
+  @b image-preview {
+    .zan-button {
+      margin-left: 15px;
+    }
+  }
+}
+</style>
+
 <script>
 import { ImagePreview } from 'src/index';
 
diff --git a/docs/examples-docs/popup.md b/docs/examples-docs/popup.md
index e8df9175e..2fe391738 100644
--- a/docs/examples-docs/popup.md
+++ b/docs/examples-docs/popup.md
@@ -22,7 +22,10 @@
 
     .zan-popup-4 {
       width: 60%;
-      height: 200px;
+      box-sizing: border-box;
+      padding: 20px;
+      border-radius: 5px;
+      text-align: center;
     }
 
     .zan-button {
diff --git a/docs/examples-docs/tab.md b/docs/examples-docs/tab.md
index 5df9777ab..1a3978995 100644
--- a/docs/examples-docs/tab.md
+++ b/docs/examples-docs/tab.md
@@ -1,3 +1,14 @@
+<style>
+@component-namespace demo {
+  @b tab {
+    .zan-tabs-pane {
+      background-color: #fff;
+      padding: 20px;
+    }
+  }
+}
+</style>
+
 ## Tab 组件
 
 ### 基础用法
diff --git a/docs/examples-docs/uploader.md b/docs/examples-docs/uploader.md
index 193714197..2b5bfb1d3 100644
--- a/docs/examples-docs/uploader.md
+++ b/docs/examples-docs/uploader.md
@@ -31,7 +31,7 @@ export default {
 ```html
 <div class="uploader-container">
   <zan-uploader @file-readed="logContent">
-    <zan-icon name="camera"></zan-icon>
+    <zan-icon name="photograph"></zan-icon>
   </zan-uploader>
 </div>
 ```