🤖 Create a chatbot for your NativeScript app! Learn more at our upcoming webinar.

NativeScript Core

RadSideDrawer Events

RadSideDrawer fires several events informing about changes in the component's state. The following events are exposed by RadSideDrawer:

Handling RadSideDrawer's events

You can subscribe for RadSideDrawer's events in the classical {N} way - either in your XML file or programmatically. The following snippets demonstrates a scenario in which all four events are handled by assigning handlers in the XML definition. The source of the handlers is also demonstrated:

<nsDrawer:RadSideDrawer id="sideDrawer"
                      drawerPan="onDrawerPan"
                      drawerClosed="onDrawerClosed"
                      drawerClosing="onDrawerClosing"
                      drawerOpened="onDrawerOpened"
                      drawerOpening="onDrawerOpening">
  <nsDrawer:RadSideDrawer.drawerTransition>
    <nsDrawer:RevealTransition/>
  </nsDrawer:RadSideDrawer.drawerTransition>
  <nsDrawer:RadSideDrawer.mainContent>
  </nsDrawer:RadSideDrawer.mainContent>
  <nsDrawer:RadSideDrawer.drawerContent>
  </nsDrawer:RadSideDrawer.drawerContent>
</nsDrawer:RadSideDrawer>
export function onDrawerClosed(args: DrawerStateChangedEventArgs) {
    drawerCallbacksModel.onDrawerClosed(args);
}

export function onDrawerClosing(args: DrawerStateChangingEventArgs) {
    drawerCallbacksModel.onDrawerClosing(args);
}

export function onDrawerOpened(args: DrawerStateChangedEventArgs) {
    drawerCallbacksModel.onDrawerOpened(args);
}

export function onDrawerOpening(args: DrawerStateChangingEventArgs) {
    drawerCallbacksModel.onDrawerOpening(args);
}

export function onDrawerPan(args: DrawerStateChangedEventArgs) {
    drawerCallbacksModel.onDrawerPan(args);
}

References

Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.