Button Set

amx:selectOneButton

The Button Set component behaves as a toggle or radio control. One segment of the component can be selected at a time. This component has two styles: button and tab. The component has a few elements:

• Label: An optional label for the component.
• Container: The container that the group of segments is contained within.
• Segment: The is a button, tab or pill.
• Text: This is text label for a segment.

Appearance

Appearance characteristics for this component.

• Label: An optional label may be displayed.
• State: Supports enabled, pressed, disabled and read-only.
• Selection: Supports selected and unselected rows.
• Style: Supports button and tab styles. iOS defaults to button style, with an alternate pill style. Android defaults to tab style, with an alternate button style.
• Orientation: Supports horizontal and vertical groupings.
• Read-Only: The selected item is bold text.
• Rendered: This component can be shown or hidden.

Behavior

Common behaviors for this component.

• Selection: Only one segment in the group can be selected at a time. Selecting a button performs the default action - typically changing an object view or changing the sort order of a list.
• Unselected Segment: Tap an unselected segment to select it. The previous selected segment will change to unselected.
• Selected Segment: When tapping a selected segment, there is no change in state.

Usage

Usage guidelines for this component.

• This component maybe used in context with a List View. The segment would change what should be displayed in the List View.
• This component changes the view displayed (e.g., Day, Week, Month). Tapping the buttons in the horizontal button group simply changes the displayed view for an object.
• Navigation Bar will toggle between features within the application and will always be displayed at the bottom of the application display, while a Button Setwill toggle between views within a section of the application.

Sample

AMX sample code for this component.

<amx:selectOneButton label="Normal" id="sob1">
<amx:selectItem label="One" value="true"/>
<amx:selectItem label="Two"/>
<amx:selectItem label="Three"/>
</amx:selectOneButton>

<amx:selectOneButton label="Normal Vertical" id="sob1" layout="vertical">
<amx:selectItem label="One" value="true"/>
<amx:selectItem label="Two"/>
<amx:selectItem label="Three"/>
</amx:selectOneButton>

<amx:selectOneButton label="Disabled" id="sob2" disabled="true">
<amx:selectItem label="One"/>
<amx:selectItem label="Two" value="true"/>
<amx:selectItem label="Three"/>
</amx:selectOneButton>

<amx:selectOneButton label="Read-Only" id="sob3" readOnly="true">
<amx:selectItem label="One"/>
<amx:selectItem label="Two"/>
<amx:selectItem label="Three"/>
</amx:selectOneButton>



Related

• Used On: Phone, Tablet
• Also Called: Button Group, Segmented Button, Segmented Control, Toggle Button
• Related Components: Radio Set
• Resources: None