Usage
<div id="dialog" ui-type="Dialog"
ui-auto-position="5"
ui-expander="button"
ui-modal="false"
ui-draggable="true"
ui-buttons='{"cancelText":"Cancel","confirmText":"Yes","denyText":"No"}'>
<div ui-template="Header">Confirmation</div>
<div ui-template="Content">
<div style="min-width: 300px; min-height: 50px;">Are you sure?</div>
</div>
</div>
<a id="button" ui-type="Button" ui-size="l" ui-text="Open Dialog" ui-command="$UI.store.dialog.show"></a>
const button = $UI.createComponent(componyx.UI.Button, {
id: 'button',
text: 'Open Dialog',
size: 'l',
command: () => $UI.store.dialog.show(),
containerElement: document.body
});
button.show();
const dialog = $UI.createComponent(componyx.UI.Dialog, {
id: 'dialog',
autoPosition: componyx.UI.Box.AutoPositionOption.CENTER,
expander: 'button',
modal: false,
draggable: true,
containerElement: document.body
});
dialog.buttons.cancelText = 'Cancel';
dialog.buttons.confirmText = 'Yes';
dialog.buttons.denyText = 'No';
dialog.setHeaderTemplate('Confirmation');
dialog.setContentTemplate('<div style="min-width: 300px; min-height: 50px;">Are you sure?</div>');
dialog.show();
expander is only required when autoPosition is set to a value
that positions the dialog relative to the element that opened it (Mouse cursor, Expand).