如何在本地腳本中更改側面抽屜的位置

Question

我正在學習nativescript.I想要改變從右側打開的我的應用程序（現在從左側打開）中的sidedrawer的方向。我該怎麼做它？

這裏是我的代碼：

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英寸