Skip to content

Instantly share code, notes, and snippets.

@baran baran/DynamicMenu.ux
Last active Oct 7, 2016

Embed
What would you like to do?
<App>
<Font ux:Global="Linearicons" File="Linearicons-Free.ttf" />
<Panel>
<JavaScript>
var Observable = require('FuseJS/Observable');
var menuItems = [{
"title": "Menu Item 01",
"icon": "\ue82e", // Basket
"goto": "goItem1"
}, {
"title": "Menu Item 02",
"icon": "\ue82a", // User
"goto": "goItem2"
}, {
"title": "Menu Item 03",
"icon": "\ue844", // Sent
"goto": "goItem3"
}, {
"title": "Menu Item 04",
"icon": "\ue820", // Logout
"goto": "goItem4"
}];
function clone(obj) {
return JSON.parse(JSON.stringify(obj));
}
function itemClicked(arg) {
console.dir(arg.data);
}
module.exports = {
menuItems: menuItems,
getMenuItems: function () { return clone(menuItems); },
itemClicked: function (arg) { console.dir(arg.data); }
}
</JavaScript>
<Grid ux:Class="MenuGrid" Background="White" Columns="3*,29*" ColumnCount="3" Padding="20,20">
<string ux:Property="MenuIcon" />
<string ux:Property="MenuText" />
<Text Font="Linearicons" FontSize="25" Value="{Property this.MenuIcon}" Clicked="{itemClicked}" Alignment="CenterLeft" />
<Text FontSize="18" Margin="15,0,0,0" Value="{Property this.MenuText}" Clicked="{itemClicked}" Alignment="CenterLeft" TextAlignment="Right" TextWrapping="Wrap" />
</Grid>
<StackPanel>
<Each Items="{menuItems}">
<MenuGrid Margin="0,5,0,0" MenuText="{title}" MenuIcon="{icon}" />
</Each>
</StackPanel>
</Panel>
</App>
@baran

This comment has been minimized.

Copy link
Owner Author

baran commented Jul 13, 2016

screen shot 2016-07-13 at 12 10 40

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.