tesT: vue demo app update

nativescript-community · Jan 18, 2021 · 426f71d · 426f71d
1 parent 5e48adf
commit 426f71d
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 29 deletions.
diff --git a/demo-vue/app/examples/BottomNavigation.vue b/demo-vue/app/examples/BottomNavigation.vue
@@ -0,0 +1,101 @@
+<template>
+    <Page>
+        <ActionBar :title="title">
+            <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap" />
+        </ActionBar>
+
+        <MDBottomNavigation selectedIndex="1" unloadOnTabChange="false">
+            <!-- The bottom tab UI is created via MDTabStrip (the containier) and MDTabStripItem (for each tab)-->
+            <MDTabStrip>
+                <MDTabStripItem>
+                    <Label text="Home"/>
+                    <Image src="font://mdi-home" class="mdi"/>
+                </MDTabStripItem>
+                <MDTabStripItem class="special">
+                    <Label text="Account"/>
+                    <Image src="font://mdi-account" class="mdi"/>
+                </MDTabStripItem>
+                <MDTabStripItem class="special">
+                    <Label text="Search"/>
+                    <Image src="font://mdi-magnify" class="mdi"/>
+                </MDTabStripItem>
+            </MDTabStrip>
+
+            <!-- The number of MDTabContentItem components should corespond to the number of MDTabStripItem components -->
+            <MDTabContentItem>
+                <GridLayout backgroundColor="red" @loaded="onLoaded('red')">
+                    <Label text="Home Page" class="h2 text-center"></Label>
+                </GridLayout>
+            </MDTabContentItem>
+            <MDTabContentItem>
+                <GridLayout backgroundColor="green" @loaded="onLoaded('green')">
+                    <Label text="Account Page" class="h2 text-center"></Label>
+                </GridLayout>
+            </MDTabContentItem>
+            <MDTabContentItem>
+                <GridLayout backgroundColor="yellow" @loaded="onLoaded('yellow')">
+                    <Label text="Search Page" class="h2 text-center"></Label>
+                </GridLayout>
+            </MDTabContentItem>
+        </MDBottomNavigation>
+    </Page>
+</template>
+
+<script lang="ts">
+import * as frameModule from '@nativescript/core/ui/frame';
+import { Tabs } from '@nativescript-community/ui-material-tabs';
+import { EventData } from '@nativescript/core';
+
+import Vue from 'vue';
+
+export const title = 'BottomNavigation sample';
+
+export default Vue.extend({
+    name: 'BottomNavigation',
+    data() {
+        return {
+            title: title
+        };
+    },
+    methods: {
+        onNavigationButtonTap() {
+            frameModule.Frame.topmost().goBack();
+        },
+        onLoaded(name) {
+            console.log('onTabLoaded', name)
+        }
+    }
+});
+</script>
+
+<style>
+
+MDTabs {
+  /* color: gold; */
+}
+
+MDTabContentItem.special {
+  color: green;
+}
+
+MDTabStrip {
+  color: skyblue;
+}
+
+MDTabStripItem.special {
+  color: teal;
+}
+
+MDTabStripItem.special:active {
+  color: yellowgreen;
+}
+
+MDTabStripItem.nested Label {
+  color: teal;
+}
+
+MDTabStripItem.nested:active Label {
+  color: yellowgreen;
+}
+
+</style>
diff --git a/demo-vue/app/examples/Tabs.vue b/demo-vue/app/examples/Tabs.vue
@@ -5,38 +5,38 @@
         </ActionBar>
 
         <MDTabs selectedIndex="1">
-            <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
-            <TabStrip>
-                <TabStripItem>
+            <!-- The bottom tab UI is created via MDTabStrip (the containier) and MDTabStripItem (for each tab)-->
+            <MDTabStrip>
+                <MDTabStripItem>
                     <Label text="Home"/>
                     <Image src="font://mdi-home" class="mdi"/>
-                </TabStripItem>
-                <TabStripItem class="special">
+                </MDTabStripItem>
+                <MDTabStripItem class="special">
                     <Label text="Account"/>
                     <Image src="font://mdi-account" class="mdi"/>
-                </TabStripItem>
-                <TabStripItem class="special">
+                </MDTabStripItem>
+                <MDTabStripItem class="special">
                     <Label text="Search"/>
                     <Image src="font://mdi-magnify" class="mdi"/>
-                </TabStripItem>
-            </TabStrip>
+                </MDTabStripItem>
+            </MDTabStrip>
 
-            <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
-            <TabContentItem>
-                <GridLayout backgroundColor="red">
+            <!-- The number of MDTabContentItem components should corespond to the number of MDTabStripItem components -->
+            <MDTabContentItem>
+                <GridLayout backgroundColor="red" @loaded="onLoaded('red')">
                     <Label text="Home Page" class="h2 text-center"></Label>
                 </GridLayout>
-            </TabContentItem>
-            <TabContentItem>
-                <GridLayout backgroundColor="green">
+            </MDTabContentItem>
+            <MDTabContentItem>
+                <GridLayout backgroundColor="green" @loaded="onLoaded('green')">
                     <Label text="Account Page" class="h2 text-center"></Label>
                 </GridLayout>
