8000 Sample app for testing routing with vue-router, tabs and RadSideDrawe… · jprando/nativescript-vue@df2c87b · GitHub
[go: up one dir, main page]
Skip to content {"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}

Commit df2c87b

Browse files
msaelicesmsaelices
committed
Sample app for testing routing with vue-router, tabs and RadSideDrawer. See nativescript-vue#292 
1 parent bce0623 commit df2c87b

File tree

1 file changed

+113
-0
lines changed

1 file changed

+113
-0
lines changed

‎samples/app/app-with-radsidedrawer-tabs-and-router.js

Lines changed: 113 additions & 0 deletions
< 8249 td data-grid-cell-id="diff-c8c930d15267d33c565e175f1c005ecc39dde691012bef5127e1a22460b3fdb9-empty-100-0" data-selected="false" role="gridcell" style="background-color:var(--diffBlob-additionNum-bgColor, var(--diffBlob-addition-bgColor-num));text-align:center" tabindex="-1" valign="top" class="focusable-grid-cell diff-line-number position-relative left-side">
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
const Vue = require('./nativescript-vue')
2+
const VueRouter = require('vue-router')
3+
const application = require('tns-core-modules/application')
4+
5+
Vue.registerElement(
6+
'RadSideDrawer',
7+
() => require('nativescript-ui-sidedrawer').RadSideDrawer
8+
)
9+
10+
Vue.config.silent = false
11+
Vue.config.debug = true
12+
Vue.use(VueRouter)
13+
14+
const Home = {
15+
template: `
16+
<StackLayout>
17+
<Label text="home" />
18+
</StackLayout>
19+
`
20+
}
21+
22+
const Tabs = {
23+
template: `
24+
<TabView
25+
androidTabsPosition="bottom"
26+
:selectedIndex="selectedTabIndex" >
27+
<TabViewItem title="Tab 1">
28+
<StackLayout>
29+
<Label text="You are on Tab 1" />
30+
</StackLayout>
31+
</TabViewItem>
32+
<TabViewItem title="Tab 2">
33+
<StackLayout>
34+
<Label text="You are on Tab 2" />
35+
</StackLayout>
36+
</TabViewItem>
37+
</TabView>`,
38+
data() {
39+
return {
40+
selectedTabIndex: 0,
41+
gaugeValue: 0.2
42+
}
43+
}
44+
}
45+
46+
const HelloWorld1 = {
47+
template: `
48+
<StackLayout>
49+
<Label text="Hello world"></Label>
50+
</StackLayout>
51+
`
52+
}
53+
54+
const HelloWorld2 = {
55+
template: `
56+
<StackLayout>
57+
<Label text="Hello world again!"></Label>
58+
</StackLayout>
59+
`
60+
}
61+
62+
const router = new VueRouter({
63+
routes: [
64+
{
65+
path: '/home',
66+
component: Home
67+
},
68+
{
69+
path: '/hello1',
70+
component: HelloWorld1
71+
},
72+
{
73+
path: '/hello2',
74+
component: HelloWorld2
75+
},
76+
{
77+
path: '/tabs',
78+
component: Tabs
79+
},
80+
{ path: '*', redirect: '/home' }
81+
]
82+
})
83+
84+
new Vue({
85+
router,
86+
template: `
87+
<Frame transition="fade">
88+
<Page>
89+
<ActionBar class="action-bar" title="Home" >
90+
<ActionItem text="Menu" @tap="$refs.drawer.nativeView.showDrawer()"/>
91+
</ActionBar>
92+
93+
<RadSideDrawer ref="drawer" showOverNavigation="true" style="height:100%">
94+
<StackLayout ~drawerContent>
95+
<Button text="Home" @tap="$router.push('/home'); $refs.drawer.nativeView.closeDrawer() "/>
96+
<Button text="Hello1" @tap="$router.push('/hello1'); $refs.drawer.nativeView.closeDrawer() "/>
97+
<Button text="Hello2" @tap="$router.push('/hello2'); $refs.drawer.nativeView.closeDrawer() "/>
98+
<Button text="Tabs" @tap="$router.push('/tabs'); $refs.drawer.nativeView.closeDrawer()"/>
99+
</StackLayout>
100+
<StackLayout ~mainContent>
101+
<router-view></router-view>
102+
</StackLayout>
103+
</RadSideDrawer>
104+
</Page>
105+
</Frame>
106+
`,
107+
data() {
108+
return {}
109+
},
110+
created() {
111+
this.$router.push('/home')
112+
}
113+
}).$start()

0 commit comments

Comments
 (0)
0