Skip to content

Commit 426f71d

Browse files
farfromrefugfarfromrefug
committed
tesT: vue demo app update
1 parent 5e48adf commit 426f71d

File tree

6 files changed

+140
-29
lines changed

6 files changed

+140
-29
lines changed

‎demo-vue/app/examples/BottomNavigation.vue

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<template>
2+
<Page>
3+
<ActionBar :title="title">
4+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap" />
5+
</ActionBar>
6+
7+
<MDBottomNavigation selectedIndex="1" unloadOnTabChange="false">
8+
<!-- The bottom tab UI is created via MDTabStrip (the containier) and MDTabStripItem (for each tab)-->
9+
<MDTabStrip>
10+
<MDTabStripItem>
11+
<Label text="Home"/>
12+
<Image src="font://mdi-home" class="mdi"/>
13+
</MDTabStripItem>
14+
<MDTabStripItem class="special">
15+
<Label text="Account"/>
16+
<Image src="font://mdi-account" class="mdi"/>
17+
</MDTabStripItem>
18+
<MDTabStripItem class="special">
19+
<Label text="Search"/>
20+
<Image src="font://mdi-magnify" class="mdi"/>
21+
</MDTabStripItem>
22+
</MDTabStrip>
23+
24+
<!-- The number of MDTabContentItem components should corespond to the number of MDTabStripItem components -->
25+
<MDTabContentItem>
26+
<GridLayout backgroundColor="red" @loaded="onLoaded('red')">
27+
<Label text="Home Page" class="h2 text-center"></Label>
28+
</GridLayout>
29+
</MDTabContentItem>
30+
<MDTabContentItem>
31+
<GridLayout backgroundColor="green" @loaded="onLoaded('green')">
32+
<Label text="Account Page" class="h2 text-center"></Label>
33+
</GridLayout>
34+
</MDTabContentItem>
35+
<MDTabContentItem>
36+
<GridLayout backgroundColor="yellow" @loaded="onLoaded('yellow')">
37+
<Label text="Search Page" class="h2 text-center"></Label>
38+
</GridLayout>
39+
</MDTabContentItem>
40+
</MDBottomNavigation>
41+
</Page>
42+
</template>
43+
44+
<script lang="ts">
45+
import * as frameModule from '@nativescript/core/ui/frame';
46+
import { Tabs } from '@nativescript-community/ui-material-tabs';
47+
import { EventData } from '@nativescript/core';
48+
49+
import Vue from 'vue';
50+
51+
export const title = 'BottomNavigation sample';
52+
53+
export default Vue.extend({
54+
name: 'BottomNavigation',
55+
data() {
56+
return {
57+
title: title
58+
};
59+
},
60+
methods: {
61+
onNavigationButtonTap() {
62+
frameModule.Frame.topmost().goBack();
63+
},
64+
onLoaded(name) {
65+
console.log('onTabLoaded', name)
66+
}
67+
}
68+
});
69+
</script>
70+
71+
<style>
72+
73+
MDTabs {
74+
/* color: gold; */
75+
}
76+
77+
MDTabContentItem.special {
78+
color: green;
79+
}
80+
81+
MDTabStrip {
82+
color: skyblue;
83+
}
84+
85+
MDTabStripItem.special {
86+
color: teal;
87+
}
88+
89+
MDTabStripItem.special:active {
90+
color: yellowgreen;
91+
}
92+
93+
MDTabStripItem.nested Label {
94+
color: teal;
95+
}
96+
97+
MDTabStripItem.nested:active Label {
98+
color: yellowgreen;
99+
}
100+
101+
</style>

‎demo-vue/app/examples/Tabs.vue

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,38 +5,38 @@
55
</ActionBar>
66

77
<MDTabs selectedIndex="1">
8-
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
9-
<TabStrip>
10-
<TabStripItem>
8+
<!-- The bottom tab UI is created via MDTabStrip (the containier) and MDTabStripItem (for each tab)-->
9+
<MDTabStrip>
10+
<MDTabStripItem>
1111
<Label text="Home"/>
1212
<Image src="font://mdi-home" class="mdi"/>
13-
</TabStripItem>
14-
<TabStripItem class="special">
13+
</MDTabStripItem>
14+
<MDTabStripItem class="special">
1515
<Label text="Account"/>
1616
<Image src="font://mdi-account" class="mdi"/>
17-
</TabStripItem>
18-
<TabStripItem class="special">
17+
</MDTabStripItem>
18+
<MDTabStripItem class="special">
1919
<Label text="Search"/>
2020
<Image src="font://mdi-magnify" class="mdi"/>
21-
</TabStripItem>
22-
</TabStrip>
21+
</MDTabStripItem>
22+
</MDTabStrip>
2323

