FloatingMenu

API Reference: UI.FloatingMenu

Floating Menu is the equivalent of Floating Action Button in materlal design.

TypeScript code blocks includes example of how to implement, override & add components with theme. Create page with UI-Editor to make your page themeable and then able to implement themeable components programmatically. Once page created with UI-Editor, it generates class under scripts/generated/pages. Extend that class with below typescript classes.

Image Resouces

Images can be downloaded from Material Design Icons and put inside the "images" folder of the workspace.

Images should be transparent and not contain any shadows or background. Android applies Material Design pattern on Floating Action Menu. For more information about Floating Action Menu on Material Design, visit Material Design Guidelines

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import System = require("sf-core/device/system");
import Color = require("sf-core/ui/color");
import Image = require("sf-core/ui/image");
import FloatingMenu = require("sf-core/ui/floatingmenu");
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
floatingMenu: FloatingMenu;
items: FloatingMenu[] = [
new FloatingMenu.Item({
title: "report",
titleColor: Color.BLACK,
icon: Image.createFromFile("images://ic_report_white.png"),
color: Color.RED
}),
new FloatingMenu.Item({
title: "share",
titleColor: Color.BLACK,
icon: Image.createFromFile("images://ic_share_white.png"),
color: Color.BLUE
}),
new FloatingMenu.Item({
title: "reply",
titleColor: Color.BLACK,
icon: Image.createFromFile("images://ic_reply_white.png"),
color: Color.GREEN
})
];
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = System.OS === "Android" ? this : this.parentController;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.floatingMenu = new FloatingMenu({
items: this.items,
rotateEnabled: false,
icon: Image.createFromFile("images://ic_menu_white.png"),
});
this.layout.addChild(this.floatingMenu, "floatingMenu");
}
JavaScript
const extend = require('js-base/core/extend');
const Page = require('sf-core/ui/page');
const Color = require("sf-core/ui/color");
const Image = require("sf-core/ui/image");
const FloatingMenu = require("sf-core/ui/floatingmenu");
const MyPage = extend(Page)(
function(_super){
_super(this);
var items = [
new FloatingMenu.Item({
title: "report",
titleColor: Color.BLACK,
icon: Image.createFromFile("images://ic_report_white.png"),
color: Color.RED
}),
new FloatingMenu.Item({
title: "share",
titleColor: Color.BLACK,
icon: Image.createFromFile("images://ic_share_white.png"),
color: Color.BLUE
}),
new FloatingMenu.Item({
title: "reply",
titleColor: Color.BLACK,
icon: Image.createFromFile("images://ic_reply_white.png"),
color: Color.GREEN
})
];
this.onShow = function() {
var floatingMenu = new FloatingMenu({
items: items,
rotateEnabled: false,
icon: Image.createFromFile("images://ic_menu_white.png"),
});
this.layout.addChild(floatingMenu);
}.bind(this);
}
);
module && (module.exports = MyPage);