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

Form and aside flex

Browse Source
This commit is contained in:
Max Lynch
2015-06-01 21:30:36 -05:00
parent b7747d1620
commit ef19fabc5a
4 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
ionic/components/app/test/sink/main.html
View File

@ -1,9 +1,14 @@
<ion-aside #aside [content]="content"> <ion-aside #aside [content]="content">
<ion-list inset> <ion-toolbar>
<ion-item *ng-for="#c of components" (^click)="openPage(aside, c)"> <ion-title>Ionic 2.0</ion-title>
{{c.title}} </ion-toolbar>
</ion-item> <ion-content>
</ion-list> <ion-list inset>
<ion-item *ng-for="#c of components" (^click)="openPage(aside, c)">
{{c.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-aside> </ion-aside>
<ion-nav #content [initial]="firstPage"></ion-nav> <ion-nav #content [initial]="firstPage"></ion-nav>

26
ionic/components/app/test/sink/pages/form.js
View File

@ -3,7 +3,9 @@ import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view'; import {View} from 'angular2/src/core/annotations_impl/view';
import {List, Item, ActionMenu, Modal, ModalRef, import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
import {List, Item, Input, ActionMenu, Modal, ModalRef,
NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic'; NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
@Component({ @Component({
@ -23,11 +25,31 @@ import {List, Item, ActionMenu, Modal, ModalRef,
Ionic comes with a variety of useful from controls, like Ionic comes with a variety of useful from controls, like
text inputs, text areas, toggle switches, and sliders. text inputs, text areas, toggle switches, and sliders.
</p> </p>
<form (^submit)="doSubmit($event)" [control-group]="form">
<ion-input>
<input control="email" type="email" placeholder="Your email">
</ion-input>
<ion-input>
<input control="password" type="password" placeholder="Your password">
</ion-input>
<button ion-button primary block type="submit">Submit</button>
</form>
</ion-content> </ion-content>
`, `,
directives: [NavbarTemplate, Navbar, Content, List, Item] directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item, Input, Button]
}) })
export class FormPage { export class FormPage {
constructor() { constructor() {
var fb = new FormBuilder()
this.form = fb.group({
email: ['', Validators.required],
password: ['', Validators.required],
});
}
doSubmit(event) {
console.log('Submitted:', this.form.value);
event.preventDefault();
} }
} }

2
ionic/components/app/test/sink/pages/segment.js
View File

@ -7,8 +7,6 @@ import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/fo
import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef, import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic'; NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
console.log('imporrted', formDirectives, Segment, SegmentButton);
@Component({ @Component({
selector: 'ion-view' selector: 'ion-view'
}) })

3
ionic/components/aside/aside.scss
View File

@ -10,6 +10,9 @@ $aside-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !def
background: $aside-background; background: $aside-background;
display: flex;
flex-direction: column;
&[type=overlay] { &[type=overlay] {
z-index: $z-index-aside-overlay; z-index: $z-index-aside-overlay;