mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
Segment runs (incorrectly though)
This commit is contained in:
@ -1,7 +1,4 @@
|
|||||||
.platform-ios {
|
.segment-ios .ion-segment {
|
||||||
|
|
||||||
.ion-segment {
|
|
||||||
|
|
||||||
> button,
|
> button,
|
||||||
> [button] {
|
> [button] {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
@ -29,4 +26,3 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
@ -4,6 +4,7 @@ import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/a
|
|||||||
import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
|
import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
|
||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||||
|
|
||||||
|
import {NgControl} from 'angular2/forms';
|
||||||
import {ControlGroup, ControlDirective} from 'angular2/forms'
|
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'
|
||||||
@ -22,7 +23,7 @@ export class Segment {
|
|||||||
static get config() {
|
static get config() {
|
||||||
return {
|
return {
|
||||||
selector: 'ion-segment',
|
selector: 'ion-segment',
|
||||||
appInjector: [ControlDirective],
|
appInjector: [ NgControl ],
|
||||||
properties: [
|
properties: [
|
||||||
'value'
|
'value'
|
||||||
],
|
],
|
||||||
@ -34,18 +35,17 @@ export class Segment {
|
|||||||
}
|
}
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
|
ngControl: NgControl,
|
||||||
elementRef: ElementRef,
|
elementRef: ElementRef,
|
||||||
renderer: Renderer,
|
renderer: Renderer
|
||||||
cd:ControlDirective
|
|
||||||
) {
|
) {
|
||||||
console.log('ELEMENT REF INJECT', elementRef);
|
console.log('ELEMENT REF INJECT', elementRef, ngControl);
|
||||||
this.domElement = elementRef.domElement
|
this.domElement = elementRef.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;
|
this.ngControl = ngControl;
|
||||||
|
this.ngControl.valueAccessor = this;
|
||||||
cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
|
|
||||||
|
|
||||||
this.buttons = [];
|
this.buttons = [];
|
||||||
}
|
}
|
||||||
@ -117,14 +117,14 @@ export class Segment {
|
|||||||
'value'
|
'value'
|
||||||
],
|
],
|
||||||
host: {
|
host: {
|
||||||
'(click)': 'buttonClicked($event)'
|
'(click)': 'buttonClicked($event)',
|
||||||
|
'class.active': 'isActive'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class SegmentButton {
|
export class SegmentButton {
|
||||||
constructor(
|
constructor(
|
||||||
@Ancestor() segment: Segment,
|
@Ancestor() segment: Segment,
|
||||||
elementRef: ElementRef,
|
elementRef: ElementRef,
|
||||||
renderer: Renderer
|
|
||||||
) {
|
) {
|
||||||
this.domElement = elementRef.domElement
|
this.domElement = elementRef.domElement
|
||||||
this.segment = segment;
|
this.segment = segment;
|
||||||
@ -133,12 +133,7 @@ export class SegmentButton {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setActive(isActive) {
|
setActive(isActive) {
|
||||||
// TODO: No domElement
|
this.isActive = isActive;
|
||||||
if(isActive) {
|
|
||||||
this.domElement.classList.add('active');
|
|
||||||
} else {
|
|
||||||
this.domElement.classList.remove('active');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
buttonClicked(event) {
|
buttonClicked(event) {
|
||||||
|
@ -2,13 +2,13 @@
|
|||||||
<form (^submit)="doSubmit($event)" [control-group]="form">
|
<form (^submit)="doSubmit($event)" [control-group]="form">
|
||||||
|
|
||||||
<ion-segment control="mapStyle">
|
<ion-segment control="mapStyle">
|
||||||
<ion-segment-button value="standard" ion-button>
|
<ion-segment-button value="standard" button>
|
||||||
Standard
|
Standard
|
||||||
</ion-segment-button>
|
</ion-segment-button>
|
||||||
<ion-segment-button value="hybrid" ion-button>
|
<ion-segment-button value="hybrid" button>
|
||||||
Hybrid
|
Hybrid
|
||||||
</ion-segment-button>
|
</ion-segment-button>
|
||||||
<ion-segment-button value="sat" ion-button>
|
<ion-segment-button value="sat" button>
|
||||||
Satellite
|
Satellite
|
||||||
</ion-segment-button>
|
</ion-segment-button>
|
||||||
<!--
|
<!--
|
||||||
|
@ -31,7 +31,8 @@ export class IonicView extends View {
|
|||||||
Icon,
|
Icon,
|
||||||
|
|
||||||
// Form elements
|
// Form elements
|
||||||
//Checkbox, Switch, Label, Input, Segment, SegmentButton,
|
Segment, SegmentButton,
|
||||||
|
//Checkbox, Switch, Label, Input
|
||||||
//RadioGroup, RadioButton, SearchBar,
|
//RadioGroup, RadioButton, SearchBar,
|
||||||
|
|
||||||
// Nav
|
// Nav
|
||||||
@ -42,4 +43,3 @@ export class IonicView extends View {
|
|||||||
super(config);
|
super(config);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user