Is there documentation or any sample on how to create a ribbon dropdown button in Create/Content Editor which displays in a manner similar to the Document View button? In other words, it displays menu-items that contain no icons and can toggle a bullet for the selected item... When I try this based on sample markup in the docs, my main button icon on <ribbon-normalbuttondropdown> is replicated on each menu item in the dropdown.
I couldn't find an example on how to do this in our docs, but this would be the way to go:
Translate
<x:overlay xmlns="http://xopus.com/2009/lui">
<ribbon-bigbuttondropdown after="CancelEditingButton" label="Commands" iconsrc="share.png">
<menu>
<menu-group checkmarks="bullet" icons="no">
<menu-item id="checkedItem" command="checkedCommand" iconsrc=""/>
<menu-item id="notCheckedItem" command="notCheckedCommand" iconsrc=""/>
</menu-group>
</menu>
</ribbon-bigbuttondropdown>
</x:overlay>
<x:javascript>
Editor.addCommand("checkedCommand", {
getChecked: function () {
return true;
},
execute: function () {
console.log("checked");
}
});
Editor.addCommand("notCheckedCommand", {
getChecked: function () {
return false;
},
execute: function () {
console.log("not checked");
}
});
</x:javascript>
Using checkmarks="bullet" and icons="no" on the menu-group you can style the menu the way you want. When you have specified an icon on the dropdownbutton itself, this will automatically be applied to all children as well. To avoid that, set iconsrc explicitly to an empty string for the menu-items.
I couldn't find an example on how to do this in our docs, but this would be the way to go:
<x:overlay xmlns="http://xopus.com/2009/lui">
<ribbon-bigbuttondropdown after="CancelEditingButton" label="Commands" iconsrc="share.png">
<menu>
<menu-group checkmarks="bullet" icons="no">
<menu-item id="checkedItem" command="checkedCommand" iconsrc=""/>
<menu-item id="notCheckedItem" command="notCheckedCommand" iconsrc=""/>
</menu-group>
</menu>
</ribbon-bigbuttondropdown>
</x:overlay>
<x:javascript>
Editor.addCommand("checkedCommand", {
getChecked: function () {
return true;
},
execute: function () {
console.log("checked");
}
});
Editor.addCommand("notCheckedCommand", {
getChecked: function () {
return false;
},
execute: function () {
console.log("not checked");
}
});
</x:javascript>
Using checkmarks="bullet" and icons="no" on the menu-group you can style the menu the way you want. When you have specified an icon on the dropdownbutton itself, this will automatically be applied to all children as well. To avoid that, set iconsrc explicitly to an empty string for the menu-items.
