RadSideDrawer : Getting Started

This article will guide you through the process of adding a RadSideDrawer instance to a page in your NativeScript application and initializing its content.

By design the RadSideDrawer is designed to be placed as a single child to your Page.

Installation

Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-sidedrawer

Adding RadSideDrawer to your page

Then, in order to add a RadCalendar instance in a page of your application, you need to define the following XML namespace:

  • xmlns:nsDrawer="nativescript-ui-sidedrawer".

The namespace here is called nsDrawer. Now you can access RadSideDrawer's APIs in your XML page. Adding an instance of RadSideDrawer is done the following way:

<nsDrawer:RadSideDrawer id="sideDrawer">
  <nsDrawer:RadSideDrawer.drawerContent>
    <StackLayout 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 Drawer" color="lightgray" padding="10" style="horizontal-align: center" tap="{{ onCloseDrawerTap }}"/>

    </StackLayout>
  </nsDrawer:RadSideDrawer.drawerContent>

  <nsDrawer:RadSideDrawer.mainContent>
    <StackLayout >
      <Label text="{{ mainContentText }}" textWrap="true" fontSize="13" padding="10" />

      <Button text="Open drawer" tap="{{ onOpenDrawerTap }}" margin="10" style="horizontal-align: left" />

    </StackLayout>
  </nsDrawer:RadSideDrawer.mainContent>
</nsDrawer:RadSideDrawer>
import { GettingStartedViewModel } from "./getting-started-model";
import { Page } from "tns-core-modules/ui/page";

export function pageLoaded(args) {
    var page = args.object as Page;
    page.bindingContext = new GettingStartedViewModel();
}

As you can see, the mainContent and drawerContent properties have also been initialized with a set of UI elements to demonstrate how content is set to the RadSideDrawer. The bindings and event handlers in the code snippets can be found in the next section.

Binding properties on elements in the drawerContent and mainContent

Content defined in the drawer and main sections has access to the same bindingContext the drawer instance has. You can therefore bind properties on the View elements inside to properties exposed by the object behind the bindingContext. Considering the XML code above, here's a sample view-model code that is used as a binding context:

import { Observable } from "tns-core-modules/data/observable";
import frame = require("tns-core-modules/ui/frame");
import { RadSideDrawer } from "nativescript-ui-sidedrawer";

export class GettingStartedViewModel extends Observable {
    constructor() {
        super();
        this.set("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.");
    }

    public onOpenDrawerTap() {
        let sideDrawer: RadSideDrawer = <RadSideDrawer>( frame.topmost().getViewById("sideDrawer"));
        sideDrawer.showDrawer();
    }

    public onCloseDrawerTap() {
        let sideDrawer: RadSideDrawer = <RadSideDrawer>( frame.topmost().getViewById("sideDrawer"));
        sideDrawer.closeDrawer();
    }
}

The following screenshots demonstrate how the drawer looks like in that case:

Figure 1. RadSideDrawer's 'tkMainContent'

TelerikUI-SideDrawer-Getting-Started TelerikUI-SideDrawer-Getting-Started

Figure 2. RadSideDrawer's 'tkDrawerContent'

TelerikUI-SideDrawer-Getting-Started TelerikUI-SideDrawer-Getting-Started

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.

Related articles you might find useful: