Usage
The HTML and JavaScript tabs build the identical Menu setup shown above, declaratively via
attributes or imperatively via the JS API.
<a id="demoMenuButton"
ui-type="Button"
ui-primary="true"
ui-decoration="0"></a>
<div id="demoMenu"
ui-type="Menu"
ui-collapse-all-on-select="true"
ui-horizontal-root="true"
ui-root-expand-direction="0"
ui-button-id="demoMenuButton"
ui-item-list='[
{ "id": "file", "text": "File", "itemList": [
{ "id": "file_new", "text": "New" },
{ "id": "file_open", "text": "Open" },
{
"id": "file_recent", "text": "Recent Files", "expandOnSelect": false,
"selectable": true, "itemList": [
{ "id": "file_recent_1", "text": "Report.docx" },
{ "id": "file_recent_2", "text": "Budget.xlsx" }
]
}
] },
{ "id": "view", "text": "View", "itemList": [
{
"id": "view_toolbar", "text": "Show Toolbar", "type": 1,
"collapseAllOnSelect": false
},
{
"id": "view_statusbar", "text": "Show Status Bar", "type": 1,
"collapseAllOnSelect": false
},
{
"id": "view_theme_light", "text": "Light Theme", "type": 2,
"radioGroupId": "theme", "collapseAllOnSelect": false
},
{
"id": "view_theme_dark", "text": "Dark Theme", "type": 2,
"radioGroupId": "theme", "collapseAllOnSelect": false
}
] },
{ "id": "help", "text": "Help", "disabled": true }
]'></div>
const menuButton = $UI.createComponent(componyx.UI.Button, {
id: 'demoMenuButton',
primary: true,
decoration: 0,
containerElement: document.body
});
menuButton.show();
const menu = $UI.createComponent(componyx.UI.Menu, {
id: 'demoMenu',
collapseAllOnSelect: true,
horizontalRoot: true,
rootExpandDirection: 0,
buttonId: menuButton.id,
itemList: [
{ id: 'file', text: 'File', itemList: [
{ id: 'file_new', text: 'New' },
{ id: 'file_open', text: 'Open' },
{
id: 'file_recent', text: 'Recent Files', expandOnSelect: false,
selectable: true, itemList: [
{ id: 'file_recent_1', text: 'Report.docx' },
{ id: 'file_recent_2', text: 'Budget.xlsx' }
]
}
] },
{ id: 'view', text: 'View', itemList: [
{
id: 'view_toolbar', text: 'Show Toolbar', type: 1 ,
collapseAllOnSelect: false
},
{
id: 'view_statusbar', text: 'Show Status Bar', type: 1,
collapseAllOnSelect: false
},
{
id: 'view_theme_light', text: 'Light Theme', type: 2,
radioGroupId: 'theme', collapseAllOnSelect: false
},
{
id: 'view_theme_dark', text: 'Dark Theme', type: 2,
radioGroupId: 'theme', collapseAllOnSelect: false
}
] },
{ id: 'help', text: 'Help', disabled: true }
],
containerElement: document.body
});
menu.show();
Changing primary or decoration on an already-rendered Button
doesn't update its appearance on its own, the styling is applied at render time. Since
the menu's item buttons take their appearance from this Button, re-render it, then
re-render the menu so its items pick up the change:
menuButton.primary = false;
menuButton.decoration = 1;
menuButton.render();
menu.render();