24-
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
25-
<TabContentItem>
26-
<GridLayout backgroundColor="red">
24+
<!-- The number of MDTabContentItem components should corespond to the number of MDTabStripItem components -->
25+
<MDTabContentItem>
26+
<GridLayout backgroundColor="red" @loaded="onLoaded('red')">
2727
<Label text="Home Page" class="h2 text-center"></Label>
2828
</GridLayout>
29-
</TabContentItem>
30-
<TabContentItem>
31-
<GridLayout backgroundColor="green">
29+
</MDTabContentItem>
30+
<MDTabContentItem>
31+
<GridLayout backgroundColor="green" @loaded="onLoaded('green')">
3232
<Label text="Account Page" class="h2 text-center"></Label>
3333
</GridLayout>
34-
</TabContentItem>
35-
<TabContentItem>
36-
<GridLayout backgroundColor="yellow">
34+
</MDTabContentItem>
35+
<MDTabContentItem>
36+
<GridLayout backgroundColor="yellow" @loaded="onLoaded('yellow')">
3737
<Label text="Search Page" class="h2 text-center"></Label>
3838
</GridLayout>
39-
</TabContentItem>
39+
</MDTabContentItem>
4040
</MDTabs>
4141
</Page>
4242
</template>
@@ -60,6 +60,9 @@ export default Vue.extend({
6060
methods: {
6161
onNavigationButtonTap() {
6262
frameModule.Frame.topmost().goBack();
63+
},
64+
onLoaded(name) {
65+
console.log('onTabLoaded', name)
6366
}
6467
}
6568
});
@@ -71,27 +74,27 @@ MDTabs {
7174
/* color: gold; */
7275
}
7376
74-
TabContentItem.special {
77+
MDTabContentItem.special {
7578
color: green;
7679
}
7780
78-
TabStrip {
81+
MDTabStrip {
7982
color: skyblue;
8083
}
8184
82-
TabStripItem.special {
85+
MDTabStripItem.special {
8386
color: teal;
8487
}
8588
86-
TabStripItem.special:active {
89+
MDTabStripItem.special:active {
8790
color: yellowgreen;
8891
}
8992
90-
TabStripItem.nested Label {
93+
MDTabStripItem.nested Label {
9194
color: teal;
9295
}
9396
94-
TabStripItem.nested:active Label {
97+
MDTabStripItem.nested:active Label {
9598
color: yellowgreen;
9699
}
97100

‎demo-vue/app/examples/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import ActivityIndicators, { title as activityIndicatorsTitle } from './ActivityIndicators.vue';
22
import BottomNavigationBar, { title as bottomNavigationBarTitle } from './BottomNavigationBar.vue';
3+
import BottomNavigation, { title as bottomNavigationTitle } from './BottomNavigation.vue';
34
import Buttons, { title as buttonsTitle } from './Buttons.vue';
45
import CardViews, { title as cardViewsTitle } from './CardViews.vue';
56
import Dialogs, { title as dialogsTitle } from './Dialogs.vue';
@@ -28,6 +29,10 @@ export const getExamples = () => [
2829
title: bottomNavigationBarTitle,
2930
component: BottomNavigationBar
3031
},
32+
{
33+
title: bottomNavigationTitle,
34+
component: BottomNavigation
35+
},
3136
{
3237
title: tabsTitle,
3338
component: Tabs

‎demo-vue/app/main.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { install as installBottomSheet } from '@nativescript-community/ui-materi
1717
import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
1818
import BottomNavigationBarPlugin from '@nativescript-community/ui-material-bottomnavigationbar/vue';
1919
import TabsPlugin from '@nativescript-community/ui-material-tabs/vue';
20+
import BottomNavigationPlugin from '@nativescript-community/ui-material-bottomnavigation/vue';
2021
import SpeedDialPlugin from '@nativescript-community/ui-material-speeddial/vue';
2122

2223
installBottomSheet();
@@ -33,6 +34,7 @@ Vue.use(TextFieldPlugin);
3334
Vue.use(BottomSheetPlugin);
3435
Vue.use(BottomNavigationBarPlugin);
3536
Vue.use(TabsPlugin);
37+
Vue.use(BottomNavigationPlugin);
3638
Vue.use(SpeedDialPlugin);
3739

3840
// Vue.registerElement('Label', () => require('@nativescript-community/ui-label').Label);

‎demo-vue/app/views/Home.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,15 @@ export default {
66
<Page>
77
<ActionBar title="Material Vue">
88
</ActionBar>
9-
<StackLayout>
10-
<Label paddingLeft="10" heigth="100" text="This is a text" verticalAlignment="center"/>
9+
<GridLayout>
1110
<ListView ref="listView" rowHeight="60" for="example in examples">
1211
<v-template>
13-
<GridLayout rippleColor="red" @tap="{goToExample(example)}" @longPress="{goToModalExample(example)}" >
12+
<GridLayout rippleColor="red" @tap="{goToExample(example)}" >
1413
<Label paddingLeft="10" :text="example.title" verticalAlignment="center" isUserInteractionEnabled="false"/>
1514
</GridLayout>
1615
</v-template>
1716
</ListView>
18-
</StackLayout>
17+
</GridLayout>
1918
2019
</Page>
2120
`,

‎demo-vue/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@nativescript/core": "7.0.13",
99
"@nativescript-community/text": "1.3.6",
1010
"@nativescript-community/ui-material-activityindicator": "file:../packages/activityindicator",
11+
"@nativescript-community/ui-material-bottomnavigation": "file:../packages/bottomnavigation",
1112
"@nativescript-community/ui-material-bottomnavigationbar": "file:../packages/bottomnavigationbar",
1213
"@nativescript-community/ui-material-bottomsheet": "file:../packages/bottomsheet",
1314
"@nativescript-community/ui-material-button": "file:../packages/button",

0 commit comments

Comments
 (0)