支持嵌套路由的Tabbar组件

yst726 · Nov 19, 2016 · bf031ad · bf031ad
1 parent 31049c8
commit bf031ad
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 21 deletions.
diff --git a/demo/components/Index.vue b/demo/components/Index.vue
@@ -22,11 +22,6 @@
           UI Components
         </div>
 
-        <div class="item item-icon-right" v-link="{ path: '/widgets/tabbar/home' }">
-          TabBar <span class="note"></span>
-          <i class="icon ion-ios-arrow-right"></i>
-        </div>
-
         <!-- Form Related -->
         <div class="item item-icon-right" v-link="{ path: '/widgets/rippleButton' }">
           Button <span class="note">Ripple effect by material design</span>
@@ -114,6 +109,10 @@
           Sidebar <span class="note">边栏</span>
           <i class="icon ion-ios-arrow-right"></i>
         </div>
+        <div class="item item-icon-right" v-link="{ path: '/widgets/tabbar/home' }">
+          TabBar <span class="note">支持嵌套路由</span>
+          <i class="icon ion-ios-arrow-right"></i>
+        </div>
 
         <!-- Loading & Toast -->
         <div class="item item-icon-right" @click="showToast()">

diff --git a/demo/components/TabBar.vue b/demo/components/TabBar.vue
@@ -1,9 +1,11 @@
 <template>
-  <tab-bar
-    :menus="menus"
-  ></tab-bar>
+  <div>
+    <tab-bar
+      :menus="menus"
+    ></tab-bar>
 
-  <router-view></router-view>
+    <router-view></router-view>
+  </div>
 </template>
 <style>
 

diff --git a/demo/components/tabbar/Cart.vue b/demo/components/tabbar/Cart.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="page" v-nav="{title: '购物车'}">
-    <div class="page-content">
-      <p>购物车</p>
+  <div class="page" v-nav="{hideNavbar: true}">
+    <div class="bar bar-header">
+      <h1 class="title">购物车</h1>
+    </div>
+
+    <div class="page-content padding padding-top">
+      <p class="text-center">Cart</p>
     </div>
   </div>
 </template>
diff --git a/demo/components/tabbar/Discount.vue b/demo/components/tabbar/Discount.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="page" v-nav="{title: '折扣'}">
-    <div class="page-content">
-      <p>折扣</p>
+  <div class="page" v-nav="{hideNavbar: true}">
+    <div class="bar bar-header">
+      <h1 class="title">折扣</h1>
+    </div>
+
+    <div class="page-content padding padding-top">
+      <p class="text-center">Discount</p>
     </div>
   </div>
 </template>
diff --git a/demo/components/tabbar/Home.vue b/demo/components/tabbar/Home.vue
@@ -1,13 +1,29 @@
 <template>
-  <div class="page" v-nav="{title: '首页', showBackButton: true, onBackButtonClick: back}">
-    <div class="page-content">
-      <p>首页</p>
+  <div class="page" v-nav="{hideNavbar: true}">
+    <div class="bar bar-header">
+      <h1 class="title">首页</h1>
+    </div>
+
+    <div class="page-content padding padding-top">
+      <p class="text-center">Home Page</p>
+
+      <div style="text-align: center; padding: 100px">
+        <md-button class="button button-assertive" @click="back()">
+          返回组件列表页
+        </md-button>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+  import {MdButton} from 'vonic'
+
   export default {
+    components: {
+      MdButton
+    },
+
     methods: {
       back() {
         $router.back({ path: '/' })

diff --git a/demo/components/tabbar/User.vue b/demo/components/tabbar/User.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="page" v-nav="{title: '我的'}">
-    <div class="page-content">
-      <p>我的</p>
+  <div class="page has-navbar" v-nav="{hideNavbar: true}">
+    <div class="bar bar-header">
+      <h1 class="title">我的</h1>
+    </div>
+
+    <div class="page-content padding padding-top">
+      <p class="text-center">User Info</p>
     </div>
   </div>
 </template>