Here we’re setting up an action listener, which will be handled via the controller object we just defined. I’ve included the Font Awesome font that was designed to be used with Twitter Bootstrap to display icons for each button: For this I added an additional button group. I’ll show you how to set this up by creating three buttons to set the text alignment to either left, right, or center, by updating the justify property.įirst of all we need to add the buttons to allow the user to specify the alignment.

For properties that accept one of a number of predefined values, it becomes a little more complex, but wont be alien to those of you who know how Montage works. 'prototype': 'montage/ui/toggle-button.reel ',Īs you’ve just seen, setting boolean properties is a trivial affair. As this example has no external dependencies, it is ideal for this: Lets also add a data-auto-package attribute to the Montage script element, so that we don’t need to create a package.json file. I’ve applied a class to it so that the stylesheet can visually display the buttons as a group.Įach button and the div element below the menu are given their own data-montage-id so we can hook them up to the serialization.

Inside the menu I’ve included a wrapper div to group together the three text controls. Montage doesn’t do anything special with this element I’ve just included it for semantic value. The menu element holds the buttons we will use for styling the text.

Word rich text content control unbold