Documentation Center

ribbon-bigbuttondropbdown

The ribbon-bigbuttondropdown is a configurable UI element that displays a dropdown menu, a large 32x32 pixel icon and a label.

Description

You can add different types of buttons, and button groups using the overlay element in the configuration. The ribbon-bigbuttondropdown element is one of five different type of buttons you may wish to configure for your UI. This drop down button is a bit more complex than a simple button since you are also displaying a drop down menu.

Namespace

http://xopus.com/2009/lui

Attributes

NameDescriptionType
afterOptional.

The ID of the user interface component where the button is positioned after in the toolbar. If neither before or after is set, then the button element should have a parent with an id attribute, and the button will be appended to the component with that ID.

string
beforeOptional.

The ID of the user interface component where the button is positioned before in the toolbar. If neither before or after is set, then the button element should have a parent with an id attribute, and the button will be appended to the component with that ID.

string
commandOptional.

The name of the command this button is coupled with. See Editor.addCommand element for more details.

string
roleOptional.

The role attribute can be defined as a replacement of the command attribute. The value of this attribute must correspond to a role definition from the node configuration for an element. The will effectively create a toolbar button which acts similarly to the bold button.

iconsrcOptional.

URL for the icon on this button. Relative URI's are resolved from the location of the configuration file.

valid url
overflow-iconsrcOptional.

URL for the icon on this button when shown in the overflow toolbar. Relative URI's are resolved from the location of the configuration file.

overflow icons can only be 16x16 pixels.

valid url
iconoffsetxOptional.

When icons are sprited images, then the x-coordinate value can be defined with this attribute.

overflow-iconoffsetxOptional

When overflow icons are sprited images, then the x-coordinate value can be defined with this attribute.

iconoffsetyOptional.

When icons are sprited images, then the y-coordinate value can be defined with this attribute.

overflow-iconoffsetyWhen overflow icons are sprited images, then the y-coordinate value can be defined with this attribute.
idOptional.

The ID for this button component.

string
availableOptional.

When false the button will no longer be available in the toolbar. See also Command.getAvailable.

boolean
labelOptional.

The alt/title text of the button when the user mouseovers the button.

string
modeOptional

This attribute describes behavior for pressing the button.

When set to toggle (which is default), the current context will be converted to the new element (if allowed by schema) and can be converted back by clicking the button again. 

When set to insert, the new element is always inserted as close to the cursor position as allowed by schema. Clicking this button again does not remove previously added element but rather creates another one.

string

Examples

You can find the complete set of examples for configuring the ribbon-toolbar in the topic for the overlay element.

You can create a dropdown button by using ribbon-normalbuttondropdown or ribbon-bigbuttondropdown in the overlay element.

Add an overlay in the configuration file (dita-config-custom.xml).

<x:overlay xmlns="http://xopus.com/2009/lui">
  <ribbon-bigbuttondropdown after="CancelEditingButton" label="Commands" iconsrc="/image/icon-32x32.png">
    <menu>
      <menu-group>
        <menu-item id="button2" role="strong" label="Very Strong Button" />
      </menu-group>
    </menu>
  </ribbon-bigbuttondropdown>
</x:overlay>

Parent Element

overlay