RadSideDrawer: Getting Started
This article explains how to create a simple RadSideDrawer with Angular.
By design the
RadSideDrawer
is designed to be placed as a single child in your component's HTML, this excludes the use of a<ActionBar><<ActionBar>
which is not treated as a simple element by NativeScript and can be used withRadSideDrawer
by placing it in the beginning of the HTML.
Installation
Run the following command to add the plugin to your application:
tns plugin add nativescript-ui-sidedrawer
Initialization
Before proceeding, make sure that the NativeScriptUISideDrawerModule
from the nativescript-ui-sidedrawer plugin has been imported in an ngModule
in your app as explained here.
The RadSideDrawer consists of two visual parts:
-
mainContent
- the visual elements displayed in the host view where the drawer is shown. -
drawerContent
- the visual elements displayed in the side drawer.
Defining mainContent
and drawerContent
with Angular is done with the corresponding directives:
-
TKMainContent
- used with thetkMainContent
selector -
TKDrawerContent
- used with thetkDrawerContent
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>
<Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" (tap)="onCloseDrawerTap()"></Label>
</StackLayout>
<StackLayout tkMainContent>
<Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
<Button text="OPEN DRAWER" (tap)="openDrawer()" class="drawerContentButton"></Button>
</StackLayout>
</RadSideDrawer>
import { Component, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef } from "@angular/core";
import { Page } from "ui/page";
import { ActionItem } from "ui/action-bar";
import { Observable } from "data/observable";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-ui-sidedrawer/angular";
import { RadSideDrawer } from 'nativescript-ui-sidedrawer';
@Component({
moduleId: module.id,
selector: "tk-sidedrawer-getting-started",
templateUrl: 'getting-started.component.html',
styleUrls: ['getting-started.component.css']
})
export class SideDrawerGettingStartedComponent implements AfterViewInit, OnInit {
private _mainContentText: string;
constructor(private _changeDetectionRef: ChangeDetectorRef) {
}
@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: RadSideDrawer;
ngAfterViewInit() {
this.drawer = this.drawerComponent.sideDrawer;
this._changeDetectionRef.detectChanges();
}
ngOnInit() {
this.mainContentText = "SideDrawer for NativeScript can be easily setup in the HTML definition of your page by defining tkDrawerContent and tkMainContent. 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.";
}
get mainContentText() {
return this._mainContentText;
}
set mainContentText(value: string) {
this._mainContentText = value;
}
public openDrawer() {
this.drawer.showDrawer();
}
public onCloseDrawerTap() {
this.drawer.closeDrawer();
}
}
button {
font-size: 15;
horizontal-align: center;
}
.drawerContentText {
font-size: 13;
padding: 10;
}
.drawerContentButton {
margin: 10;
horizontal-align: left;
}
.sideStackLayout {
background-color: gray;
}
.sideTitleStackLayout {
height: 56;
text-align: center;
vertical-align: center;
}
.sideLabel {
padding: 10;
}
.sideLightGrayLabel {
background-color: lightgray;
}
Figure 1. RadSideDrawer's 'tkMainContent'
Figure 2. RadSideDrawer's 'tkDrawerContent'
References
Want to see this scenario in action?
Check our SDK examples repository on GitHub. You will find this and a lot more practical examples with NativeScript UI.
Related articles you might find useful: