javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): add disabled property to segment and segment button

Browse Source 
rename Sass variables for opacity for consistency

references #5639
This commit is contained in:
Brandy Carney
2016-04-27 16:09:07 -04:00
parent 5030246c5d
commit 4fca31ec36
7 changed files with 126 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ionic/components/segment/test/basic/index.ts
View File

@ -13,15 +13,20 @@ class MyApp {
modelStyle: string = 'B';
appType: string = 'free';
icons: string = 'camera';
isDisabled: boolean = true;
myForm;
constructor(fb: FormBuilder) {
this.myForm = fb.group({
mapStyle: ['hybrid', Validators.required]
mapStyle: ['active', Validators.required]
});
}
toggleDisabled() {
this.isDisabled = !this.isDisabled;
}
onSegmentChanged(segmentButton) {
console.log("Segment changed to", segmentButton.value);
}

26
ionic/components/segment/test/basic/main.html
View File

@ -32,14 +32,14 @@
<form (submit)="doSubmit($event)" [ngFormModel]="myForm">
<ion-segment ngControl="mapStyle" danger>
<ion-segment-button value="standard" class="e2eSegmentStandard">
Standard
<ion-segment-button value="active" class="e2eSegmentStandard">
Active
</ion-segment-button>
<ion-segment-button value="hybrid">
Hybrid
<ion-segment-button value="disabled" [disabled]="isDisabled">
Disabled
</ion-segment-button>
<ion-segment-button value="sat">
Satellite
<ion-segment-button value="inactive" disabled="false">
Inactive
</ion-segment-button>
</ion-segment>
</form>
@ -74,7 +74,7 @@
<ion-segment-button value="C" class="e2eSegmentModelC">
Model C
</ion-segment-button>
<ion-segment-button value="D">
<ion-segment-button value="D" [disabled]="isDisabled">
Model D
</ion-segment-button>
</ion-segment>
@ -89,6 +89,8 @@
<ion-icon name="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
<button block dark (click)="toggleDisabled()">Toggle Disabled</button>
</ion-content>
<ion-toolbar position="bottom" primary>
@ -100,7 +102,7 @@
Toolbar
</ion-segment-button>
<ion-segment-button value="top" class="e2eSegmentTopGrossing">
Default Segment
Light Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
@ -108,7 +110,7 @@
<ion-toolbar position="bottom">
<ion-segment [(ngModel)]="appType" danger>
<ion-segment-button value="paid">
Light
Default
</ion-segment-button>
<ion-segment-button value="free">
Toolbar
@ -120,15 +122,15 @@
</ion-toolbar>
<ion-toolbar position="bottom">
<ion-segment [(ngModel)]="appType" dark>
<ion-segment [(ngModel)]="appType" dark [disabled]="isDisabled">
<ion-segment-button value="paid">
Light
Default
</ion-segment-button>
<ion-segment-button value="free">
Toolbar
</ion-segment-button>
<ion-segment-button value="top">
Default Segment
Dark Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>