Class M.ButtonGroupView
Extends
M.View.
A button group is a vertically or / and horizontally aligned group of buttons. There
are basically three different types of a button group:
- horizontally aligned buttons
1 - 2 - 3
- vertically aligned buttons
1
|
2
|
3
- horizontally and vertically aligned buttons
1 - 2
| |
3 - 4
Defined in: button_group.js.
Constructor Attributes | Constructor Name and Description |
---|---|
Field Attributes | Field Name and Description |
---|---|
This property, if set, defines how many buttons are rendered per line.
|
|
This property determines whether to render the button group horizontally
or vertically.
|
|
Determines whether to display the button group compact, i.e.
|
|
Determines whether to display the button group view 'inset' or at full width.
|
|
This property determines whether the buttons of this button group are selectable or not.
|
|
This property specifies the recommended events for this type of view.
|
|
The type of this object.
|
- Fields borrowed from class M.View:
- childViews, computedValue, contentBinding, contentBindingReverse, cssClass, cssClassOnError, cssClassOnInit, cssStyle, events, hasFocus, html, id, isInline, isView, modelId, parentView, triggerActionOnChange, triggerActionOnEnter, triggerActionOnKeyUp, value
Method Attributes | Method Name and Description |
---|---|
This method returns the currently selected button of this button group.
|
|
setActiveButton(button)
This method activates one button within the button group.
|
|
setActiveButtonAtIndex(index)
This method activates one button within the button group at the given index.
|
- Methods borrowed from class M.View:
- addCssClass, attachToObservable, clearHtml, clearValue, clearValues, computeValue, contentDidChange, delegateValueUpdate, design, getChildViewsAsArray, getIds, getValue, getValues, gotFocus, lostFocus, nl2br, registerEvents, removeCssClass, removeCssProperty, renderUpdate, secure, setCssProperty, setValueFromDOM, style, tab2space, theme, themeChildViews
- Methods borrowed from class M.Object:
- bindToCaller, create, destroy, extend, get, include, set
Field Detail
{Number}
buttonsPerLine
This property, if set, defines how many buttons are rendered per line. If there
are more buttons defined that fitting into one line, the following buttons are
rendered into a new line. Make sure, the number of your buttons is divisible by
the number of buttons per line, since only full lines are displayed. So if you
for example specify 5 buttons and 2 buttons per line, the fifth button won't be
visible.
If e.g. 4 buttons are specified and this property is set to 2, the rendering will
be as follows:
1 -- 2
3 -- 4
{String}
direction
This property determines whether to render the button group horizontally
or vertically. Default: horizontal.
Possible values are:
- M.HORIZONTAL: horizontal
- M.VERTICAL: vertical
{Boolean}
isCompact
Determines whether to display the button group compact, i.e. without top/bottom
margin. This property only is relevant in combination with multiple lines of
buttons (c.p.: buttonsPerLine property).
{Boolean}
isInset
Determines whether to display the button group view 'inset' or at full width.
{Boolean}
isSelectable
This property determines whether the buttons of this button group are selectable or not. If
set to YES, a click on one of the buttons will set this button as the currently active button
and automatically change its styling to visualize its selection.
{Array}
recommendedEvents
This property specifies the recommended events for this type of view.
{String}
type
The type of this object.
Method Detail
{M.ButtonView}
getActiveButton()
This method returns the currently selected button of this button group. If no
button is selected, null is returned.
- Returns:
- {M.ButtonView} The currently active button of this button group.
setActiveButton(button)
This method activates one button within the button group.
- Parameters:
- {M.ButtonView|String} button
- The button to be set active or its id.
setActiveButtonAtIndex(index)
This method activates one button within the button group at the given index.
- Parameters:
- {Number} index
- The index of the button to be set active.