如何在 nativescript 中更改侧边抽屉的位置/位置

Posted 2023-04-13

【中文标题】如何在 nativescript 中更改侧边抽屉的位置/位置

【英文标题】：How to change the location/position of the Side drawer in nativescript

【发布时间】：2017-10-20 06:13:37

【问题描述】：

我正在学习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 

【参考方案1】：

nativescript-telerik0ui 插件中的 RadSideDrawer 支持通过其 drawerLocation 属性更改其位置/位置。该属性可以设置为：

顶部 底部 左 对

您可以参考文档here 或sdk Angular 示例here 中的更多信息。

【讨论】：

非常感谢。它对我有用。我更改了 openDrawer 功能。公共 openDrawer() this.drawer.drawerLocation=SideDrawerLocation.Right; this.drawer.showDrawer();

你会如何改变显示的内容，不仅仅是显示的位置，所以左边是菜单，右边是设置，

为此，您需要更改 RadSideDrawer 实例的抽屉内容属性，更多详细信息请参见：docs.telerik.com/devtools/nativescript-ui/api/classes/…

【参考方案2】：

import  RadSideDrawerComponent, SideDrawerType  from "nativescript-ui-sidedrawer/angular";
import  SideDrawerLocation  from 'nativescript-ui-sidedrawer';

private currentLocation: SideDrawerLocation;
      onOpenDrawerTap() 
            this.drawerComponent.sideDrawer.drawerLocation = SideDrawerLocation.Top; //change location here Top, Right, Left, Bottom
            this.drawerComponent.sideDrawer.showDrawer();
        

在 nativescript 操场上参考此链接sidedrawer from top