fix(select): make floating labels work for ion-select

fixes #10751
This commit is contained in:
Ibrahim Ghazal
2017-03-14 12:42:12 +03:00
parent 446e468b59
commit 8c483f2529
4 changed files with 42 additions and 4 deletions

View File

@ -65,7 +65,3 @@ ion-label[floating] {
max-width: 100%;
}
.item-select ion-label[floating] {
transform: translate3d(0, 0, 0) scale(.8);
}

View File

@ -387,6 +387,21 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
return (this._multi ? this._texts : this._texts.join());
}
/**
* @private
*/
checkHasValue(inputValue: any) {
if (this._item) {
let hasValue: boolean;
if (Array.isArray(inputValue)) {
hasValue = inputValue.length > 0;
} else {
hasValue = !isBlank(inputValue);
}
this._item.setElementClass('input-has-value', hasValue);
}
}
/**
* @private
*/
@ -445,6 +460,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
console.debug('select, writeValue', val);
this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
this._updOpts();
this.checkHasValue(val);
}
/**
@ -464,6 +480,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
fn(val);
this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
this._updOpts();
this.checkHasValue(val);
this.onTouched();
};
}
@ -481,6 +498,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
console.debug('select, onChange w/out formControlName', val);
this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
this._updOpts();
this.checkHasValue(val);
this.onTouched();
}

View File

@ -83,4 +83,20 @@
</ion-list>
</form>
<ion-item>
<ion-label floating>Floating label</ion-label>
<ion-select multiple="true">
<ion-option value="bacon">Bacon</ion-option>
<ion-option value="olives">Black Olives</ion-option>
<ion-option value="xcheese">Extra Cheese</ion-option>
<ion-option value="peppers">Green Peppers</ion-option>
<ion-option value="mushrooms">Mushrooms</ion-option>
<ion-option value="onions">Onions</ion-option>
<ion-option value="pepperoni">Pepperoni</ion-option>
<ion-option value="pineapple">Pineapple</ion-option>
<ion-option value="sausage">Sausage</ion-option>
<ion-option value="Spinach">Spinach</ion-option>
</ion-select>
</ion-item>
</ion-content>

View File

@ -137,4 +137,12 @@
</ion-item>
</form>
<ion-item>
<ion-label floating>Floating label</ion-label>
<ion-select>
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>
</ion-content>