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 <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 <ons-tabbar>. See the next section to find out how to do it.
Sometimes you may want a segment instead of the normal tabs in your tabbar.
You can connect <ons-segment> and <ons-tabbar> by providing the ID of the <ons-tabbar> you want to control as the tabbar-id attribute of <ons-segment>.
This way the tabbar will be automatically hidden and the active button of <ons-segment> will always be in sync with the active tab of <ons-tabbar>.
Attributes are added directly to the element. You can do this in HTML or JS.
HTML: <ons-segment someAttribute="true" anotherAttribute><ons-segment>
JS: document.querySelector('ons-segment').setAttribute('someAttribute', 'true')
| 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. |
Properties are accessed on the element through JS, and should be get and set directly. For example: document.querySelector('ons-segment').activeIndex.
| 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. |
Modifiers are set in the modifier attribute. To use more than one, separate them by spaces. For example:
<ons-segment modifier="material
modifier2"><ons-segment>.
| Name | Description |
|---|---|
| material | Material Design segment |
These methods are called directly on the DOM element. Get a reference to the element in JS, and the methods below will be available to call on it. For example: document.querySelector('ons-segment').someMethod().
| 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. |
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.
| 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.
|
Returns button index of current active button. If active button is not found, returns -1.
Returns: The index of the currently active button.
To use these events, add event listeners to the elements as you would for native events, like click. For example: document.querySelector('ons-segment').addEventListener('postchange', function() { ... }).
Some Onsen UI components have overlapping event names. For example, ons-carousel and ons-navigator both emit postchange events. Stop overlapping events from propagating to avoid conflicts: document.querySelector('ons-carousel').on('postchange', e => e.stopPropagation()).
| Name | Description |
|---|---|
| postchange | Fires after the active button is changed. |
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. |
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.