components/Main.vue<template>
<Page class="page">
<GridLayout rows="*" height="700" >
<RadSideDrawer ref="drawer">
<StackLayout ~drawerContent backgroundColor="gray">
<StackLayout height="56" style="text-align: center; vertical-align: center;">
<Label text="Navigation Menu" />
</StackLayout>
<StackLayout>
<Label text="Primary" padding="10" backgroundColor="lightgray" />
<Label text="Social" padding="10" />
<Label text="Promotions" padding="10" />
<Label text="Labels" padding="10" backgroundColor="lightgray" />
<Label text="Important" padding="10" />
<Label text="Starred" padding="10" />
<Label text="Sent Mail" padding="10" />
<Label text="Drafts" padding="10" />
</StackLayout>
<Label text="Close" color="lightgray" padding="10" style="horizontal-align: center"
@tap="onCloseDrawerTap" />
</StackLayout>
<StackLayout ~mainContent @swipe="onOpenDrawerTap">
<Label :text="mainContentText" textWrap="true" fontSize="13"
padding="10" />
<Button text="Open Drawer" @tap="onOpenDrawerTap" margin="10"
style="horizontal-align: left" />
</StackLayout>
</RadSideDrawer>
</GridLayout>
</Page>
</template>
<script>
import Vue from "nativescript-vue";
import RadSideDrawer from "nativescript-ui-sidedrawer/vue";
Vue.use(RadSideDrawer);
export default {
methods: {
onOpenDrawerTap() {
this.$refs.drawer.nativeView.showDrawer();
},
onCloseDrawerTap() {
this.$refs.drawer.nativeView.closeDrawer();
}
},
data() {
return {
mainContentText: "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component" +
" has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer."
};
}
};
</script>
main.jsimport Vue from 'nativescript-vue'
import Main from './components/Main'
new Vue({
render: h => h('frame', [h(Main)])
}).$start()