用NativeScript導航抽屜

Question

我想用NativeScript創建一種類型的sidemenu，但我不知道如何。 如何使用NativeScript創建導航抽屜？ 存在任何模塊什麼可以做到這一點？

Answer 1

沒有抽屜現在，但它是在工作AFAIK。

同時，您可以檢查NativeScript的官方回購。 https://github.com/NativeScript/NativeScript/tree/master/apps/TelerikNEXT

檢查TelerikNext應用程序。

Answer 2

我認爲它不可用我認爲你需要創建自己的模塊作爲一個視圖，並做自己的導航（打開，關閉）。

但是開箱即用，我還沒有在他們的文檔中找到任何其他東西。

我嘗試的另一件事是在標題中添加一個按鈕，但我仍然設法更改標題的顏色，所以我認爲您需要等待一些時間才能完成這些簡單的操作。

Ref：我正在開發一個基於Buxfer和NativeScript的演示應用程序。

源代碼：https://github.com/chehabz/Buxfer-NativeScript

Answer 3

Telerik今天宣佈Telerik UI for Nativescript作爲插件。 該插件現在包含側面抽屜和數據可視化工具。這是一個商業產品，但是（僅）側面抽屜功能是免費的。

有關詳細信息，請參閱this doc。

Answer 4

下面是如何創建NativeScript 1.3（其中添加了動畫框架）的動畫菜單抽屜一個例子：https://github.com/emiloberg/nativescript-animated-sidebar-menu-example

Answer 5

抽屜就在這裏。看看讓你開始TJ Vantoll的樣板工程...

https://github.com/tjvantoll/nativescript-template-drawer

或者從伊格納西奧·富恩特斯同一模板的打字稿版本...

https://github.com/ignaciofuentes/nativescript-template-drawer-ts

Answer 6

我上傳我的工作代碼。這是Nativescript +角2

drawer.html

<RadSideDrawer [drawerLocation]="currentLocation" [transition]="sideDrawerTransition"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> 
</StackLayout> 
<StackLayout tkMainContent> 
    <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label> 
    <Button text="OPEN DRAWER" (tap)=openDrawer()></Button> 
</StackLayout> 

drawer.component.ts

import {Component , OnInit, Input,ElementRef, ViewChild,ChangeDetectionStrategy,ChangeDetectorRef} from "@angular/core"; 
import { Router } from "@angular/router"; 
import { Page } from "ui/page"; 
import {View} from "ui/core/view"; 
import {Label} from "ui/label"; 
import {RadSideDrawerComponent, SideDrawerType} from 'nativescript-telerik-ui/sidedrawer/angular'; 
import {DrawerTransitionBase, SlideInOnTopTransition} from 'nativescript-telerik-ui/sidedrawer'; 
import * as sideDrawerModule from 'nativescript-telerik-ui/sidedrawer/'; 

@Component({ 
    selector: "hello", 
    templateUrl: "shared/hello/app.hello.html", 
    styleUrls: ["shared/hello/hello.css", "css/app-common.css"], 
}) 
export class HelloComponent implements OnInit{ 

private _currentNotification: string; 
private _sideDrawerTransition: sideDrawerModule.DrawerTransitionBase; 

constructor(private _page: Page, private _changeDetectionRef: ChangeDetectorRef) { 
    this._page.on("loaded", this.onLoaded, this); 
} 

@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent; 
private drawer: SideDrawerType; 

ngAfterViewInit() { 
    this.drawer = this.drawerComponent.sideDrawer; 
    this._changeDetectionRef.detectChanges(); 
} 

ngOnInit() { 

} 

public onLoaded(args) { 
    this._sideDrawerTransition = new sideDrawerModule.PushTransition(); 
} 

public get sideDrawerTransition(): sideDrawerModule.DrawerTransitionBase { 
    return this._sideDrawerTransition; 
} 

public get currentNotification(): string { 
    return this._currentNotification; 
} 

public openDrawer() { 
    console.log("openDrawer"); 
    this.drawer.showDrawer(); 
} 

public onDrawerOpening() { 
    console.log("Drawer opening"); 
    this._currentNotification = "Drawer opening"; 
} 

public onDrawerOpened() { 
    console.log("Drawer opened"); 
    this._currentNotification = "Drawer opened"; 
} 

public onDrawerClosing() { 
    console.log("Drawer closing"); 
    this._currentNotification = "Drawer closing"; 
} 

public onDrawerClosed() { 
    console.log("Drawer closed"); 
    this._currentNotification = "Drawer closed"; 
} 
} 

不要忘了在全球範圍內app.module進口。

import { SIDEDRAWER_DIRECTIVES } from "nativescript-telerik-ui/sidedrawer/angular"; 

並在聲明數組添加SIDEDRAWER_DIRECTIVES：下面TS

declarations: [ 
SIDEDRAWER_DIRECTIVES, 
AppComponent, 
...navigatableComponents 
] 

Answer 7

檢查：https://www.nativescript.org/blog/using-cross-platform-native-sidedrawer-component-in-nativescript

他們現在有RadSideDrawer組件 http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/SideDrawer/overview

希望這可以幫助！