Usage
<a id="demoButton" ui-type="Button" ui-text="Continue"
ui-has-icon="true" ui-css-class-icon="ico-check"
ui-command="$bindary.controller.button.command" ui-menu-id="demoMenu"
ui-primary="false" ui-transparent="false" ui-transparent-border="false"
ui-size="m" ui-decoration="0" ui-icon-align="0">
</a>
<div id="demoMenu" ui-type="Menu" ui-visible-root="false" ui-horizontal-root="false"
ui-item-list='[
{ "text": "Menu item 1" },
{ "text": "Menu item 2" },
{ "text": "Menu item 3" } ]'>
</div>
const menu = $UI.createComponent(componyx.UI.Menu, {
id: 'demoMenu',
visibleRoot: false,
horizontalRoot: false,
itemList: [{ text: 'Menu item 1' }, { text: 'Menu item 2' }, { text: 'Menu item 3' }],
containerElement: document.body
});
menu.show();
const button = $UI.createComponent(componyx.UI.Button, {
id: 'demoButton',
text: 'Continue',
hasIcon: true,
cssClassIcon: 'ico-check'
command: $bindary.controller.button.command,
menuId: 'demoMenu',
primary: false,
size: 'm',
transparent: false,
transparentBorder: false,
decoration: 0,
iconAlign: 0,
containerElement: document.body
});
button.show();
Setting both command and menuId (or boxId,
expandCommand) turns the button into a split button automatically, the click
area and the expand arrow become two separate actions.