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

Segment

The <v-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 or especially for connecting to <v-ons-tabbar>. See the next page to find out how to do it.

Connecting to “VOnsTabbar”

Sometimes you may want a segment instead of the normal tabs in your tabbar.

You can connect <v-ons-segment> and <v-ons-tabbar> by providing the ID of the <v-ons-tabbar> you want to control as the tabbar-id attribute of <v-ons-segment>.

This way the tabbar will be automatically hidden and the active button of <v-ons-segment> will always be in sync with the active tab of <v-ons-tabbar>.

See also

Name Type Description
activeIndex Number Index of the active button. If a tabbar is connected, this will be set to the tabbar’s active index. Optional.
disabled Boolean Specify if segment should be disabled. Optional.
modifier String The appearance of the segment. Optional.
tabbarId String ID of the tabbar element to “connect” to the segment. Must be inside the same page. Optional.
Name Description
material Material Design segment
Name Description
postchange Fires after the active button is changed.
update:activeIndex Fired right after the active button changes. Useful to update activeIndex prop.
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:activeIndex

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

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

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.