Навигационный ящик с NativeScript

Question

Я хотел бы создать тип sidemenu с NativeScript, но я не знаю, как это сделать. Как создать навигационный ящик с помощью NativeScript? Существует любой модуль, что можно сделать?

Answer 1

Там нет ящика на данный момент, но это в рабочем AFAIK.

Между тем, вы можете проверить официальное репо для NativeScript. https://github.com/NativeScript/NativeScript/tree/master/apps/TelerikNEXT

Проверьте приложение TelerikNext.

Answer 2

Я не думаю, что он еще доступен. Мне кажется, вам нужно создать свой собственный модуль в качестве представления и сделать свою собственную навигацию (открыть, закрыть).

Однако прямо из коробки я не нашел ничего другого в своих документах.

Другая вещь, которую я пробовал, - это добавить кнопку в заголовок, и все же мне удалось изменить цвет заголовка, поэтому я думаю, вам нужно подождать еще немного времени, чтобы сделать эти простые вещи.

Ссылка: Я разрабатываю демо-приложение на основе 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

или версию машинопись того же шаблона от Ignacio Fuentes ...

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:

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

Надеюсь это поможет!