Overview

This article explains how to create a simple RadSideDrawer with Angular 2.0

RadSideDrawer: Getting Started

The RadSideDrawer consists of two visual parts:

  • drawerContent - the visual elements displayed in the side drawer.
  • mainContent - the visual elements displayed in the host view where the drawer is shown.

Defining drawerContent and mainContent with Angular 2 is done with the corresponding directives:

  • TKDrawerContent - used with the tkDrawerContent selector
  • TKMainContent - used with the tkMainContent selector

The following code snippet is a simple template with a basic setup for RadSideDrawer.

<RadSideDrawer tkExampleTitle tkToggleNavButton>
    <StackLayout tkDrawerContent 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>
    </StackLayout>
    <StackLayout tkMainContent>
        <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
        <Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
    </StackLayout>
</RadSideDrawer>