Segment

`ion-segment`

A Segment is a group of buttons, sometimes known as Segmented Controls, that allow the user to interact with a compact group of a number of controls. Segments provide functionality similar to tabs, selecting one will unselect all others. You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app. You could use Angular 2's ngModel or FormBuilder API. For an overview on how FormBuilder works, checkout Angular 2 Forms, or Angular FormBuilder

<!-- Segment in a header -->
<ion-header>
  <ion-toolbar>
    <ion-segment [(ngModel)]="icons" color="secondary">
      <ion-segment-button value="camera">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="bookmark">
        <ion-icon name="bookmark"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- Segment in content -->
  <ion-segment [(ngModel)]="relationship" color="primary">
    <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
      Friends
    </ion-segment-button>
    <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
      Enemies
    </ion-segment-button>
  </ion-segment>

  <!-- Segment in a form -->
  <form [formGroup]="myForm">
    <ion-segment formControlName="mapStyle" color="danger">
      <ion-segment-button value="standard">
        Standard
      </ion-segment-button>
      <ion-segment-button value="hybrid">
        Hybrid
      </ion-segment-button>
      <ion-segment-button value="sat">
        Satellite
      </ion-segment-button>
    </ion-segment>
  </form>
</ion-content>

Input Properties

Attr	Type	Details
color	`string`	The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. For more information, see Theming your App.
disabled	`boolean`	If true, the user cannot interact with any of the buttons in the segment.
mode	`string`	The mode determines which platform styles to use. Possible values are: `"ios"`, `"md"`, or `"wp"`. For more information, see Platform Styles.

Output Events

Attr	Details
ionChange	Emitted when a segment button has been changed.

Sass Variables

iOS Material Design Windows Platform

Property	Default	Description
`$segment-button-ios-background-color`	`transparent`	Background of the segment button
`$segment-button-ios-background-color-activated`	`$toolbar-ios-active-color`	Background of the activated segment button
`$segment-button-ios-text-color`	`color-contrast($colors-ios, $segment-button-ios-background-color-activated)`	Text color of the segment button
`$segment-button-ios-transition-activated`	`100ms all linear`	Transition of the activated segment button
`$segment-button-ios-transition-hover`	`100ms all linear`	Transition of the segment button on hover
`$segment-button-ios-transition-active`	`100ms all linear`	Transition of the segment button when pressed
`$segment-button-ios-opacity-hover`	`.1`	Opacity of the segment button on hover
`$segment-button-ios-opacity-active`	`.16`	Opacity of the segment button when pressed
`$segment-button-ios-opacity-activated`	`1`	Opacity of the activated segment button
`$segment-button-ios-opacity-disabled`	`.3`	Opacity of the disabled segment button
`$segment-button-ios-border-width`	`1px`	Border width of the segment button
`$segment-button-ios-height`	`3.2rem`	Height of the segment button
`$segment-button-ios-line-height`	`3rem`	Line height of the segment button
`$segment-button-ios-font-size`	`1.3rem`	Font size of the segment button
`$segment-button-ios-border-radius`	`4px`	Border radius of the segment button
`$segment-button-ios-icon-size`	`2.6rem`	Size of an icon in the segment button
`$segment-button-ios-icon-line-height`	`2.8rem`	Line height of an icon in the segment button
`$segment-button-ios-toolbar-button-max-width`	`100px`	Max width of the segment button in a toolbar
`$segment-button-ios-toolbar-button-height`	`2.6rem`	Height of the segment button in a toolbar
`$segment-button-ios-toolbar-line-height`	`2.5rem`	Line height of the segment button in a toolbar
`$segment-button-ios-toolbar-font-size`	`1.2rem`	Font size of the segment button in a toolbar
`$segment-button-ios-toolbar-icon-size`	`2.2rem`	Size of an icon in the segment button in a toolbar
`$segment-button-ios-toolbar-icon-line-height`	`2.4rem`	Line height of an icon in the segment button in a toolbar

Property	Default	Description
`$segment-button-md-text-color-activated`	`$toolbar-md-active-color`	Text color of the activated segment button
`$segment-button-md-border-color-activated`	`$toolbar-md-active-color`	Border color of the activated segment button
`$segment-button-md-border-bottom-width`	`2px`	Width of the bottom border on the segment button
`$segment-button-md-border-bottom-color`	`rgba(#000, .10)`	Color of the bottom border on the segment button
`$segment-button-md-opacity`	`.7`	Opacity of the segment button
`$segment-button-md-opacity-activated`	`1`	Opacity of the activated segment button
`$segment-button-md-opacity-disabled`	`.3`	Opacity of the disabled segment button
`$segment-button-md-padding`	`0 6px`	Padding of the segment button
`$segment-button-md-height`	`4.2rem`	Height of the segment button
`$segment-button-md-line-height`	`4rem`	Line height of the segment button
`$segment-button-md-font-size`	`1.2rem`	Font size of the segment button
`$segment-button-md-icon-size`	`2.6rem`	Size of an icon in the segment button
`$segment-button-md-icon-line-height`	`$segment-button-md-line-height`	Line height of an icon in the segment button

Property	Default	Description
`$segment-button-wp-background-color`	`transparent`	Background of the segment button
`$segment-button-wp-text-color-activated`	`$toolbar-wp-text-color`	Text color of the activated segment button
`$segment-button-wp-padding`	`0 6px`	Padding of the segment button
`$segment-button-wp-height`	`4rem`	Height of the segment button
`$segment-button-wp-line-height`	`4rem`	Line height of the segment button
`$segment-button-wp-font-size`	`1.3rem`	Font size of the segment button
`$segment-button-wp-text-transform`	`uppercase`	Text transform of the segment button
`$segment-button-wp-font-weight`	`bold`	Font weight of the segment button
`$segment-button-wp-opacity`	`.5`	Opacity of the segment button
`$segment-button-wp-opacity-activated`	`1`	Opacity of the activated segment button
`$segment-button-wp-opacity-disabled`	`.3`	Opacity of the disabled segment button
`$segment-button-wp-icon-size`	`2.6rem`	Size of an icon in the segment button
`$segment-button-wp-icon-line-height`	`$segment-button-wp-line-height`	Line height of an icon in the segment button
`$segment-button-wp-buttons-justify-content`	`flex-start`	Position of the buttons in the segment

Segment Component Docs, Angular 2 Forms

Segment

`ion-segment`

Input Properties

Output Events

Sass Variables

Related

API

Native

General