ion-segment

Segments display a group of related buttons, sometimes known as segmented controls, in a horizontal row. They can be displayed inside of a toolbar or the main content.

Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.

Basic Usage​

Segments consist of segment buttons with a value property on each button. Set the value property on the segment to match the value of a button to select that button. Segments can also be disabled to prevent users from interacting with them.

Scrollable Segments​

Segments are not scrollable by default. Each segment button has a fixed width, and the width is determined by dividing the number of segment buttons by the screen width. This ensures that each segment button can be displayed on the screen without having to scroll. As a result, some segment buttons with longer labels may get cut off. To avoid this we recommend either using a shorter label or switching to a scrollable segment by setting the scrollable property to true. This will cause the segment to scroll horizontally, but will allow each segment button to have a variable width.

Segments in Toolbars​

Theming​

Colors​

CSS Custom Properties​

Accessibility​

Keyboard Navigation​

The component has full keyboard support for navigating between and selecting ion-segment-button elements. By default, keyboard navigation will only focus ion-segment-button elements, but you can use the selectOnFocus property to ensure that they get selected on focus as well. The following table details what each key does:

Interfaces​

SegmentChangeEventDetail​

interfaceSegmentChangeEventDetail{
 value?:string;
}

SegmentCustomEvent​

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interfaceSegmentCustomEventextendsCustomEvent{
 target: HTMLIonSegmentElement;
 detail: SegmentChangeEventDetail;
}

Properties​

color​

disabled​

mode​

scrollable​

selectOnFocus​

swipeGesture​

value​

Events​

Methods​

No public methods available for this component.

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSS Custom Properties​

Slots​

No slots available for this component.