v-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

Props

Name Type Default Value Description
active-index Number 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.
disabled Boolean Specify if segment should be disabled. Optional.
index Number If exists, specifies the current active button’s index. It is also used as the initially active button index. Must be modified on update:index event. Optional.
modifier String The appearance of the segment. Optional.
tabbar-id String ID of the tabbar component to “connect” to the segment. Must be inside the same page. Optional.

Preset Modifiers

Name Description
material Material Design segment

Events Summary

Name Description
postchange Fires after the active button is changed.
update:index Fired right after the active button changes. Useful to update index prop.

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.

update:index

Fired right after the active button changes. Useful to update index prop.

Parameters
Name Type Description
event Number New value for index prop.

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.