<Segment />

Segment component.

Tutorial

Segment

The <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 <Tabbar>. See the next page to find out how to do it.

Connecting to <Tabbar>

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

You can connect <Segment> and <Tabbar> by providing the ID of the <Tabbar> you want to control as the tabbarId prop of <Segment>.

This way the tabbar will be automatically hidden and the active button of <Segment> will always be in sync with the active tab of <Tabbar>.

Props

Name Type Default Value Description
index number The index of the button to highlight. Optional.
tabbarId string ID of the <Tabbar> to “connect” to the segment. Optional.
modifier string The appearance of the segment. Optional.
onChange function Called when the active button changes. Optional.

Preset Modifiers

Name Description
material Material Design segment

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.