OnsSegment Directive (ons-segment)

Angular directive for <ons-segment> component.

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

Segment

The <ons-segment> component allows you to have a nice button bar with only one active button at a time. It may be useful for example for filtering lists.

See also

Name Type 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 active button. If a tabbar is connected, this will be set to the tabbar’s active index. Optional.
disabled Specify if segment should be disabled. Optional.
Name Description
activeIndex Index of the active button. If a tabbar is connected, this will be set to the tabbar’s active index.
disabled Whether the segment is disabled or not.
Name Description
material Material Design segment
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.
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.

Inputs

Name Type Description
activeIndex Input index of the active button.
tabbar The tabbar component to “connect” to the segment. Must be inside the same page. Works only during initialization.

Outputs

Name Type Description
postchange Triggers when the index of the active button is changed.
activeIndexChange Triggers when the index of the active button is changed.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord 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.