-            </TabContentItem>
-            <TabContentItem>
-                <GridLayout backgroundColor="yellow">
+            </MDTabContentItem>
+            <MDTabContentItem>
+                <GridLayout backgroundColor="yellow" @loaded="onLoaded('yellow')">
                     <Label text="Search Page" class="h2 text-center"></Label>
                 </GridLayout>
-            </TabContentItem>
+            </MDTabContentItem>
         </MDTabs>
     </Page>
 </template>
@@ -60,6 +60,9 @@ export default Vue.extend({
     methods: {
         onNavigationButtonTap() {
             frameModule.Frame.topmost().goBack();
+        },
+        onLoaded(name) {
+            console.log('onTabLoaded', name)
         }
     }
 });
@@ -71,27 +74,27 @@ MDTabs {
   /* color: gold; */
 }
 
-TabContentItem.special {
+MDTabContentItem.special {
   color: green;
 }
 
-TabStrip {
+MDTabStrip {
   color: skyblue;
 }
 
-TabStripItem.special {
+MDTabStripItem.special {
   color: teal;
 }
 
-TabStripItem.special:active {
+MDTabStripItem.special:active {
   color: yellowgreen;
 }
 
-TabStripItem.nested Label {
+MDTabStripItem.nested Label {
   color: teal;
 }
 
-TabStripItem.nested:active Label {
+MDTabStripItem.nested:active Label {
   color: yellowgreen;
 }
 

diff --git a/demo-vue/app/examples/index.ts b/demo-vue/app/examples/index.ts
@@ -1,5 +1,6 @@
 import ActivityIndicators, { title as activityIndicatorsTitle } from './ActivityIndicators.vue';
 import BottomNavigationBar, { title as bottomNavigationBarTitle } from './BottomNavigationBar.vue';
+import BottomNavigation, { title as bottomNavigationTitle } from './BottomNavigation.vue';
 import Buttons, { title as buttonsTitle } from './Buttons.vue';
 import CardViews, { title as cardViewsTitle } from './CardViews.vue';
 import Dialogs, { title as dialogsTitle } from './Dialogs.vue';
@@ -28,6 +29,10 @@ export const getExamples = () => [
         title: bottomNavigationBarTitle,
         component: BottomNavigationBar
     },
+    {
+        title: bottomNavigationTitle,
+        component: BottomNavigation
+    },
     {
         title: tabsTitle,
         component: Tabs

diff --git a/demo-vue/app/main.ts b/demo-vue/app/main.ts
@@ -17,6 +17,7 @@ import { install as installBottomSheet } from '@nativescript-community/ui-materi
 import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
 import BottomNavigationBarPlugin from '@nativescript-community/ui-material-bottomnavigationbar/vue';
 import TabsPlugin from '@nativescript-community/ui-material-tabs/vue';
+import BottomNavigationPlugin from '@nativescript-community/ui-material-bottomnavigation/vue';
 import SpeedDialPlugin from '@nativescript-community/ui-material-speeddial/vue';
 
 installBottomSheet();
@@ -33,6 +34,7 @@ Vue.use(TextFieldPlugin);
 Vue.use(BottomSheetPlugin);
 Vue.use(BottomNavigationBarPlugin);
 Vue.use(TabsPlugin);
+Vue.use(BottomNavigationPlugin);
 Vue.use(SpeedDialPlugin);
 
 // Vue.registerElement('Label', () => require('@nativescript-community/ui-label').Label);

diff --git a/demo-vue/app/views/Home.ts b/demo-vue/app/views/Home.ts
@@ -6,16 +6,15 @@ export default {
     <Page>
       <ActionBar title="Material Vue">
       </ActionBar>
-      <StackLayout>
-      <Label paddingLeft="10" heigth="100" text="This is a text"  verticalAlignment="center"/>
+      <GridLayout>
       <ListView ref="listView" rowHeight="60" for="example in examples">
         <v-template>
-          <GridLayout rippleColor="red" @tap="{goToExample(example)}"  @longPress="{goToModalExample(example)}" >
+          <GridLayout rippleColor="red" @tap="{goToExample(example)}" >
             <Label paddingLeft="10" :text="example.title"  verticalAlignment="center" isUserInteractionEnabled="false"/>
           </GridLayout>
         </v-template>
       </ListView>
-      </StackLayout>
+      </GridLayout>
       
     </Page>
     `,

diff --git a/demo-vue/package.json b/demo-vue/package.json
@@ -8,6 +8,7 @@
         "@nativescript/core": "7.0.13",
         "@nativescript-community/text": "1.3.6",
         "@nativescript-community/ui-material-activityindicator": "file:../packages/activityindicator",
+        "@nativescript-community/ui-material-bottomnavigation": "file:../packages/bottomnavigation",
         "@nativescript-community/ui-material-bottomnavigationbar": "file:../packages/bottomnavigationbar",
         "@nativescript-community/ui-material-bottomsheet": "file:../packages/bottomsheet",
         "@nativescript-community/ui-material-button": "file:../packages/button",