card and checkbox docs wip

This commit is contained in:
Tim Lancina
2015-08-28 13:55:09 -07:00
parent f8fc17dc42
commit 0078e4d4b7
2 changed files with 51 additions and 7 deletions

View File

@ -12,7 +12,9 @@ import {IonicConfig} from '../../config/config';
import {IonicComponent, IonicView} from '../../config/annotations';
import {TapClick} from '../button/button';
/**
* Checkbox control value accessor.
*/
@IonicComponent({
selector: 'ion-checkbox',
properties: [
@ -41,10 +43,17 @@ import {TapClick} from '../button/button';
'</ion-item-content>'
})
export class Checkbox extends Ion {
/**
* TODO
* @param {ElementRef} elementRef TODO
* @param {IonicConfig} ionicConfig TODO
* @param {NgControl=} ngControl TODO
* @param {TapClick=} tapClick TODO
*/
constructor(
elementRef: ElementRef,
config: IonicConfig,
@Optional() cd: NgControl,
@Optional() ngControl: NgControl,
tapClick: TapClick
) {
super(elementRef, config);
@ -55,21 +64,32 @@ export class Checkbox extends Ion {
this.onChange = (_) => {};
this.onTouched = (_) => {};
this.cd = cd;
this.ngControl = ngControl;
if (cd) cd.valueAccessor = this;
if (ngControl) ngControl.valueAccessor = this;
}
/**
* TODO
*/
onInit() {
super.onInit();
this.labelId = 'label-' + this.id;
}
/**
* Toggle the checked state of the checkbox. Calls onChange to pass the
* updated checked state to the model (Control).
*/
toggle() {
this.checked = !this.checked;
this.onChange(this.checked);
}
/**
* Click event handler to toggle the checkbox checked state.
* @param {MouseEvent} ev The click event.
*/
click(ev) {
if (this.tapClick.allowClick(ev)) {
ev.preventDefault();
@ -78,13 +98,30 @@ export class Checkbox extends Ion {
}
}
/**
* @private
* Angular2 Forms API method called by the model (Control) on change to update
* the checked value.
* https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34
*/
writeValue(value) {
this.checked = value;
}
// Used by the view to update the model (Control)
// Up to us to call it in update()
/**
* @private
* Angular2 Forms API method called by the view (NgControl) to register the
* onChange event handler that updates the model (Control).
* https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27
* @param {Function} fn the onChange event handler.
*/
registerOnChange(fn) { this.onChange = fn; }
/**
* @private
* Angular2 Forms API method called by the the view (NgControl) to register
* the onTouched event handler that marks model as touched.
* @param {Function} fn onTouched event handler.
*/
registerOnTouched(fn) { this.onTouched = fn; }
}