RadSideDrawer: Callbacks

This article explains how to use the events provided by the RadSideDrawer with Vue in order to receive information of the drawer's state.

Subscribing to events with vue

The RadSideDrawer allows you to receive events and execute code when sideDrawer's state is changed. There are four events that the drawer fires:

• drawerOpening
• drawerClosed
• drawerClosing
• drawerClosed

In order to receive these events you need to subscribe for them in the XML where you define the RadSideDrawer and provide the actual methods that will be executed when the events are fired:

import { PushTransition } from 'nativescript-ui-sidedrawer';

const description = 'Events';

export default {
  name: 'Events',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <RadSideDrawer ref="drawer"
                   @drawerOpening="onDrawerOpening()"
                   @drawerOpened="onDrawerOpened()"
                   @drawerClosing="onDrawerClosing()"
                   @drawerClosed="onDrawerClosed()"
                   @drawerPan="onDrawerPan()"
                   :drawerTransition="transition">
      <StackLayout ~drawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
          <Label text="Navigation Menu"></Label>
        </StackLayout>
        <StackLayout class="sideStackLayout">
          <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
          <Label text="Social" class="sideLabel"></Label>
          <Label text="Promotions" class="sideLabel"></Label>
          <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
          <Label text="Important" class="sideLabel"></Label>
          <Label text="Starred" class="sideLabel"></Label>
          <Label text="Sent Mail" class="sideLabel"></Label>
          <Label text="Drafts" class="sideLabel"></Label>
        </StackLayout>
        <Button text="Close Drawer" @tap="onCloseDrawerTap()"></Button>
      </StackLayout>
      <StackLayout ~mainContent>
        <Button text="OPEN DRAWER" @tap="openDrawer()" class="drawerContentButton"></Button>
        <Label text="Drawer notification: " class="drawerContentText"></Label>
        <Label class="drawerContentText"></Label>
      </StackLayout>
    </RadSideDrawer>
  </Page>
  `,
  data () {
    return {
      title: description,
      currentNotification: '',
      transition: new PushTransition(),
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
    openDrawer() {
      this.$refs.drawer.showDrawer();
    },
    onCloseDrawerTap() {
      this.$refs.drawer.closeDrawer();
    },
    onDrawerOpening(args) {
      this.currentNotification = "Drawer opening";
    },
    onDrawerOpened(args) {
      this.currentNotification = "Drawer opened";
    },
    onDrawerClosing(args) {
      this.currentNotification = "Drawer closing";
    },
    onDrawerClosed(args) {
      this.currentNotification = "Drawer closed";
    },
    onDrawerPan(args) {
      this.currentNotification = "Drawer pan";
    },
  },
};