Controlgroup

API Documentation

Controlgroups are used to visually group a set of buttons to form a single block that looks contained like a navigation component.

Controlgroup horizontal

No icon Left Right
Top Top
Bottom Bottom
Icon only Icon only
Home

Controlgroup vertical

To have a controlgroup with a vertical layout, add data-direction="vertical" to the container.

No icon Left Right Top Bottom Icon only

Mini sized

No icon Left Right
Top Top
Bottom Bottom
Icon only Icon only
Home
No icon Left Right Top Bottom Icon only

Radio button

Horizontal:
Horizontal, mini sized:
Vertical:
Vertical, mini sized:

Checkbox

Horizontal:
Horizontal, mini sized:
Vertical:
Vertical, mini sized:

Selects

Horizontal:
Horizontal, mini sized:
Vertical:
Vertical, mini sized:

Controlgroup theming

One Two Three Four

Pre-rendered markup

You can supply pre-rendered markup for any controlgroup to save startup time. The example below illustrates the markup you have to provide for a pre-rendered controlgroup. Note that the widgets inside the controlgroup need not necessarily be pre-rendered.

Textinputs

While textinputs are not officially supported by the controlgroup they can be made to work with some simple CSS and script.

To make this work you will need to add one CSS rule and a simple controlgroup extension which uses textinput's ui-textinput class key to allow the controlgroup widget to set the corner classes on the textinput wrapper.