javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/label/label.scss
View File

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

18
src/components/select/select.ts
View File

@ -387,6 +387,21 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
return (this._multi ? this._texts : this._texts.join()); 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 * @private
*/ */
@ -445,6 +460,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
console.debug('select, writeValue', val); console.debug('select, writeValue', val);
this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]); this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
this._updOpts(); this._updOpts();
this.checkHasValue(val);
} }
/** /**
@ -464,6 +480,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
fn(val); fn(val);
this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]); this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
this._updOpts(); this._updOpts();
this.checkHasValue(val);
this.onTouched(); this.onTouched();
}; };
} }
@ -481,6 +498,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
console.debug('select, onChange w/out formControlName', val); console.debug('select, onChange w/out formControlName', val);
this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]); this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
this._updOpts(); this._updOpts();
this.checkHasValue(val);
this.onTouched(); this.onTouched();
} }

16
src/components/select/test/multiple-value/main.html
View File

@ -83,4 +83,20 @@
</ion-list> </ion-list>
</form> </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> </ion-content>

8
src/components/select/test/single-value/main.html
View File

@ -137,4 +137,12 @@
</ion-item> </ion-item>
</form> </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> </ion-content>