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.

Properties

color

string

The color to use for the text color. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".

disabled

boolean

mode

string

The mode determines which platform styles to use. Possible values are: "ios" or "md".

value

string

the value of the segment.

Attributes

color

string

The color to use for the text color. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".

disabled

boolean

mode

string

The mode determines which platform styles to use. Possible values are: "ios" or "md".

value

string

the value of the segment.

Events

ionChange

Emitted when the value property has changed.

Built with StencilJS