nativescript-menu
by xlmnxp | v1.1.7
an plugin that adds a pop-up menu to NativeScript.
npm i --save nativescript-menu
  • Version: 1.1.7
  • GitHub:
  • Downloads:
    • Last Day:   12
    • Last Week:  58
    • Last Month: 310

nativescript-menu Build Status

A plugin that adds a pop-up menu to NativeScript

Installation

From your command prompt/terminal go to your app's root folder and execute: tns plugin add nativescript-menu

Version lower then NativeScript 7

tns plugin add nativescript-menu@1.1.6

Demo

Android iOS
screenshot 1 screenshot 2

Usage

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" class="page"
xmlns:ui="nativescript-menu">
<StackLayout class="p-20">
<Button id="menuBtn" text="getMenu" tap="{{ buttonTap }}"/>
</StackLayout>
</Page>
import { Menu } from "nativescript-menu";

export class HelloWorldModel extends Observable {
public message: string;
private menu: Menu;

constructor(public page: Page) {
super();
}

buttonTap() {
Menu.popup({
view: this.page.getViewById("menuBtn"),
actions: ["Example", "NativeScript", "Menu"]
})
.then(action => {
alert(action.id + " - " + action.title);
})
.catch(console.log);
}
}

with custom options

import { Menu } from "nativescript-menu";

export class HelloWorldModel extends Observable {
public message: string;
private menu: Menu;

constructor(public page: Page) {
super();
}

buttonTap() {
Menu.popup({
view: this.page.getViewById("menuBtn"),
actions: [
{ id: "one", title: "Example" },
{ id: "two", title: "NativeScript", customOption: "Hello" },
{ id: "three", title: "Menu" }
]
})
.then(action => {
alert(JSON.stringify(action));
})
.catch(console.log);
}
}

API

  • MenuOptions
export interface MenuOptions {
title?: string; // IOS Only
message?: string; // IOS Only
view: View;
actions: object[] | string[];
cancelButtonText?: string; // IOS Only
}
Method Description
popup(options: MenuOptions): Promise<{id: number, title: string} | actionObject | boolean> Create a pop-up menu and show it