ionic-framework/e2e/segment/basic/main.html

<ion-toolbar>
  <ion-segment [(ng-model)]="relationship">
    <ion-segment-button value="friends" class="e2eSegmentFriends">
      Friends
    </ion-segment-button>
    <ion-segment-button value="enemies">
      Enemies
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons end>
    <button>
      <icon search></icon>
    </button>
  </ion-buttons>
  <ion-segment secondary>
    <ion-segment-button>
      Something
    </ion-segment-button>
    <ion-segment-button>
      Else
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

<ion-content padding>
  <div>Are we friends or enemies? <b>{{ relationship }}</b></div>

  <h4>Map mode: NgControl</h4>

  <form (submit)="doSubmit($event)" [ng-form-model]="myForm">
    <ion-segment ng-control="mapStyle" danger>
      <ion-segment-button value="standard" class="e2eSegmentStandard">
        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>

  <p>
    Map mode: <b>{{myForm.controls.mapStyle.value}}</b> -

    <span [ng-switch]="myForm.controls.mapStyle.value">
      <span *ng-switch-when="'standard'">
        <b>Standard</b>
      </span>
      <span *ng-switch-when="'hybrid'">
        <b>Hybrid</b>
      </span>
      <span *ng-switch-when="'sat'">
        <b>Satellite</b>
      </span>
    </span>
  </p>

  <hr>

  <h4>Model style: NgModel</h4>

  <ion-segment [(ng-model)]="modelStyle" dark>
    <ion-segment-button value="A">
      Model A
    </ion-segment-button>
    <ion-segment-button value="B">
      Model B
    </ion-segment-button>
    <ion-segment-button value="C" class="e2eSegmentModelC">
      Model C
    </ion-segment-button>
    <ion-segment-button value="D">
      Model D
    </ion-segment-button>
  </ion-segment>

  <p>Model Style: <b>Model {{ modelStyle }}</b></p>
</ion-content>

<ion-toolbar position="bottom" primary>
  <ion-segment [(ng-model)]="appType" light>
    <ion-segment-button value="paid">
      Primary
    </ion-segment-button>
    <ion-segment-button value="free">
      Toolbar
    </ion-segment-button>
    <ion-segment-button value="top" class="e2eSegmentTopGrossing">
      Default Segment
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

<ion-toolbar position="bottom">
  <ion-segment [(ng-model)]="appType" danger>
    <ion-segment-button value="paid">
      Light
    </ion-segment-button>
    <ion-segment-button value="free">
      Toolbar
    </ion-segment-button>
    <ion-segment-button value="top" class="e2eSegmentTopGrossing">
      Danger Segment
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

<ion-toolbar position="bottom">
  <ion-segment [(ng-model)]="appType" dark>
    <ion-segment-button value="paid">
      Light
    </ion-segment-button>
    <ion-segment-button value="free">
      Toolbar
    </ion-segment-button>
    <ion-segment-button value="top" class="e2eSegmentTopGrossing">
      Default Segment
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>