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

Shieeet

Browse Source
This commit is contained in:
Max Lynch
2015-05-08 15:44:41 -05:00
parent 966a02900d
commit e7534060ab
3 changed files with 55 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ionic/components/segment/segment.js
View File

@ -1,4 +1,5 @@
import {NgElement, Renderer, ElementRef, Component, DefaultValueAccessor, View, Ancestor, Optional, Decorator, Directive} from 'angular2/angular2' import {NgElement, Renderer, ElementRef, Component, DefaultValueAccessor, View, Ancestor, Optional, Decorator, Directive} from 'angular2/angular2'
import {ControlGroup, ControlDirective} from 'angular2/forms'
import {dom} from 'ionic/util'; import {dom} from 'ionic/util';
import {IonicComponent} from 'ionic/config/component' import {IonicComponent} from 'ionic/config/component'
import {Button} from 'ionic/components/button/button' import {Button} from 'ionic/components/button/button'
@ -15,22 +16,37 @@ import {Button} from 'ionic/components/button/button'
<content></content> <content></content>
</div> </div>
`, `,
directives: [Button, SegmentButton] directives: [Button, SegmentButton],
properties: {
value: 'value'
},
hostProperties: {
value: 'value'
}
}) })
export class Segment { export class Segment {
constructor( constructor(
@NgElement() ngElement:NgElement, @NgElement() ngElement:NgElement,
elementRef: ElementRef, elementRef: ElementRef,
renderer: Renderer renderer: Renderer,
cd:ControlDirective
) { ) {
this.domElement = ngElement.domElement this.domElement = ngElement.domElement
this.config = Segment.config.invoke(this) this.config = Segment.config.invoke(this)
this.elementRef = elementRef; this.elementRef = elementRef;
this.renderer = renderer; this.renderer = renderer;
this.controlDirective = cd;
console.log('Segment with cd', cd);
cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
this.buttons = []; this.buttons = [];
} }
writeValue(value) {
console.log('SEGMENT WRITE VALUE', value);
}
bindButton(segmentValue) { bindButton(segmentValue) {
this.buttons.push(segmentValue); this.buttons.push(segmentValue);
let index = this.buttons.length; let index = this.buttons.length;
@ -46,6 +62,8 @@ export class Segment {
button.setActive(false); button.setActive(false);
} }
segmentButton.setActive(true); segmentButton.setActive(true);
this.value = segmentButton.value;
} }
} }

47
ionic/components/segment/test/basic/main.html
View File

@ -1,29 +1,32 @@
<ion-content class="padding"> <ion-content class="padding">
<form (^submit)="doSubmit($event)" [control-group]="form">
<ion-segment> <ion-segment control="mapStyle">
<ion-segment-button value="standard" ion-button> <ion-segment-button value="standard" ion-button>
Standard Standard
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="hybrid" ion-button> <ion-segment-button value="hybrid" ion-button>
Hybrid Hybrid
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="sat" ion-button> <ion-segment-button value="sat" ion-button>
Satellite Satellite
</ion-segment-button> </ion-segment-button>
<!-- <!--
<button ion-button class="active" [segment-value]="standard"> <button ion-button class="active" [segment-value]="standard">
Standard Standard
</button> </button>
<button ion-button [segment-value]="hybrid"> <button ion-button [segment-value]="hybrid">
Hybrid Hybrid
</button> </button>
<button #sat ion-button [segment-value]="sat"> <button #sat ion-button [segment-value]="sat">
Satellite Satellite
</button> </button>
--> -->
</ion-segment> </ion-segment>
<button type="submit" button primary>Submit</button>
</form>
</ion-content> </ion-content>

10
ionic/components/segment/test/basic/main.js
View File

@ -9,6 +9,16 @@ import {IONIC_DIRECTIVES} from 'ionic/ionic'
}) })
class IonicApp { class IonicApp {
constructor() { constructor() {
var fb = new FormBuilder();
this.form = fb.group({
mapStyle: ['', Validators.required]
});
}
doSubmit(event) {
console.log('Submitting form', this.form.value);
event.preventDefault();
} }
} }