Menu

API Reference: UI.Menu

Menu is a dialog UI that presents a set of alternatives to the user for how to proceed with a given task.

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Menu = require('sf-core/ui/menu');
const MenuItem = require('sf-core/ui/menuitem');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
menu.show(this);
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var menu = new Menu();
menu.headerTitle = "My Menu Title";
var menuItem1 = new MenuItem({
title: "Menu Item 1"
});
var menuItem2 = new MenuItem({
title: "Menu Item 2"
});
menuItem1.onSelected = function() {
console.log("menu item 1 clicked")
}
menuItem2.onSelected = function() {
console.log("menu item 2 clicked")
}
menu.items = [menuItem1, menuItem2];
}
);
module.exports = Page1;

Tip

Menu can not be shown before the page's onShow() event is triggered.

Show

Don't forget to call show method of Menu after creating it.

iOS Menu Styles

iOS menu has a different way to highlight some of the menu items. They are covered in MenuItem.ios.Style. Apple has its own documentation for using menu items as Action Sheets. ## Menu Item Order Order of the menu items is important to give the same experience.

  • If an item is to be destructive, it should be the first in the array.

  • If an item is the cancel item, it should be the last in the array.

Cancel Menu Item

As documented in Apple documentation, cancel item needs to be part of the menu item. In Android it does not have to be part of the menu; User can press back button and cancel. Best experience would be to create & include the cancel menu item if it is iOS.