ナンバースクリプトでサイドドロワーの位置/位置を変更するには

Question

私はnativescriptを学んでいます。私のアプリではサイドバーの方向を変更したいと思います（今は左から開いています）。それ？ここで

は私のコードです：

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 {} 

Answer 1

nativescript-telerikのRadSideDrawer 0uiプラグインは、drawerLocationプロパティを使用してその位置/位置の変更をサポートしています。

• トップ
• ボトム
• 左
• 右

あなたはドキュメントhereまたはSDK角度の例hereでより多くの情報のために参照することができます。そのプロパティをに設定することができます。