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

refactor(demos): forms and input

Browse Source
This commit is contained in:
Drew Rygh
2015-11-04 19:37:41 -06:00
parent 19ce43a182
commit a766c20d65
50 changed files with 306 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
demos/component-docs/labels/basic/pages.ts Normal file
View File

@ -0,0 +1,24 @@
import {FORM_DIRECTIVES, FormBuilder, forwardRef, Validators, Control, ControlGroup} from 'angular2/angular2';
import {Page} from 'ionic/ionic';
import {AndroidAttribute} from '../../helpers';
@Page({
templateUrl: 'labels/basic/template.html',
providers: [FormBuilder],
directives: [forwardRef(() => AndroidAttribute)]
})
export class BasicPage {
constructor() {
this.form = new ControlGroup({
firstName: new Control("", Validators.required),
lastName: new Control("", Validators.required)
});
}
processForm(event) {
// TODO: display input in a popup
console.log(event);
}
}

19
demos/component-docs/labels/basic/template.html Normal file
View File

@ -0,0 +1,19 @@
<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
<ion-title>Forms</ion-title>
</ion-navbar>
<ion-content class="has-header components-demo">
<form (submit)="processForm($event)" [ng-form-model]="form">
<ion-list>
<ion-input>
<input ng-control="firstName" type="text" placeholder="First Name">
</ion-input>
<ion-input>
<input ng-control="lastName" type="text" placeholder="Last Name">
</ion-input>
</ion-list>
<div padding>
<button block type="submit">Create Account</button>
</div>
</form>
</ion-content>

13
demos/component-docs/labels/fixed-inline/pages.ts Normal file
View File

@ -0,0 +1,13 @@
import {Page} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2';
import {AndroidAttribute} from '../../helpers';
@Page({
templateUrl: 'labels/fixed-inline/template.html',
directives: [forwardRef(() => AndroidAttribute)]
})
export class FixedInlinePage {
constructor() {
}
}

26
demos/component-docs/labels/fixed-inline/template.html Normal file
View File

@ -0,0 +1,26 @@
<ion-navbar *navbar hide-back-button class="android-attr">
<ion-title>Fixed Labels</ion-title>
</ion-navbar>
<ion-content class="has-header components-demo">
<ion-list>
<ion-input fixed-label>
<ion-label>Username</ion-label>
<input type="text" value="">
</ion-input>
<ion-input fixed-label>
<ion-label>Password</ion-label>
<input type="password" value="">
</ion-input>
</ion-list>
<div padding>
<button primary block>Sign In</button>
</div>
</ion-content>

13
demos/component-docs/labels/floating/pages.ts Normal file
View File

@ -0,0 +1,13 @@
import {Page} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2';
import {AndroidAttribute} from '../../helpers';
@Page({
templateUrl: 'labels/floating/template.html',
directives: [forwardRef(() => AndroidAttribute)]
})
export class FloatingPage {
constructor() {
}
}

25
demos/component-docs/labels/floating/template.html Normal file
View File

@ -0,0 +1,25 @@
<ion-navbar *navbar hide-back-button class="android-attr">
<ion-title>Floating Labels</ion-title>
</ion-navbar>
<ion-content class="has-header components-demo">
<ion-list>
<ion-input floating-label>
<ion-label>Username</ion-label>
<input type="text" value="">
</ion-input>
<ion-input floating-label>
<ion-label>Password</ion-label>
<input type="password" value="">
</ion-input>
</ion-list>
<div padding>
<button primary block>Sign In</button>
</div>
</ion-content>

13
demos/component-docs/labels/inline/pages.ts Normal file
View File

@ -0,0 +1,13 @@
import {Page} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2';
import {AndroidAttribute} from '../../helpers';
@Page({
templateUrl: 'labels/inline/template.html',
directives: [forwardRef(() => AndroidAttribute)]
})
export class InlinePage {
constructor() {
}
}

25
demos/component-docs/labels/inline/template.html Normal file
View File

@ -0,0 +1,25 @@
<ion-navbar *navbar hide-back-button class="android-attr">
<ion-title>Inline Labels</ion-title>
</ion-navbar>
<ion-content class="has-header components-demo">
<ion-list>
<ion-input>
<ion-label>Username</ion-label>
<input type="text" value="">
</ion-input>
<ion-input>
<ion-label>Password</ion-label>
<input type="password" value="">
</ion-input>
</ion-list>
<div padding>
<button primary block>Sign In</button>
</div>
</ion-content>

13
demos/component-docs/labels/inset/pages.ts Normal file
View File

@ -0,0 +1,13 @@
import {Page} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2';
import {AndroidAttribute} from '../../helpers';
@Page({
templateUrl: 'labels/inset/template.html',
directives: [forwardRef(() => AndroidAttribute)]
})
export class InsetPage {
constructor() {
}
}

23
demos/component-docs/labels/inset/template.html Normal file
View File

@ -0,0 +1,23 @@
<ion-navbar *navbar hide-back-button class="android-attr">
<ion-title>Inset Labels</ion-title>
</ion-navbar>
<ion-content class="has-header components-demo">
<ion-list inset>
<ion-input>
<ion-label>Username</ion-label>
<input type="text" value="">
</ion-input>
<ion-input>
<ion-label>Password</ion-label>
<input type="password" value="">
</ion-input>
</ion-list>
<div padding>
<button primary block>Sign In</button>
</div>
</ion-content>

7
demos/component-docs/labels/labels.ts Normal file
View File

@ -0,0 +1,7 @@
export * from './basic/pages';
export * from './fixed-inline/pages';
export * from './floating/pages';
export * from './inline/pages';
export * from './inset/pages';
export * from './placeholder/pages';
export * from './stacked/pages';

13
demos/component-docs/labels/placeholder/pages.ts Normal file
View File

@ -0,0 +1,13 @@
import {Page} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2';
import {AndroidAttribute} from '../../helpers';
@Page({
templateUrl: 'labels/placeholder/template.html',
directives: [forwardRef(() => AndroidAttribute)]
})
export class PlaceholderPage {
constructor() {
}
}

23
demos/component-docs/labels/placeholder/template.html Normal file
View File

@ -0,0 +1,23 @@
<ion-navbar *navbar hide-back-button class="android-attr">
<ion-title>Placeholders</ion-title>
</ion-navbar>
<ion-content class="has-header components-demo">
<ion-list>
<ion-input>
<input type="text" placeholder="Username">
</ion-input>
<ion-input>
<input type="password" placeholder="Password">
</ion-input>
</ion-list>
<div padding>
<button primary block>Sign In</button>
</div>
</ion-content>

13
demos/component-docs/labels/stacked/pages.ts Normal file
View File

@ -0,0 +1,13 @@
import {Page} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2';
import {AndroidAttribute} from '../../helpers';
@Page({
templateUrl: 'labels/stacked/template.html',
directives: [forwardRef(() => AndroidAttribute)]
})
export class StackedPage {
constructor() {
}
}

24
demos/component-docs/labels/stacked/template.html Normal file
View File

@ -0,0 +1,24 @@
<ion-navbar *navbar hide-back-button class="android-attr">
<ion-title>Stacked Labels</ion-title>
</ion-navbar>
<ion-content class="has-header components-demo">
<ion-list>
<ion-input stacked-label>
<ion-label>Username</ion-label>
<input type="text">
</ion-input>
<ion-input stacked-label>
<ion-label>Password</ion-label>
<input type="password">
</ion-input>
</ion-list>
<div padding>
<button primary block>Sign In</button>
</div>
</ion-content>