ons-segment

Segment component. Use this component to have a button bar with automatic styles that switch on click of another button. Will automatically display as a Material Design segment on Android.

Tutorial

See also

Attributes

Name Type Default Value Description
modifier String The appearance of the segment. Optional.
tabbar-id String ID of the tabbar element to “connect” to the segment. Must be inside the same page. Optional. Works only during initialization.
active-index Number
0
Index of the first active button, only works if there is no connected tabbar (in which case the active tab sets the active button). Optional. Works only during initialization.
disabled Specify if segment should be disabled. Optional.

Properties

Name Description
disabled Whether the segment is disabled or not.

Preset Modifiers

Name Description
material Material Design segment

Methods Summary

Signature Description
setActiveButton(index, [options]) Make button with the specified index active. If there is a connected tabbar it shows the corresponding tab page. In this case animations and their options can be specified by the second parameter.
getActiveButtonIndex() Returns button index of current active button. If active button is not found, returns -1.

Events Summary

Name Description
postchange Fires after the active button is changed.

Methods

setActiveButton(index, [options]): Promise

Make button with the specified index active. If there is a connected tabbar it shows the corresponding tab page. In this case animations and their options can be specified by the second parameter.

Returns: Resolves to the selected index or to the new page element if there is a connected tabbar.

Parameters
Name Type Description
index Number Button index.
options Object Parameter object, works only if there is a connected tabbar. Supports the same options as ons-tabbar‘s setActiveTab method.

getActiveButtonIndex(): Number

Returns button index of current active button. If active button is not found, returns -1.

Returns: The index of the currently active button.

Events

postchange

Fires after the active button is changed.

Parameters
Name Type Description
event Object Event object.
event.index Number Tapped button index.
event.segmentItem Object Segment item object.

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.