Sidedrawer in Vue


#1

Anyone know how to implement sidedrawer in NS Vue ?
i’m using nativescript-vue/vue-cli-template

I already install it using : npm install --save nativescript-ui-sidedrawer

Then register it in main.js :
Vue.registerElement(‘RadSideDrawer’, () => require(‘nativescript-ui-sidedrawer’).RadSideDrawer)

Then i try this Sidedrawer code from nativescript playground, with a litle bit changes, but it doesn’t work.

<template>
  <Page class="page">
       
<GridLayout rows="*" height="1500px">
 

  <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>
   
      <Button text="MENU" @tap="onOpenDrawerTap" margin="10" style="horizontal-align: right" />

     
        <TabView height="300px">
          <TabViewItem title="Tab 1">
            <Label text="Label in Tab 1" />
          </TabViewItem>
          <TabViewItem title="Tab 2">
            <Label text="Label in Tab 2" />
          </TabViewItem>
        </TabView>

    </StackLayout>
  </RadSideDrawer>
</GridLayout>

  </Page>
</template>

<script>
// require("nativescript-vue").registerElement("RadSideDrawer", () => require("nativescript-ui-sidedrawer").RadSideDrawer);

  export default {
    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.",
      segmentedBarItems: function () {
        var segmentedBarModule = require("ui/segmented-bar");
        let segmentedBarItem1 = new segmentedBarModule.SegmentedBarItem();
        segmentedBarItem1.title = "Item 1";
        let segmentedBarItem2 = new segmentedBarModule.SegmentedBarItem();
        segmentedBarItem2.title = "Item 2";
        return [segmentedBarItem1, segmentedBarItem2];
      }(),
      selectedBarIndex: 0,
    }
  },
   methods: {
    onOpenDrawerTap() {
      this.$refs.drawer.nativeView.showDrawer();
    },
    onCloseDrawerTap() {
      this.$refs.drawer.nativeView.closeDrawer();
    },
  },
  };
</script>