Skip to content

Commit 396bdca

Browse files
farfromrefugfarfromrefug
committed
Merge remote-tracking branch 'origin/master'
2 parents 8815f42 + 036ab4a commit 396bdca

27 files changed

+1606
-28
lines changed

‎.gitmodules‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,6 @@
1313
[submodule "tools"]
1414
path = tools
1515
url = https://github.com/nativescript-community/plugin-seed-tools.git
16+
[submodule "demo-vue3"]
17+
path = demo-vue3
18+
url = https://github.com/nativescript-community/plugin-seed-demo-vue3.git

‎demo-snippets/vue3/ActivityIndicators.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<Page>
3+
<ActionBar :title="title">
4+
<NavigationButton text="Back"
5+
android.systemIcon="ic_menu_back"
6+
@tap="onNavigationButtonTap"></NavigationButton>
7+
</ActionBar>
8+
<StackLayout>
9+
<MDActivityIndicator busy class="loading"/>
10+
<MDActivityIndicator color="red" :busy="isBusy" class="loading"/>
11+
<MDActivityIndicator color="green" busy class="loading"/>
12+
<MDActivityIndicator color="orange" busy class="loading" width="100" height="100"/>
13+
<MDActivityIndicator class="loading" backgroundColor="yellow" busy/>
14+
<MDActivityIndicator color="brown" :indeterminate="false" value="50" maxValue="100" class="loading" busy
15+
horizontalAlignment="center"/>
16+
</StackLayout>
17+
</Page>
18+
</template>
19+
20+
<script lang="ts" setup>
21+
import {Frame} from '@nativescript/core/ui/frame';
22+
import {ref, onMounted, onUnmounted} from "nativescript-vue";
23+
24+
const title = 'Activity indicators sample';
25+
let interval = null;
26+
const isBusy = ref(false);
27+
28+
onMounted(() => {
29+
interval = setInterval(() => {
30+
isBusy.value = isBusy.value;
31+
}, 2000);
32+
})
33+
34+
onUnmounted(() => {
35+
clearInterval(interval);
36+
})
37+
const onNavigationButtonTap = () => {
38+
Frame.topmost().goBack();
39+
}
40+
41+
42+
43+
</script>
44+
<style lang="css">
45+
</style>

‎demo-snippets/vue3/BottomNavigation.vue‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<Page>
3+
<ActionBar :title="title">
4+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap" />
5+
</ActionBar>
6+
7+
<GridLayout rows="*, 0" backgroundColor="red">
8+
<MDBottomNavigation selectedIndex="1" :iosCustomPositioning="false" backgroundColor="blue">
9+
<!-- The bottom tab UI is created via MDTabStrip (the containier) and MDTabStripItem (for each tab)-->
10+
<MDTabStrip>
11+
<MDTabStripItem>
12+
<Label text="First" />
13+
<Image src="font://mdi-home" class="mdi" />
14+
</MDTabStripItem>
15+
<MDTabStripItem class="special">
16+
<Label text="Second" />
17+
<Image src="font://mdi-account" class="mdi" />
18+
</MDTabStripItem>
19+
<MDTabStripItem class="special">
20+
<Label text="Third" />
21+
<Image src="font://mdi-magnify" class="mdi" />
22+
</MDTabStripItem>
23+
<MDTabStripItem class="special">
24+
<Label text="Fourth" />
25+
<Image src="font://mdi-magnify" class="mdi" />
26+
</MDTabStripItem>
27+
</MDTabStrip>
28+
29+
<!-- The number of MDTabContentItem components should corespond to the number of MDTabStripItem components -->
30+
<MDTabContentItem>
31+
<Frame id="test" backgroundColor="transparent" @loaded="onLoaded('first')" @unloaded="onUnloaded('first')" @selected="onSelected('first')" @unselected="onUnselected('first')">
32+
<Page backgroundColor="transparent">
33+
<GridLayout backgroundColor="transparent">
34+
<Label text="First Page" class="h2 text-center" @tap="navigateToTabsSample"></Label>
35+
<Button text="show alert" @tap="showTestAlert" verticalAlignment="center"></Button>
36+
</GridLayout>
37+
</Page>
38+
</Frame>
39+
</MDTabContentItem>
40+
<MDTabContentItem>
41+
<GridLayout backgroundColor="transparent" @loaded="onLoaded('second')" @unloaded="onUnloaded('second')" @selected="onSelected('second')" @unselected="onUnselected('second')">
42+
<Label text="Second Page" class="h2 text-center"></Label>
43+
</GridLayout>
44+
</MDTabContentItem>
45+
<MDTabContentItem>
46+
<GridLayout backgroundColor="yellow" @loaded="onLoaded('third')" @unloaded="onUnloaded('third')" @selected="onSelected('third')" @unselected="onUnselected('third')">
47+
<Label text="Third Page" class="h2 text-center"></Label>
48+
</GridLayout>
49+
</MDTabContentItem>
50+
<MDTabContentItem>
51+
<Frame id="test2" @loaded="onLoaded('fourth')" @unloaded="onUnloaded('fourth')" @selected="onSelected('fourth')" @unselected="onUnselected('fourth')">
52+
<Page>
53+
<GridLayout backgroundColor="transparent">
54+
<Label text="Fourth Page" class="h2 text-center" @tap="navigateToTabsSample"></Label>
55+
<Button text="show alert" @tap="showTestAlert" verticalAlignment="center"></Button>
56+
</GridLayout>
57+
</Page>
58+
</Frame>
59+
</MDTabContentItem>
60+
</MDBottomNavigation>
61+
</GridLayout>
62+
</Page>
63+
</template>
64+
65+
<script lang="ts">
66+
import * as frameModule from '@nativescript/core/ui/frame';
67+
import { EventData } from '@nativescript/core';
68+
import Tabs from './Tabs.vue';
69+
70+
import Vue from 'vue';
71+
72+
export const title = 'BottomNavigation sample';
73+
74+
export default Vue.extend({
75+
name: 'BottomNavigation',
76+
data() {
77+
return {
78+
title
79+
};
80+
},
81+
methods: {
82+
onNavigationButtonTap() {
83+
this.$navigateBack();
84+
},
85+
onLoaded(name) {
86+
console.log('BN onTabLoaded', name);
87+
},
88+
onUnloaded(name) {
89+
console.log('BN onTabUnloaded', name);
90+
},
91+
onSelected(name) {
92+
console.log('BN onSelected', name);
93+
},
94+
onUnselected(name) {
95+
console.log('BN onUnselected', name);
96+
},
97+
navigateToTabsSample() {
98+
this.$navigateTo(Tabs);
99+
},
100+
showTestAlert() {
101+
alert('test');
102+
}
103+
}
104+
});
105+
</script>

