Navigation Drawer avec NativeScript

Question

Je voudrais créer un type de sidemenu avec NativeScript, mais je ne sais pas comment. Comment créer un tiroir de navigation avec NativeScript? Existe-t-il un module que peut-on faire?

Answer 1

Il n'y a pas de tiroir pour l'instant, mais il est dans le travail autant que je sache.

En attendant, vous pouvez vérifier le rapport officiel pour NativeScript. https://github.com/NativeScript/NativeScript/tree/master/apps/TelerikNEXT

Cochez l'application TelerikNext.

Answer 2

Je ne pense pas qu'il soit encore disponible Je pense que vous devez créer votre propre module en tant que vue et faire votre propre navigation (ouvrir, fermer).

Cependant dès la sortie de la boîte je n'ai rien trouvé d'autre dans leurs documents.

L'autre chose que j'ai essayé est d'ajouter un bouton dans l'en-tête, et je n'ai réussi qu'à changer la couleur de l'en-tête, donc je pense que vous devez attendre plus longtemps pour faire ces choses simples.

Ref: Je développe une application de démonstration basée sur Buxfer et NativeScript.

Code Source: https://github.com/chehabz/Buxfer-NativeScript

Answer 3

Telerik a annoncé aujourd'hui le Telerik UI for Nativescript en tant que plugin. Le plugin contient maintenant un tiroir latéral et des outils de visualisation de données. C'est un produit commercial mais (seulement) la fonction de tiroir latéral à l'intérieur est gratuite.

Pour plus d'informations, référez-vous au this doc.

Answer 4

Voici un exemple de la façon de créer un menu animé avec tiroir NativeScript 1.3 (qui a ajouté un cadre d'animation): https://github.com/emiloberg/nativescript-animated-sidebar-menu-example

Answer 5

Le tiroir est ici. Consultez le projet boilerplate de TJ Vantoll pour commencer ...

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

Ou une version dactylographiée de ce même modèle de Ignacio Fuentes ...

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

Answer 6

Je télécharger mon code de travail. Il est en Nativescript + angulaire 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"; 
} 
} 

Ne pas oublier d'importer dans le monde app.module.ts ci-dessous:

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

et dans tableau déclarations ajouter SIDEDRAWER_DIRECTIVES:

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

Answer 7

Vérifiez ceci: https://www.nativescript.org/blog/using-cross-platform-native-sidedrawer-component-in-nativescript

Ils ont maintenant la composante RadSideDrawer http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/SideDrawer/overview

J'espère que cela t'aides!