mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
refactor(input): split TextInput and ItemInput components
Make it easier to start adding other inputs, like select
This commit is contained in:
Adam Bradley
@ -0,0 +1 @@
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {}
|
||||
@ -0,0 +1,79 @@
|
||||
|
||||
<ion-toolbar><ion-title>Fixed Inline Label Text Input</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<ion-label>To</ion-label>
|
||||
<input value="Text 1" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<ion-label>CC</ion-label>
|
||||
<input value="Text 2" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<ion-label>From</ion-label>
|
||||
<input value="Text 3" type="text">
|
||||
<button clear item-right>
|
||||
<ion-icon name="power"></ion-icon>
|
||||
</button>
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<ion-label>Comments</ion-label>
|
||||
<textarea>Comment value</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<ion-icon name="globe" item-left></ion-icon>
|
||||
<ion-label>Website</ion-label>
|
||||
<input value="http://ionic.io/" type="url">
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<ion-icon name="mail" item-left></ion-icon>
|
||||
<ion-label>Email</ion-label>
|
||||
<input value="email6@email.com" type="email">
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<ion-icon name="call" item-left></ion-icon>
|
||||
<ion-label>Phone</ion-label>
|
||||
<input value="867-5309" type="tel">
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<ion-icon name="contact" item-left></ion-icon>
|
||||
<input placeholder="Placeholder Text" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<ion-label>Score</ion-label>
|
||||
<input value="10" type="number">
|
||||
<button outline item-right>Update</button>
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<ion-label>First Name</ion-label>
|
||||
<input value="Buzz" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<ion-label>Last Name</ion-label>
|
||||
<input value="Lightyear" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<ion-icon name="create" item-left></ion-icon>
|
||||
<ion-label>Message</ion-label>
|
||||
<textarea>To infinity and beyond</textarea>
|
||||
</ion-input>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
1
ionic/components/item-input/test/floating-labels/e2e.ts
Normal file
1
ionic/components/item-input/test/floating-labels/e2e.ts
Normal file
@ -0,0 +1 @@
|
||||
|
||||
15
ionic/components/item-input/test/floating-labels/index.ts
Normal file
15
ionic/components/item-input/test/floating-labels/index.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {
|
||||
constructor() {
|
||||
this.myValues = {
|
||||
value1: 'Dynamic Input',
|
||||
value2: 'Dynamic Textarea'
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
63
ionic/components/item-input/test/floating-labels/main.html
Normal file
63
ionic/components/item-input/test/floating-labels/main.html
Normal file
@ -0,0 +1,63 @@
|
||||
|
||||
<ion-toolbar><ion-title>Floating Label Text Input</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list inset>
|
||||
|
||||
<ion-input floating-label>
|
||||
<ion-label>Floating Label 1</ion-label>
|
||||
<input [(ngModel)]='myValues.value1' type="text">
|
||||
</ion-input>
|
||||
Value: {{ myValues.value1 }}
|
||||
|
||||
<ion-input floating-label>
|
||||
<ion-label>Floating Label 2</ion-label>
|
||||
<input value="Has Value" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input floating-label>
|
||||
<ion-label>Floating Label 3</ion-label>
|
||||
<input type="number">
|
||||
</ion-input>
|
||||
|
||||
<ion-input floating-label>
|
||||
<ion-label primary>Floating Label 4</ion-label>
|
||||
<textarea [(ngModel)]='myValues.value2'></textarea>
|
||||
</ion-input>
|
||||
Value: {{ myValues.value2 }}
|
||||
|
||||
<ion-input floating-label>
|
||||
<ion-label secondary>Floating Label 5</ion-label>
|
||||
<input type="url">
|
||||
</ion-input>
|
||||
|
||||
<ion-input floating-label>
|
||||
<ion-label danger>Floating Label 6</ion-label>
|
||||
<input type="email">
|
||||
</ion-input>
|
||||
|
||||
<ion-input floating-label>
|
||||
<ion-label>Floating Label 7</ion-label>
|
||||
<textarea></textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input floating-label>
|
||||
<ion-label>Floating Label 8</ion-label>
|
||||
<input type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input floating-label>
|
||||
<ion-label>Floating Label 9</ion-label>
|
||||
<input type="number">
|
||||
</ion-input>
|
||||
|
||||
<ion-input floating-label>
|
||||
<ion-label>Floating Label 10</ion-label>
|
||||
<textarea></textarea>
|
||||
</ion-input>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
0
ionic/components/item-input/test/form-inputs/e2e.ts
Normal file
0
ionic/components/item-input/test/form-inputs/e2e.ts
Normal file
35
ionic/components/item-input/test/form-inputs/index.ts
Normal file
35
ionic/components/item-input/test/form-inputs/index.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
import {FormBuilder, Validators} from 'angular2/common';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {
|
||||
constructor(fb: FormBuilder) {
|
||||
this.loginForm = fb.group({
|
||||
email: ["", Validators.required],
|
||||
username: [""],
|
||||
password: ["", Validators.required],
|
||||
comments: ["", Validators.required]
|
||||
});
|
||||
|
||||
this.login = {
|
||||
email: 'help@ionic.io',
|
||||
username: 'admin'
|
||||
};
|
||||
|
||||
this.user = {
|
||||
username: 'asdf',
|
||||
password: '82'
|
||||
};
|
||||
|
||||
this.submitted = false;
|
||||
}
|
||||
|
||||
submit(ev, value) {
|
||||
console.log("Submitted", value);
|
||||
this.submitted = true;
|
||||
}
|
||||
|
||||
}
|
||||
88
ionic/components/item-input/test/form-inputs/main.html
Normal file
88
ionic/components/item-input/test/form-inputs/main.html
Normal file
@ -0,0 +1,88 @@
|
||||
|
||||
<ion-toolbar><ion-title>Inline Label Text Input</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-content>
|
||||
|
||||
<form [ngFormModel]="loginForm" #mf="ngForm" novalidate>
|
||||
|
||||
<ion-list>
|
||||
<ion-input floating-label clearInput>
|
||||
<ion-label>Email</ion-label>
|
||||
<input [(ngModel)]="login.email" ngControl="email" type="email" required>
|
||||
</ion-input>
|
||||
|
||||
<ion-input floating-label clearInput>
|
||||
<ion-label>Username</ion-label>
|
||||
<input [(ngModel)]="login.username" ngControl="username" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input floating-label clearInput>
|
||||
<ion-label>Password</ion-label>
|
||||
<input [(ngModel)]="login.password" ngControl="password" type="password" required>
|
||||
</ion-input>
|
||||
|
||||
<ion-input floating-label clearInput>
|
||||
<ion-label>Comments</ion-label>
|
||||
<textarea [(ngModel)]="login.comments" ngControl="comments" required>Comment value</textarea>
|
||||
</ion-input>
|
||||
|
||||
<div padding-left padding-right>
|
||||
<button block (click)="submit($event, login)">Login</button>
|
||||
</div>
|
||||
<div padding-left>
|
||||
<b>Valid form?:</b> {{ mf.form.valid }}<br>
|
||||
<b>Submitted form?:</b> {{ submitted }}<br>
|
||||
<b>Email:</b> {{ login.email }}<br>
|
||||
<b>Username:</b> {{ login.username }}<br>
|
||||
<b>Password:</b> {{ login.password }}<br>
|
||||
<b>Comments:</b> {{ login.comments }}
|
||||
</div>
|
||||
</ion-list>
|
||||
</form>
|
||||
|
||||
<form (ngSubmit)="submit($event, user)" #lf="ngForm">
|
||||
<ion-list>
|
||||
<ion-input floating-label clearInput>
|
||||
<ion-label>Username</ion-label>
|
||||
<input type="text" [(ngModel)]="user.username" ngControl="username" required>
|
||||
</ion-input>
|
||||
<ion-input floating-label clearInput>
|
||||
<ion-label>Password</ion-label>
|
||||
<input type="password" [(ngModel)]="user.password" ngControl="password" required>
|
||||
</ion-input>
|
||||
<div padding-left padding-right clearInput>
|
||||
<button block type="submit">Login</button>
|
||||
</div>
|
||||
<div padding-left>
|
||||
<b>Valid form?:</b> {{ lf.form.valid }}<br>
|
||||
<b>Submitted form?:</b> {{ submitted }}<br>
|
||||
<b>Username:</b> {{ user.username }}<br>
|
||||
<b>Password:</b> {{ user.password }}<br>
|
||||
</div>
|
||||
</ion-list>
|
||||
</form>
|
||||
|
||||
<ion-list>
|
||||
<ion-input clearInput>
|
||||
<ion-label>Email</ion-label>
|
||||
<input type="email" required>
|
||||
</ion-input>
|
||||
|
||||
<ion-input clearInput>
|
||||
<ion-label>Username</ion-label>
|
||||
<input type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input clearInput>
|
||||
<ion-label>Password</ion-label>
|
||||
<input type="password" required>
|
||||
</ion-input>
|
||||
|
||||
<ion-input clearInput>
|
||||
<ion-label>Comments</ion-label>
|
||||
<textarea required>Comment value</textarea>
|
||||
</ion-input>
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
1
ionic/components/item-input/test/inline-labels/e2e.ts
Normal file
1
ionic/components/item-input/test/inline-labels/e2e.ts
Normal file
@ -0,0 +1 @@
|
||||
|
||||
12
ionic/components/item-input/test/inline-labels/index.ts
Normal file
12
ionic/components/item-input/test/inline-labels/index.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {
|
||||
|
||||
submit(ev) {
|
||||
}
|
||||
|
||||
}
|
||||
99
ionic/components/item-input/test/inline-labels/main.html
Normal file
99
ionic/components/item-input/test/inline-labels/main.html
Normal file
@ -0,0 +1,99 @@
|
||||
|
||||
<ion-toolbar><ion-title>Inline Label Text Input</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-content>
|
||||
|
||||
<form (ng-submit)="submit($event)">
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>To:</ion-label>
|
||||
<input value="Text 1" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>CC:</ion-label>
|
||||
<input value="Text 2" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>From:</ion-label>
|
||||
<input value="Text 3" type="text">
|
||||
<button clear item-right>
|
||||
<ion-icon name="power"></ion-icon>
|
||||
</button>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>Comments:</ion-label>
|
||||
<textarea>Comment value</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="globe" item-left></ion-icon>
|
||||
<ion-label>Website:</ion-label>
|
||||
<input value="http://ionic.io/" type="url">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="mail" item-left></ion-icon>
|
||||
<ion-label>Email:</ion-label>
|
||||
<input value="email6@email.com" type="email">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="create" item-left></ion-icon>
|
||||
<ion-label>Feedback:</ion-label>
|
||||
<textarea placeholder="Placeholder Text"></textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>More Info:</ion-label>
|
||||
<input placeholder="Placeholder Text" type="text">
|
||||
<ion-icon name="flag" item-right></ion-icon>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>Score:</ion-label>
|
||||
<input value="10" type="number">
|
||||
<button outline item-right>Update</button>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>First Name:</ion-label>
|
||||
<input value="Lightning" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>Last Name:</ion-label>
|
||||
<input value="McQueen" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>Message:</ion-label>
|
||||
<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>
|
||||
<ion-label>No List</ion-label>
|
||||
<input value="ListFreeeee" type="text">
|
||||
</ion-input>
|
||||
<textarea></textarea>
|
||||
|
||||
</form>
|
||||
|
||||
</ion-content>
|
||||
14
ionic/components/item-input/test/input-focus/index.ts
Normal file
14
ionic/components/item-input/test/input-focus/index.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html',
|
||||
config: {
|
||||
scrollAssist: true
|
||||
}
|
||||
})
|
||||
class E2EApp {
|
||||
reload() {
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
129
ionic/components/item-input/test/input-focus/main.html
Normal file
129
ionic/components/item-input/test/input-focus/main.html
Normal file
@ -0,0 +1,129 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>Inset Focus</ion-title>
|
||||
<ion-buttons end>
|
||||
<button (click)="reload()">
|
||||
Reload
|
||||
</button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-content>
|
||||
|
||||
<p>Paragraph text with a <a href="#">link</a>.</p>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>Text 1:</ion-label>
|
||||
<input type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-item>
|
||||
Item with button right
|
||||
<button item-right>Button 1</button>
|
||||
</ion-item>
|
||||
|
||||
<ion-input>
|
||||
<ion-label id="my-label1">Text 2:</ion-label>
|
||||
<input value="value" type="text">
|
||||
</ion-input>
|
||||
|
||||
<button ion-item>
|
||||
Button Item
|
||||
</button>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>Text 3:</ion-label>
|
||||
<input type="text">
|
||||
<button clear item-right>
|
||||
<ion-icon name="power"></ion-icon>
|
||||
</button>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>Comments:</ion-label>
|
||||
<textarea>Comment value</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="globe" item-left></ion-icon>
|
||||
<ion-label>Website:</ion-label>
|
||||
<input value="http://ionic.io/" type="url">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="mail" item-left></ion-icon>
|
||||
<ion-label>Email:</ion-label>
|
||||
<input value="email6@email.com" type="email">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="create" item-left></ion-icon>
|
||||
<ion-label>Feedback:</ion-label>
|
||||
<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">
|
||||
<ion-icon name="flag" item-right></ion-icon>
|
||||
</ion-input>
|
||||
|
||||
<ion-checkbox>
|
||||
Checkbox
|
||||
</ion-checkbox>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>Score:</ion-label>
|
||||
<input value="10" type="number">
|
||||
<button outline item-right>Update</button>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>First Name:</ion-label>
|
||||
<input value="Lightning" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>Last Name:</ion-label>
|
||||
<input value="McQueen" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>Message:</ion-label>
|
||||
<textarea>KA-CHOW!</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-item>
|
||||
Item
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
Item
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<ion-list radio-group>
|
||||
|
||||
<ion-list-header>
|
||||
Radios
|
||||
</ion-list-header>
|
||||
|
||||
<ion-radio value="1">
|
||||
Radio 1
|
||||
</ion-radio>
|
||||
|
||||
<ion-radio value="2">
|
||||
Radio 2
|
||||
</ion-radio>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
1
ionic/components/item-input/test/inset-inputs/e2e.ts
Normal file
1
ionic/components/item-input/test/inset-inputs/e2e.ts
Normal file
@ -0,0 +1 @@
|
||||
|
||||
7
ionic/components/item-input/test/inset-inputs/index.ts
Normal file
7
ionic/components/item-input/test/inset-inputs/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {}
|
||||
71
ionic/components/item-input/test/inset-inputs/main.html
Normal file
71
ionic/components/item-input/test/inset-inputs/main.html
Normal file
@ -0,0 +1,71 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>Inset Inputs</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-content class="outer-content">
|
||||
|
||||
|
||||
<ion-list inset>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="search" item-left></ion-icon>
|
||||
<input value="Input inside an inset list" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="call" item-left></ion-icon>
|
||||
<input type="tel">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="mail" item-left></ion-icon>
|
||||
<input placeholder="Placeholder text" type="text">
|
||||
</ion-input>
|
||||
|
||||
</ion-list>
|
||||
|
||||
|
||||
<ion-list inset>
|
||||
|
||||
<ion-input inset>
|
||||
<ion-icon name="search" item-left></ion-icon>
|
||||
<input value="Inset input inside an inset list" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input inset>
|
||||
<input value="Inset input inside an inset list" type="text">
|
||||
<ion-icon name="mic" item-right></ion-icon>
|
||||
</ion-input>
|
||||
|
||||
</ion-list>
|
||||
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-input inset>
|
||||
<ion-icon name="search" item-left></ion-icon>
|
||||
<input value="Inset input inside a list" type="text">
|
||||
<button outline item-right>Search</button>
|
||||
</ion-input>
|
||||
|
||||
</ion-list>
|
||||
|
||||
|
||||
<ion-card>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="search" item-left></ion-icon>
|
||||
<input value="Input inside a card" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<input value="Input inside a card" type="text">
|
||||
<ion-icon name="mic" item-right></ion-icon>
|
||||
</ion-input>
|
||||
|
||||
</ion-card>
|
||||
|
||||
|
||||
</ion-content>
|
||||
@ -0,0 +1 @@
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {}
|
||||
@ -0,0 +1,59 @@
|
||||
|
||||
<ion-toolbar><ion-title>Placeholder Label Text Input</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-content class="outer-content">
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-input>
|
||||
<input placeholder="Text Input Placeholder" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<input placeholder="Text Input Placeholder" value="Text Input Value" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="call" item-left></ion-icon>
|
||||
<input placeholder="Text Input Placeholder" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="call" item-left></ion-icon>
|
||||
<input placeholder="Text Input Placeholder" value="Text Input Value" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<textarea placeholder="Textarea Placeholder"></textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<textarea placeholder="Textarea Placeholder">Textarea value</textarea>
|
||||
</ion-input>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<ion-list inset>
|
||||
|
||||
<ion-input>
|
||||
<input placeholder="Inset List: Text Input Placeholder" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<input placeholder="Inset List: Text Input Placeholder" value="Inset List: Text Input Value" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="call" item-left></ion-icon>
|
||||
<input placeholder="Inset List: Text Input Placeholder" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-icon name="call" item-left></ion-icon>
|
||||
<input placeholder="Inset List: Text Input Placeholder" value="Inset List: Text Input Value" type="text">
|
||||
</ion-input>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
1
ionic/components/item-input/test/stacked-labels/e2e.ts
Normal file
1
ionic/components/item-input/test/stacked-labels/e2e.ts
Normal file
@ -0,0 +1 @@
|
||||
|
||||
7
ionic/components/item-input/test/stacked-labels/index.ts
Normal file
7
ionic/components/item-input/test/stacked-labels/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {}
|
||||
61
ionic/components/item-input/test/stacked-labels/main.html
Normal file
61
ionic/components/item-input/test/stacked-labels/main.html
Normal file
@ -0,0 +1,61 @@
|
||||
|
||||
<ion-toolbar><ion-title>Stacked Label Text Input</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-input stacked-label>
|
||||
<ion-label>Label 1</ion-label>
|
||||
<input value="Text 1" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input stacked-label>
|
||||
<ion-label>Label 2</ion-label>
|
||||
<input value="Text 2" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input stacked-label>
|
||||
<ion-label>Label 3</ion-label>
|
||||
<input value="3" type="number">
|
||||
</ion-input>
|
||||
|
||||
<ion-input stacked-label>
|
||||
<ion-label>Label 4</ion-label>
|
||||
<textarea>Textarea 4</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input stacked-label>
|
||||
<ion-label>Label 5</ion-label>
|
||||
<input value="http://url5.com/" type="url">
|
||||
</ion-input>
|
||||
|
||||
<ion-input stacked-label>
|
||||
<ion-label>Label 6</ion-label>
|
||||
<input value="email6@email.com" type="email">
|
||||
</ion-input>
|
||||
|
||||
<ion-input stacked-label>
|
||||
<ion-label>Label 7</ion-label>
|
||||
<textarea>Textarea 7</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input stacked-label>
|
||||
<ion-label>Label 8</ion-label>
|
||||
<input value="Text 8" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input stacked-label>
|
||||
<ion-label>Label 9</ion-label>
|
||||
<input value="9" type="number">
|
||||
</ion-input>
|
||||
|
||||
<ion-input stacked-label>
|
||||
<ion-label>Label 10</ion-label>
|
||||
<textarea>Textarea 10</textarea>
|
||||
</ion-input>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
135
ionic/components/item-input/test/text-input.spec.ts
Normal file
135
ionic/components/item-input/test/text-input.spec.ts
Normal file
@ -0,0 +1,135 @@
|
||||
import {ItemInput} from 'ionic/ionic';
|
||||
|
||||
export function run() {
|
||||
|
||||
it('should scroll, top and bottom below safe area, no room to scroll', () => {
|
||||
let inputOffsetTop = 350;
|
||||
let inputOffsetHeight = 35;
|
||||
let scrollViewDimensions = {
|
||||
contentTop: 100,
|
||||
contentHeight: 700,
|
||||
scrollTop: 30,
|
||||
scrollHeight: 700
|
||||
};
|
||||
let keyboardHeight = 400;
|
||||
let platformHeight = 800;
|
||||
|
||||
let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
|
||||
|
||||
expect(scrollData.scrollAmount).toBe(-205);
|
||||
expect(scrollData.scrollTo).toBe(235);
|
||||
expect(scrollData.scrollPadding).toBe(550);
|
||||
});
|
||||
|
||||
it('should scroll, top and bottom below safe area, room to scroll', () => {
|
||||
let inputOffsetTop = 350;
|
||||
let inputOffsetHeight = 35;
|
||||
let scrollViewDimensions = {
|
||||
contentTop: 100,
|
||||
contentHeight: 700,
|
||||
scrollTop: 30,
|
||||
scrollHeight: 1000
|
||||
};
|
||||
let keyboardHeight = 400;
|
||||
let platformHeight = 800;
|
||||
|
||||
let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
|
||||
|
||||
expect(scrollData.scrollAmount).toBe(-205);
|
||||
expect(scrollData.scrollTo).toBe(235);
|
||||
expect(scrollData.scrollPadding).toBe(0);
|
||||
});
|
||||
|
||||
it('should scroll, top above safe', () => {
|
||||
// Input top within safe area, bottom below safe area, room to scroll
|
||||
let inputOffsetTop = 100;
|
||||
let inputOffsetHeight = 33;
|
||||
let scrollViewDimensions = {
|
||||
contentTop: 100,
|
||||
contentHeight: 700,
|
||||
scrollTop: 250,
|
||||
scrollHeight: 700
|
||||
};
|
||||
let keyboardHeight = 400;
|
||||
let platformHeight = 800;
|
||||
|
||||
let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
|
||||
|
||||
expect(scrollData.scrollAmount).toBe(150);
|
||||
expect(scrollData.scrollTo).toBe(100);
|
||||
expect(scrollData.scrollPadding).toBe(0);
|
||||
});
|
||||
|
||||
it('should scroll, top in safe, bottom below safe, below more than top in, not enough padding', () => {
|
||||
// Input top within safe area, bottom below safe area, room to scroll
|
||||
let inputOffsetTop = 100;
|
||||
let inputOffsetHeight = 320;
|
||||
let scrollViewDimensions = {
|
||||
contentTop: 100,
|
||||
contentHeight: 700,
|
||||
scrollTop: 20,
|
||||
scrollHeight: 700
|
||||
};
|
||||
let keyboardHeight = 400;
|
||||
let platformHeight = 800;
|
||||
|
||||
let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
|
||||
|
||||
expect(scrollData.scrollAmount).toBe(-80);
|
||||
expect(scrollData.scrollTo).toBe(100);
|
||||
expect(scrollData.scrollPadding).toBe(550);
|
||||
});
|
||||
|
||||
it('should scroll, top in safe, bottom below safe, below more than top in, enough padding', () => {
|
||||
// Input top within safe area, bottom below safe area, room to scroll
|
||||
let inputOffsetTop = 20;
|
||||
let inputOffsetHeight = 330;
|
||||
let scrollViewDimensions = {
|
||||
contentTop: 100,
|
||||
scrollTop: 0,
|
||||
};
|
||||
let keyboardHeight = 400;
|
||||
let platformHeight = 800;
|
||||
|
||||
let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
|
||||
|
||||
expect(scrollData.scrollAmount).toBe(-20);
|
||||
expect(scrollData.scrollTo).toBe(20);
|
||||
expect(scrollData.scrollPadding).toBe(0);
|
||||
});
|
||||
|
||||
it('should scroll, top in safe, bottom below safe, below less than top in, enough padding', () => {
|
||||
// Input top within safe area, bottom below safe area, room to scroll
|
||||
let inputOffsetTop = 250;
|
||||
let inputOffsetHeight = 80; // goes 30px below safe area
|
||||
let scrollViewDimensions = {
|
||||
contentTop: 100,
|
||||
scrollTop: 0,
|
||||
};
|
||||
let keyboardHeight = 400;
|
||||
let platformHeight = 800;
|
||||
|
||||
let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
|
||||
|
||||
expect(scrollData.scrollAmount).toBe(-180);
|
||||
expect(scrollData.scrollTo).toBe(180);
|
||||
expect(scrollData.scrollPadding).toBe(0);
|
||||
});
|
||||
|
||||
it('should not scroll, top in safe, bottom in safe', () => {
|
||||
// Input top within safe area, bottom within safe area
|
||||
let inputOffsetTop = 100;
|
||||
let inputOffsetHeight = 50;
|
||||
let scrollViewDimensions = {
|
||||
contentTop: 100,
|
||||
scrollTop: 0,
|
||||
keyboardTop: 400
|
||||
};
|
||||
let keyboardHeight = 400;
|
||||
let platformHeight = 800;
|
||||
|
||||
let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
|
||||
expect(scrollData.scrollAmount).toBe(0);
|
||||
});
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user