Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Segment

ion-segment

Improve this doc

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's ngModel or FormBuilder API. For an overview on how FormBuilder works, checkout Angular 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" (ionChange)="segmentChanged($event)">
    <ion-segment-button value="friends">
      Friends
    </ion-segment-button>
    <ion-segment-button value="enemies">
      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>

Sass Variables

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-top 0

Padding top of the segment button

$segment-button-md-padding-end 6px

Padding end of the segment button

$segment-button-md-padding-bottom $segment-button-md-padding-top

Padding bottom of the segment button

$segment-button-md-padding-start $segment-button-md-padding-end

Padding start 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-top 0

Padding top of the segment button

$segment-button-wp-padding-end 6px

Padding end of the segment button

$segment-button-wp-padding-bottom $segment-button-wp-padding-top

Padding bottom of the segment button

$segment-button-wp-padding-start $segment-button-wp-padding-end

Padding start 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

Related

Segment Component Docs, Angular Forms

API

Native

General