‎demo-snippets/vue3/BottomNavigationBar.vue‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<template>
2+
<Page>
3+
<ActionBar :title="title">
4+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap" />
5+
</ActionBar>
6+
<GridLayout class="page" backgroundColor="white" rows="*, auto">
7+
<MDTabs row="0" :selectedIndex="currentTab" swipeEnabled="false">
8+
<MDTabContentItem>
9+
<GridLayout class="p-20">
10+
<Label class="h1 text-center" text="First tab" textWrap="true"></Label>
11+
<Button text="select sthird" @tap="selectThird" horizontalAlignment="center" verticalAlignment="bottom" />
12+
</GridLayout>
13+
</MDTabContentItem>
14+
<MDTabContentItem>
15+
<GridLayout class="p-20">
16+
<Label class="h1 text-center" text="Third tab" textWrap="true"></Label>
17+
</GridLayout>
18+
</MDTabContentItem>
19+
</MDTabs>
20+
<MDBottomNavigationBar
21+
ref="bottomBar"
22+
row="1"
23+
activeColor="blue"
24+
inactiveColor="green"
25+
selectedTabIndex="2"
26+
class="mdi"
27+
@loaded="onbottomNavigationBarLoaded"
28+
@tabPressed="onBottomNavigationTabPressed"
29+
@tabSelected="onBottomNavigationTabSelected"
30+
@tabReselected="onBottomNavigationTabReselected"
31+
>
32+
<MDBottomNavigationTab title="First" activeColor="green" class="mdi" />
33+
<MDBottomNavigationTab title="Second" icon="font://mdi-account" class="mdi" />
34+
<MDBottomNavigationTab title="Third" icon="res://ic_menu" inactiveColor="brown" isSelectable="false" />
35+
</MDBottomNavigationBar>
36+
</GridLayout>
37+
</Page>
38+
</template>
39+
40+
<script lang="ts">
41+
import * as frameModule from '@nativescript/core/ui/frame';
42+
import { BottomNavigationBar, TabPressedEventData, TabReselectedEventData, TabSelectedEventData } from '@nativescript-community/ui-material-bottomnavigationbar';
43+
import { EventData } from '@nativescript/core';
44+
45+
import Vue from 'vue';
46+
47+
export const title = 'BottomNavigationBar sample';
48+
49+
export default Vue.extend({
50+
name: 'BottomNavigationBar',
51+
data() {
52+
return {
53+
title,
54+
currentTab: 0
55+
};
56+
},
57+
methods: {
58+
selectThird() {
59+
this.$refs.bottomBar.nativeView.selectTab(2);
60+
},
61+
onNavigationButtonTap() {
62+
frameModule.Frame.topmost().goBack();
63+
},
64+
onbottomNavigationBarLoaded(args: EventData): void {
65+
const bottomNavigationBar = args.object as BottomNavigationBar;
66+
bottomNavigationBar.showBadge(1);
67+
bottomNavigationBar.showBadge(2, 4);
68+
},
69+
70+
onBottomNavigationTabPressed(args: TabPressedEventData): void {
71+
alert('This tab has isSelectable: false, and should be used to perform actions');
72+
console.log(`pressed tab index: ${args.index}`);
73+
},
74+
75+
onBottomNavigationTabSelected(args: TabSelectedEventData): void {
76+
console.log(`old tab index: ${args.oldIndex}`);
77+
console.log(`selected tab index: ${args.newIndex}`);
78+
this.currentTab = args.newIndex;
79+
},
80+
81+
onBottomNavigationTabReselected(args: TabReselectedEventData): void {
82+
alert('Tab Reselected');
83+
console.log(`reselected tab index: ${args.index}`);
84+
}
85+
}
86+
});
87+
</script>

