mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
0f57b1f64f
Updated the API docs for segment to include change & click, and updated some of the function descriptions, removed an unused function. Added the change & click events to the test case.
126 lines
3.2 KiB
HTML
126 lines
3.2 KiB
HTML
<ion-toolbar>
|
|
<ion-segment id="segment" [(ngModel)]="relationship" (change)="onSegmentChanged($event)">
|
|
<ion-segment-button value="friends" (click)="onSegmentClicked('friends')" class="e2eSegmentFriends">
|
|
Friends
|
|
</ion-segment-button>
|
|
<ion-segment-button value="enemies" (click)="onSegmentClicked('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)" [ngFormModel]="myForm">
|
|
<ion-segment ngControl="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 [ngSwitch]="myForm.controls.mapStyle.value">
|
|
<span *ngSwitchWhen="'standard'">
|
|
<b>Standard</b>
|
|
</span>
|
|
<span *ngSwitchWhen="'hybrid'">
|
|
<b>Hybrid</b>
|
|
</span>
|
|
<span *ngSwitchWhen="'sat'">
|
|
<b>Satellite</b>
|
|
</span>
|
|
</span>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<h4>Model style: NgModel</h4>
|
|
|
|
<ion-segment [(ngModel)]="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 [(ngModel)]="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 [(ngModel)]="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 [(ngModel)]="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>
|