0

我想用 NativeScript 创建一种侧边菜单，但我不知道怎么做。如何使用 NativeScript 创建导航抽屉？存在任何模块什么可以做到这一点？

4

7 回答 7

2

目前没有抽屉，但它在工作的 AFAIK 中。

同时，您可以查看 NativeScript 的官方 repo。 https://github.com/NativeScript/NativeScript/tree/master/apps/TelerikNEXT

检查 TelerikNext 应用程序。

于 2015-04-07T11:13:31.483 回答
2

Telerik 今天宣布Telerik UI for Nativescript作为插件。该插件现在包含侧抽屉和数据可视化工具。这是一款商业产品，但（仅）其中的侧抽屉功能是免费的。

您可以参考此文档了解详细信息。

于 2015-07-30T07:34:05.740 回答
2

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

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

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

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

于 2016-03-07T22:25:08.807 回答
1

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

在此处输入图像描述

于 2015-08-27T08:15:50.947 回答
0

我认为它尚不可用我认为您需要创建自己的模块作为视图并进行自己的导航（打开，关闭）。

但是开箱即用，我在他们的文档中没有找到任何其他内容。

我尝试的另一件事是在标题中添加一个按钮，但我仍然只能更改标题的颜色，所以我认为您需要等待更多时间来完成这些简单的事情。

参考：我正在开发一个基于Buxfer和 NativeScript 的演示应用程序。

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

于 2015-04-05T06:54:05.157 回答
0

我正在上传我的工作代码。它在 Nativescript + Angular 2 中

抽屉.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>

抽屉.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";

并在声明数组中添加 SIEDRAWER_DIRECTIVES：

declarations: [
SIDEDRAWER_DIRECTIVES,
AppComponent,
...navigatableComponents
]
于 2016-11-23T11:17:08.553 回答
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

希望这可以帮助！

于 2017-01-11T16:31:45.597 回答