diff --git a/ionic/components/text-input/label.ts b/ionic/components/text-input/label.ts index 1e899a6a82..4ab39bfae4 100644 --- a/ionic/components/text-input/label.ts +++ b/ionic/components/text-input/label.ts @@ -1,4 +1,4 @@ -import {Directive, Optional} from 'angular2/angular2'; +import {Directive, Optional, ElementRef, Renderer} from 'angular2/angular2'; import {Config} from '../../config/config'; import {TextInput} from './text-input'; @@ -35,7 +35,12 @@ import {pointerCoord, hasPointerMoved} from '../../util/dom'; }) export class Label { - constructor(config: Config, @Optional() container: TextInput) { + constructor( + config: Config, + @Optional() container: TextInput, + private elementRef: ElementRef, + private renderer: Renderer + ) { this.scrollAssist = config.get('scrollAssist'); if (!this.id) { this.id = 'lbl-' + (++labelIds); @@ -74,6 +79,10 @@ export class Label { } } + addClass(className) { + this.renderer.setElementClass(this.elementRef, className, true); + } + } let labelIds = -1; diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts index ccca96552d..045175f6f6 100644 --- a/ionic/components/text-input/text-input.ts +++ b/ionic/components/text-input/text-input.ts @@ -1,4 +1,4 @@ -import {Component, Directive, NgIf, forwardRef, Host, Optional, ElementRef, Renderer, Attribute} from 'angular2/angular2'; +import {Component, Directive, Attribute, NgIf, forwardRef, Host, Optional, ElementRef, Renderer, Attribute} from 'angular2/angular2'; import {NavController} from '../nav/nav-controller'; import {Config} from '../../config/config'; @@ -73,7 +73,9 @@ export class TextInput { app: IonicApp, platform: Platform, @Optional() @Host() scrollView: Content, - @Optional() navCtrl: NavController + @Optional() navCtrl: NavController, + @Attribute('floating-label') isFloating: string, + @Attribute('stacked-label') isStacked: string ) { this.renderer = renderer; @@ -82,6 +84,7 @@ export class TextInput { this.type = 'text'; this.lastTouch = 0; + this.displayType = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : null)); this.app = app; this.elementRef = elementRef; @@ -105,6 +108,9 @@ export class TextInput { * @private */ registerInput(textInputElement) { + if (this.displayType) { + textInputElement.addClass(this.displayType + '-input'); + } this.input = textInputElement; this.type = textInputElement.type || 'text'; } @@ -113,6 +119,9 @@ export class TextInput { * @private */ registerLabel(label) { + if (this.displayType) { + label.addClass(this.displayType + '-label'); + } this.label = label; } @@ -543,6 +552,10 @@ export class TextInputElement { return dom.hasFocus(this.getNativeElement()); } + addClass(className) { + this.renderer.setElementClass(this.elementRef, className, true); + } + getNativeElement() { return this.elementRef.nativeElement; }