javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): fix disabled segment

Browse Source
This commit is contained in:
Manuel Mtz-Almeida
2017-03-29 20:28:25 +02:00
parent 84e84d3280
commit 156b982510
8 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/searchbar/test/basic/pages/root-page/root-page.html
View File

@ -3,7 +3,7 @@
<ion-searchbar [(ngModel)]="defaultSearch" type="tel" showCancelButton debounce="500" (ionChange)="changedInput($event)" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
<h5 padding-left> Search - Animated </h5>
<ion-searchbar animated="true" showCancelButton debounce="500" (ionChange)="changedInput($event)" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
<ion-searchbar [(ngModel)]="defaultSearch" animated="true" showCancelButton debounce="500" (ionChange)="changedInput($event)" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
<p padding-left>
defaultSearch: <b>{{ defaultSearch }}</b>

25
src/components/segment/segment-button.ts
View File

@ -46,11 +46,16 @@ import { isPresent, isTrueProperty } from '../../util/util';
host: {
'tappable': '',
'class': 'segment-button',
'role': 'button'
'role': 'button',
'[class.segment-button-disabled]': '_disabled',
'[class.segment-activated]': 'isActive',
'[attr.aria-pressed]': 'isActive'
},
encapsulation: ViewEncapsulation.None,
})
export class SegmentButton {
isActive: boolean = false;
_disabled: boolean = false;
/**
@ -63,8 +68,6 @@ export class SegmentButton {
*/
@Output() ionSelect: EventEmitter<SegmentButton> = new EventEmitter<SegmentButton>();
constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
/**
* @input {boolean} If true, the user cannot interact with this element.
*/
@ -75,15 +78,9 @@ export class SegmentButton {
set disabled(val: boolean) {
this._disabled = isTrueProperty(val);
this._setElementClass('segment-button-disabled', this._disabled);
}
/**
* @hidden
*/
_setElementClass(cssClass: string, shouldAdd: boolean) {
this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
}
constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
/**
* @hidden
@ -104,12 +101,4 @@ export class SegmentButton {
}
}
/**
* @hidden
*/
set isActive(isActive: any) {
this._renderer.setElementClass(this._elementRef.nativeElement, 'segment-activated', isActive);
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-pressed', isActive);
}
}

5
src/components/segment/segment.ios.scss
View File

@ -129,6 +129,11 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
}
}
.segment-ios.segment-disabled {
opacity: .4;
pointer-events: none;
}
.segment-ios .segment-button-disabled {
color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-disabled);

1
src/components/segment/segment.md.scss
View File

@ -77,6 +77,7 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d
}
}
.segment-md.segment-disabled,
.segment-md .segment-button-disabled {
opacity: $segment-button-md-opacity-disabled;

5
src/components/segment/segment.ts
View File

@ -62,7 +62,10 @@ import { SegmentButton } from './segment-button';
* @see [Angular 2 Forms](http://learnangular2.com/forms/)
*/
@Directive({
selector: 'ion-segment'
selector: 'ion-segment',
host: {
'[class.segment-disabled]': '_disabled'
}
})
export class Segment extends BaseInput<string> {

1
src/components/segment/segment.wp.scss
View File

@ -75,6 +75,7 @@ $segment-button-wp-buttons-justify-content: flex-start !default;
}
}
.segment-wp.segment-disabled,
.segment-wp .segment-button-disabled {
opacity: $segment-button-wp-opacity-disabled;

20
src/components/segment/test/basic/pages/home-page/home-page.html
View File

@ -33,7 +33,7 @@
<ion-segment-button value="active" class="e2eSegmentStandard">
Active
</ion-segment-button>
<ion-segment-button value="disabled" [disabled]="isDisabled">
<ion-segment-button value="disabled" [disabled]="isDisabledB">
Disabled
</ion-segment-button>
<ion-segment-button value="inactive" disabled="false">
@ -44,20 +44,20 @@
<p>
Map mode: <b>{{myForm.controls.mapStyle.value}}</b> -
<span [ngSwitch]="myForm.controls.mapStyle.value">
<span *ngSwitchCase="'standard'">
<span *ngSwitchCase="'active'">
<b>Standard</b>
</span>
<span *ngSwitchCase="'hybrid'">
<span *ngSwitchCase="'disabled'">
<b>Hybrid</b>
</span>
<span *ngSwitchCase="'sat'">
<span *ngSwitchCase="'inactive'">
<b>Satellite</b>
</span>
</span>
</p>
<hr>
<h4>Model style: NgModel</h4>
<ion-segment [(ngModel)]="modelStyle" color="dark">
<ion-segment [(ngModel)]="modelStyle" color="dark" [disabled]="isDisabledS">
<ion-segment-button value="A">
Model A
</ion-segment-button>
@ -67,12 +67,12 @@
<ion-segment-button value="C" class="e2eSegmentModelC">
Model C
</ion-segment-button>
<ion-segment-button value="D" [disabled]="isDisabled">
<ion-segment-button value="D" [disabled]="isDisabledB">
Model D
</ion-segment-button>
</ion-segment>
<p>Model Style: <b>Model {{ modelStyle }}</b></p>
<ion-segment [(ngModel)]="icons">
<ion-segment [(ngModel)]="icons" >
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
@ -80,7 +80,9 @@
<ion-icon name="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
<button ion-button block color="dark" (click)="toggleDisabled()">Toggle Disabled</button>
<button ion-button color="dark" (click)="toggleBDisabled()">Toggle Button Disabled</button>
<button ion-button color="dark" (click)="toggleSDisabled()">Toggle Segment Disabled</button>
</ion-content>
@ -112,7 +114,7 @@
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment [(ngModel)]="appType" color="dark" [disabled]="isDisabled">
<ion-segment [(ngModel)]="appType" color="dark" [disabled]="isDisabledS">
<ion-segment-button value="paid">
Default
</ion-segment-button>

12
src/components/segment/test/basic/pages/home-page/home-page.ts
View File

@ -11,7 +11,9 @@ export class HomePage {
modelStyle: string = 'B';
appType: string = 'free';
icons: string = 'camera';
isDisabled: boolean = true;
isDisabledB: boolean = true;
isDisabledS: boolean = false;
myForm: any;
constructor(fb: FormBuilder) {
@ -20,8 +22,12 @@ export class HomePage {
});
}
toggleDisabled() {
this.isDisabled = !this.isDisabled;
toggleBDisabled() {
this.isDisabledB = !this.isDisabledB;
}
toggleSDisabled() {
this.isDisabledS = !this.isDisabledS;
}
onSegmentChanged(segmentButton: SegmentButton) {