mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 04:53:58 +08:00
fix(segment): add disabled property to segment and segment button
rename Sass variables for opacity for consistency references #5639
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
import {Directive, Component, ElementRef, Renderer, Optional, EventEmitter, Input, Output, HostListener, ContentChildren, QueryList, ViewEncapsulation} from 'angular2/core';
|
||||
import {NgControl} from 'angular2/common';
|
||||
|
||||
import {isPresent} from '../../util/util';
|
||||
import {isTrueProperty, isPresent} from '../../util/util';
|
||||
|
||||
|
||||
/**
|
||||
@ -56,6 +56,7 @@ import {isPresent} from '../../util/util';
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class SegmentButton {
|
||||
private _disabled: boolean = false;
|
||||
|
||||
/**
|
||||
* @input {string} the value of the segment button. Required.
|
||||
@ -69,6 +70,26 @@ export class SegmentButton {
|
||||
|
||||
constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@Input()
|
||||
get disabled(): boolean {
|
||||
return this._disabled;
|
||||
}
|
||||
|
||||
set disabled(val: boolean) {
|
||||
this._disabled = isTrueProperty(val);
|
||||
this.setCssClass('segment-button-disabled', this._disabled);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
setCssClass(cssClass: string, shouldAdd: boolean) {
|
||||
this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* On click of a SegmentButton
|
||||
@ -146,6 +167,7 @@ export class SegmentButton {
|
||||
selector: 'ion-segment'
|
||||
})
|
||||
export class Segment {
|
||||
private _disabled: boolean = false;
|
||||
|
||||
/**
|
||||
* @private
|
||||
@ -170,6 +192,25 @@ export class Segment {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@Input()
|
||||
get disabled(): boolean {
|
||||
return this._disabled;
|
||||
}
|
||||
|
||||
set disabled(val: boolean) {
|
||||
this._disabled = isTrueProperty(val);
|
||||
|
||||
if (this._buttons) {
|
||||
let buttons = this._buttons.toArray();
|
||||
for (let button of buttons) {
|
||||
button.setCssClass('segment-button-disabled', this._disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Write a new value to the element.
|
||||
@ -199,6 +240,11 @@ export class Segment {
|
||||
if (isPresent(this.value)) {
|
||||
button.isActive = (button.value === this.value);
|
||||
}
|
||||
|
||||
if (isTrueProperty(this._disabled)) {
|
||||
button.setCssClass('segment-button-disabled', this._disabled);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user