首页 文章

使用NativeScript导航抽屉

提问于
浏览
0

我想用NativeScript创建一种sidemenu,但我不知道怎么做 . 如何使用NativeScript创建导航抽屉?存在任何模块可以做到这一点?

7 回答

  • 1

    现在没有抽屉,但它在工作的AFAIK中 .

    同时,您可以查看NativeScript的官方回购 . https://github.com/NativeScript/NativeScript/tree/master/apps/TelerikNEXT

    检查TelerikNext应用程序 .

  • 1

    Telerik今天宣布Telerik UI for Nativescript为插件 . 该插件现在包含侧抽屉和数据可视化工具 . 这是一个商业产品,但(仅)其内部的侧抽屉功能是免费的 .

    有关详细信息,请参阅this doc .

  • 2

    下面是如何使用NativeScript 1.3(添加动画框架)创建动画抽屉菜单的示例:https://github.com/emiloberg/nativescript-animated-sidebar-menu-example

    enter image description here

  • 2

    抽屉在这里 . 查看TJ Vantoll的样板项目,帮助您入门......

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

    或者来自Ignacio Fuentes的同一模板的TypeScript版本......

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

  • 0

    我不认为它现在可用我认为您需要创建自己的模块作为视图并进行自己的导航(打开,关闭) .

    然而,开箱即用我没有在他们的文档中找到任何其他内容 .

    我尝试的另一件事是在 Headers 中添加一个按钮,但我仍然设法改变 Headers 的颜色,所以我认为你需要等待一些时间来做这些简单的事情 .

    参考:我正在开发基于Buxfer和NativeScript的演示应用程序 .

    资料来源:https://github.com/chehabz/Buxfer-NativeScript

  • 0

    I am uploading my working code. It is in Nativescript + Angular 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.ts中全局导入:

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

    并在声明数组中添加SIDEDRAWER_DIRECTIVES:

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

    检查一下: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

    希望这可以帮助!

相关问题