test: updated demo app

Author: farfromrefug

demo-vue/app/examples/SnackBar.vue

@@ -1,13 +1,21 @@
 <template>
     <Page>
+        
         <ActionBar :title="title">
-            <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
+            <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap" />
         </ActionBar>
-        <StackLayout>
-            <MDButton id="show_snack" text="show snack" @tap="onTap" />
-            <MDButton id="show_snack_action" text="show snack action" @tap="onTap" />
-            <MDButton id="show_snack_action_color" text="show snack action color" @tap="onTap" />
-        </StackLayout>
+        <GridLayout rows="*, auto" backgroundColor="blue">
+            <StackLayout ref="innerView">
+                <MDButton id="show_snack" text="show snack" @tap="onTap" />
+                <MDButton id="show_snack_action" text="show snack action" @tap="onTap" />
+                <MDButton id="show_snack_action_color" text="show snack action color" @tap="onTap" />
+            </StackLayout>
+            <MDBottomNavigationBar row="1" activeColor="red">
+                <MDBottomNavigationTab title="First" icon="res://ic_home" activeColor="green" />
+                <MDBottomNavigationTab title="Second" icon="res://ic_view_list" isSelectable="false" />
+                <MDBottomNavigationTab title="Third" icon="res://ic_menu" inactiveColor="brown" />
+            </MDBottomNavigationBar>
+        </GridLayout>
     </Page>
 </template>
 
@@ -27,7 +35,7 @@ export default Vue.extend({
     data() {
         return {
             name: 'SnackBar',
-            title: title
+            title: title,
         };
     },
     methods: {
@@ -40,21 +48,21 @@ export default Vue.extend({
             console.log('onTap', objId, obj);
             switch (objId) {
                 case 'show_snack': {
-                    showSnack({ message: 'this is test snack!', textColor:'yellow', view:this.nativeView });
+                    showSnack({ message: 'this is test snack!', textColor: 'yellow', view: this.$refs.innerView.nativeView });
                     break;
                 }
                 case 'show_snack_action': {
-                    showSnack({ message: 'this is test snack with action!', actionText:'done' });
+                    showSnack({ message: 'this is test snack with action!', actionText: 'done' });
                     break;
                 }
                 case 'show_snack_action_color': {
-                    showSnack({ message: 'this is test snack with action colored!', actionText:'delete', actionTextColor:'red' }).then(r=>{
+                    showSnack({ message: 'this is test snack with action colored!', actionText: 'delete', actionTextColor: 'red' }).then((r) => {
                         console.log('showSnack result', r);
                     });
                     break;
                 }
             }
-        }
-    }
+        },
+    },
 });
-</script>
+</script>