Женис

<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>

import Vue from 'nativescript-vue'
import Main from './components/Main'

new Vue({
  render: h => h('frame', [h(Main)])
}).$start()