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.
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.
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>.
| 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.
|
Fires after the active button is changed.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.index | Number | Tapped button index. |
| event.segmentItem | Object | Segment item object. |
Fired right after the active button changes. Useful to update activeIndex prop.
| Name | Type | Description |
|---|---|---|
| event | Number |
New value for activeIndex prop.
|
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.