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

Seg

Browse Source
This commit is contained in:
Max Lynch
2015-06-25 11:03:48 -05:00
parent e4d3bf7365
commit ad3ab542d0
2 changed files with 27 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@
<ion-content> <ion-content>
<ion-list inset> <ion-list inset>
<ion-item *ng-for="#c of components" (^click)="openPage(aside, c)"> <ion-item *ng-for="#c of components" (^click)="openPage(aside, c)">
{{c.title}} <span>{{c.title}}</span>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>

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

@ -2,17 +2,17 @@ import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from '
import {Ancestor} from 'angular2/src/core/annotations_impl/visibility'; 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 {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms'; import {FormBuilder, Validators, formDirectives, Control, ControlGroup} from 'angular2/forms';
import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef, import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic'; NavbarTemplate, Navbar, NavController, Content, IonicView} from 'ionic/ionic';
@Component({ @Component({
selector: 'ion-view' selector: 'ion-view'
}) })
@View({ @IonicView({
template: ` template: `
<ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar> <ion-navbar *navbar><ion-title>Segment</ion-title></ion-navbar>
<ion-content class="padding"> <ion-content class="padding">
<h2>Segment</h2> <h2>Segment</h2>
@ -25,33 +25,21 @@ import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
the map display between street, hybrid, and satellite. the map display between street, hybrid, and satellite.
</p> </p>
<form (^submit)="doSubmit($event)" [control-group]="form"> <form (^submit)="doSubmit($event)">
<ion-segment control="mapStyle"> <div ng-control-group="form">
<ion-segment-button value="standard" ion-button> <ion-segment [ng-form-control]="mapStyle">
Standard <ion-segment-button value="standard" button>
</ion-segment-button> Standard
<ion-segment-button value="hybrid" ion-button> </ion-segment-button>
Hybrid <ion-segment-button value="hybrid" button>
</ion-segment-button> Hybrid
<ion-segment-button value="sat" ion-button> </ion-segment-button>
Satellite <ion-segment-button value="sat" button>
</ion-segment-button> Satellite
<!-- </ion-segment-button>
<button ion-button class="active" [segment-value]="standard"> </ion-segment>
Standard </div>
</button>
<button ion-button [segment-value]="hybrid">
Hybrid
</button>
<button #sat ion-button [segment-value]="sat">
Satellite
</button>
-->
</ion-segment>
<button type="submit" button primary>Submit</button> <button type="submit" button primary>Submit</button>
</form> </form>
@ -70,14 +58,21 @@ import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
</div> </div>
</ion-content> </ion-content>
`, `,
directives: [NavbarTemplate, Navbar, Content, List, Item, Segment, SegmentButton, formDirectives] directives: [formDirectives]
}) })
export class SegmentPage { export class SegmentPage {
constructor() { constructor() {
/*
var fb = new FormBuilder(); var fb = new FormBuilder();
this.form = fb.group({ this.form = fb.group({
mapStyle: ['hybrid', Validators.required] mapStyle: ['hybrid', Validators.required]
}); });
*/
this.mapStyle = new Control("hybrid", Validators.required);
this.form = new ControlGroup({
"mapStyle": this.mapStyle
});
} }
} }