‎demo-snippets/vue3/BottomSheet.vue‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<template>
2+
<Page>
3+
<ActionBar :title="title">
4+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
5+
</ActionBar>
6+
<StackLayout>
7+
<MDButton id="bottomsheet" text="bottomsheet" @tap="onTap" />
8+
<MDButton id="dont_ignore_top_safe_area" text="dont_ignore_top_safe_area" @tap="onTap" />
9+
<MDButton id="ignore_bottom_safe_area" text="ignore_bottom_safe_area" @tap="onTap" />
10+
<MDButton id="dont_ignore_top_ignore_bottom_safe_area" text="dont_ignore_top_ignore_bottom_safe_area" @tap="onTap" />
11+
<MDButton id="bottomsheet-keyboard" text="bottomsheet-keyboard" @tap="onTap" />
12+
<MDButton id="bottomsheet-peekheight" text="bottomsheet-peekheight" @tap="onTap" />
13+
</StackLayout>
14+
</Page>
15+
</template>
16+
17+
<script lang="ts">
18+
import { EventData, View } from '@nativescript/core';
19+
import * as frameModule from '@nativescript/core/ui/frame';
20+
import { NativeScriptVue } from 'nativescript-vue';
21+
import Vue from 'vue';
22+
import BottomSheetInner from './BottomSheetInner.vue';
23+
import BottomSheetInnerKeyboard from './BottomSheetInnerKeyboard.vue';
24+
25+
export const title = 'BottomSheet sample';
26+
27+
export default Vue.extend({
28+
data() {
29+
return {
30+
name: 'BottomSheet',
31+
title
32+
};
33+
},
34+
methods: {
35+
onNavigationButtonTap() {
36+
frameModule.Frame.topmost().goBack();
37+
},
38+
onTap(args: EventData) {
39+
const obj = args.object as View;
40+
const objId = obj.id;
41+
console.log('onTap', objId, obj);
42+
switch (objId) {
43+
case 'bottomsheet': {
44+
(this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
45+
// transparent: true,
46+
closeCallback: (...args) => {
47+
console.log('bottom sheet closed', args);
48+
}
49+
});
50+
break;
51+
}
52+
case 'dont_ignore_top_safe_area': {
53+
(this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
54+
ignoreTopSafeArea: false,
55+
// transparent:true,
56+
closeCallback: (...args) => {
57+
console.log('bottom sheet closed', args);
58+
}
59+
});
60+
break;
61+
}
62+
case 'ignore_bottom_safe_area': {
63+
(this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
64+
// transparent:true,
65+
ignoreBottomSafeArea: true,
66+
closeCallback: (...args) => {
67+
console.log('bottom sheet closed', args);
68+
}
69+
});
70+
break;
71+
}
72+
case 'dont_ignore_top_ignore_bottom_safe_area': {
73+
(this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
74+
// transparent:true,
75+
ignoreTopSafeArea: false,
76+
ignoreBottomSafeArea: true,
77+
closeCallback: (...args) => {
78+
console.log('bottom sheet closed', args);
79+
}
80+
});
81+
break;
82+
}
83+
case 'bottomsheet-keyboard': {
84+
(this as NativeScriptVue).$showBottomSheet(BottomSheetInnerKeyboard, {
85+
closeCallback: (...args) => {
86+
console.log('bottom sheet closed', args);
87+
}
88+
});
89+
break;
90+
}
91+
case 'bottomsheet-peekheight': {
92+
(this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
93+
peekHeight: 100,
94+
trackingScrollView: 'scrollView',
95+
// transparent: true,
96+
closeCallback: (...args) => {
97+
console.log('bottom sheet closed', args);
98+
}
99+
});
100+
break;
101+
}
102+
}
103+
}
104+
}
105+
});
106+
</script>

0 commit comments

Comments
 (0)