I'm currently learning how to use Nativescript and I am trying to customize the behavior of the sidedrawer in my app. Right now, it opens from the left side but I want it to open from the right side instead. Can anyone help me achieve this?
Below is the code snippet:
app.component.html:
<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>
<Button text="Close Drawer" (tap)="onCloseDrawerTap()"></Button>
</StackLayout>
<StackLayout tkMainContent>
<Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
<Button text="OPEN DRAWER" (tap)="openDrawer()" class="drawerContentButton"></Button>
</StackLayout>
</RadSideDrawer>
app.component.ts :
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-telerik-ui-pro/sidedrawer/angular";
import { RadSideDrawer } from 'nativescript-telerik-ui-pro/sidedrawer';
@Component({
moduleId: module.id,
selector: "tk-sidedrawer-getting-started",
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent 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();
}
}
app.module.ts:
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUISideDrawerModule } from 'nativescript-telerik-ui-pro/sidedrawer/angular'
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [NativeScriptModule, NativeScriptUISideDrawerModule ],
schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}