javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into WIP-api-demos

Browse Source
This commit is contained in:
Drew Rygh
2015-12-16 11:13:03 -06:00
parent adf62fdc41 364f9e12ae
commit 068f3ceb29
185 changed files with 2645 additions and 1828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
ionic/components/text-input/label.ts
View File

@ -1,8 +1,11 @@
import {Directive, Optional, ElementRef, Renderer} from 'angular2/angular2';
import {Directive, Optional, ElementRef, Renderer} from 'angular2/core';
import {Config} from '../../config/config';
import {TextInput} from './text-input';
import {pointerCoord, hasPointerMoved} from '../../util/dom';
import {Form} from '../../util/form';
/**
* @name Label
* @description
@ -39,15 +42,19 @@ export class Label {
constructor(
config: Config,
@Optional() container: TextInput,
private form: Form,
private elementRef: ElementRef,
private renderer: Renderer
) {
this.scrollAssist = config.get('scrollAssist');
if (!this.id) {
this.id = 'lbl-' + (++labelIds);
}
this.container = container;
container && container.registerLabel(this);
}
ngOnInit() {
if (!this.id) {
this.id = 'lbl-' + this.form.nextId();
}
this.container && this.container.registerLabel(this);
}
/**
@ -88,5 +95,3 @@ export class Label {
}
}
let labelIds = -1;

10
ionic/components/text-input/test/floating-labels/index.ts
View File

@ -4,4 +4,12 @@ import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class E2EApp {}
class E2EApp {
constructor() {
this.myValues = {
value1: 'Dynamic Input',
value2: 'Dynamic Textarea'
};
}
}

8
ionic/components/text-input/test/floating-labels/main.html
View File

@ -8,10 +8,11 @@
<ion-input floating-label>
<ion-label>Floating Label 1</ion-label>
<input type="text">
<input [(ngModel)]='myValues.value1' type="text">
</ion-input>
Value: {{ myValues.value1 }}
<ion-input floating-label class="input-has-value">
<ion-input floating-label>
<ion-label>Floating Label 2</ion-label>
<input value="Has Value" type="text">
</ion-input>
@ -23,8 +24,9 @@
<ion-input floating-label>
<ion-label primary>Floating Label 4</ion-label>
<textarea></textarea>
<textarea [(ngModel)]='myValues.value2'></textarea>
</ion-input>
Value: {{ myValues.value2 }}
<ion-input floating-label>
<ion-label secondary>Floating Label 5</ion-label>

2
ionic/components/text-input/test/form-inputs/index.ts
View File

@ -1,5 +1,5 @@
import {App} from 'ionic/ionic';
import {FormBuilder, Validators} from 'angular2/angular2';
import {FormBuilder, Validators} from 'angular2/common';
@App({

10
ionic/components/text-input/test/form-inputs/main.html
View File

@ -4,12 +4,12 @@
<ion-content>
<form (ng-submit)="submit($event)" [ng-form-model]="loginForm" #mf="ngForm" novalidate>
<form (ng-submit)="submit($event)" [ngFormModel]="loginForm" #mf="ngForm" novalidate>
<ion-list>
<ion-input>
<ion-label>Email:</ion-label>
<input [(ng-model)]="login.email" ng-control="email" type="email" placeholder="Required" required>
<input [(ngModel)]="login.email" ngControl="email" type="email" placeholder="Required" required>
<button clear item-right>
<icon mail></icon>
</button>
@ -17,7 +17,7 @@
<ion-input>
<ion-label>Username:</ion-label>
<input [(ng-model)]="login.username" ng-control="username" type="text" placeholder="Optional">
<input [(ngModel)]="login.username" ngControl="username" type="text" placeholder="Optional">
<button clear item-right>
<icon person></icon>
</button>
@ -25,7 +25,7 @@
<ion-input>
<ion-label>Password:</ion-label>
<input [(ng-model)]="login.password" ng-control="password" type="password" placeholder="Required" required>
<input [(ngModel)]="login.password" ngControl="password" type="password" placeholder="Required" required>
<button clear item-right>
<icon lock></icon>
</button>
@ -33,7 +33,7 @@
<ion-input>
<ion-label>Comments:</ion-label>
<textarea [(ng-model)]="login.comments" ng-control="comments" placeholder="Required" required>Comment value</textarea>
<textarea [(ngModel)]="login.comments" ngControl="comments" placeholder="Required" required>Comment value</textarea>
</ion-input>
<ion-item [hidden]="submitted == false || mf.form.valid">

1
ionic/components/text-input/test/inline-labels/index.ts
View File

@ -7,7 +7,6 @@ import {App} from 'ionic/ionic';
class E2EApp {
submit(ev) {
debugger
}
}

10
ionic/components/text-input/test/inline-labels/main.html
View File

@ -76,6 +76,16 @@
<textarea>KA-CHOW!</textarea>
</ion-input>
<ion-input>
<ion-label>Beginning:</ion-label>
<input value="2005-07-30" type="date">
</ion-input>
<ion-input>
<ion-label>Time:</ion-label>
<input value="12:00pm" type="time">
</ion-input>
</ion-list>
<ion-input>

104
ionic/components/text-input/test/input-focus/main.html
View File

@ -65,12 +65,20 @@
<textarea placeholder="Placeholder Text"></textarea>
</ion-input>
<ion-toggle>
Toggle
</ion-toggle>
<ion-input>
<ion-label>More Info:</ion-label>
<input placeholder="Placeholder Text" type="text">
<icon flag item-right></icon>
</ion-input>
<ion-checkbox>
Checkbox
</ion-checkbox>
<ion-input>
<ion-label>Score:</ion-label>
<input value="10" type="number">
@ -100,95 +108,21 @@
Item
</ion-item>
</ion-list>
<!--
<ion-item>
Item
</ion-item>
<ion-list radio-group>
<ion-item>
Item
</ion-item>
<ion-list-header>
Radios
</ion-list-header>
<ion-item>
Item
</ion-item>
<ion-radio>
Radio 1
</ion-radio>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item> -->
<ion-radio>
Radio 2
</ion-radio>
</ion-list>

4
ionic/components/text-input/text-input.scss
View File

@ -17,6 +17,10 @@ $text-input-textarea-resize: none !default;
pointer-events: none;
}
input.item-input:-webkit-autofill {
background-color: transparent;
}
// Scroll Assist
// --------------------------------------------------

17
ionic/components/text-input/text-input.ts
View File

@ -1,4 +1,5 @@
import {Component, Directive, Attribute, NgIf, forwardRef, Host, Optional, ElementRef, Renderer, Attribute} from 'angular2/angular2';
import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer} from 'angular2/core';
import {NgIf, NgControl} from 'angular2/common';
import {NavController} from '../nav/nav-controller';
import {Config} from '../../config/config';
@ -59,7 +60,7 @@ import {Platform} from '../../platform/platform';
template:
'<div class="item-inner">' +
'<ng-content></ng-content>' +
'<input [type]="type" aria-hidden="true" scroll-assist *ng-if="scrollAssist">' +
'<input [type]="type" aria-hidden="true" scroll-assist *ngIf="scrollAssist">' +
'</div>',
directives: [NgIf, forwardRef(() => InputScrollAssist)]
})
@ -105,7 +106,7 @@ export class TextInput {
* This function is used to add the Angular css classes associated with inputs in forms
*/
addNgClass(className) {
return this.input.elementRef.nativeElement.classList.contains(className);
this.input && this.input.elementRef.nativeElement.classList.contains(className);
}
/**
@ -132,7 +133,7 @@ export class TextInput {
/**
* @private
*/
ngOnInit() {
ngAfterViewInit() {
if (this.input && this.label) {
// if there is an input and an label
// then give the label an ID
@ -455,7 +456,7 @@ export class TextInput {
* @private
*/
@Directive({
selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=tel]',
selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=tel],input[type=date],input[type=datetime],input[type=datetime-local],input[type=week],input[type=time]',
inputs: ['value'],
host: {
'(focus)': 'focusChange(true)',
@ -469,7 +470,8 @@ export class TextInputElement {
@Attribute('type') type: string,
elementRef: ElementRef,
renderer: Renderer,
@Optional() wrapper: TextInput
@Optional() wrapper: TextInput,
@Optional() ngControl: NgControl
) {
this.type = type;
this.elementRef = elementRef;
@ -484,9 +486,12 @@ export class TextInputElement {
renderer.setElementClass(elementRef, 'item-input', true);
wrapper.registerInput(this);
}
if (ngControl) this.ngControl = ngControl;
}
ngOnInit() {
if (this.ngControl) this.value = this.ngControl.value;
this.wrapper && this.wrapper.hasValue(this.value);
}