mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
popup and radio docs wip
This commit is contained in:
@ -120,7 +120,7 @@ export class Checkbox extends Ion {
|
|||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
* Angular2 Forms API method called by the the view (NgControl) to register
|
* Angular2 Forms API method called by the the view (NgControl) to register
|
||||||
* the onTouched event handler that marks model as touched.
|
* the onTouched event handler that marks model (Control) as touched.
|
||||||
* @param {Function} fn onTouched event handler.
|
* @param {Function} fn onTouched event handler.
|
||||||
*/
|
*/
|
||||||
registerOnTouched(fn) { this.onTouched = fn; }
|
registerOnTouched(fn) { this.onTouched = fn; }
|
||||||
|
@ -6,10 +6,19 @@ import {Animation} from '../../animations/animation';
|
|||||||
import * as util from 'ionic/util';
|
import * as util from 'ionic/util';
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class Popup extends Overlay {
|
export class Popup extends Overlay {
|
||||||
|
|
||||||
popup(context, opts={}) {
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {TODO} context TODO
|
||||||
|
* @param {TODO} [opts={}] TODO
|
||||||
|
* @returns {TODO} TODO
|
||||||
|
*/
|
||||||
|
popup(context, opts={}) {
|
||||||
return new Promise((resolve, reject)=> {
|
return new Promise((resolve, reject)=> {
|
||||||
let defaults = {
|
let defaults = {
|
||||||
enterAnimation: 'popup-pop-in',
|
enterAnimation: 'popup-pop-in',
|
||||||
@ -23,6 +32,12 @@ export class Popup extends Overlay {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {TODO} context TODO
|
||||||
|
* @param {TODO} [opts={}] TODO
|
||||||
|
* @returns {TODO} TODO
|
||||||
|
*/
|
||||||
alert(context={}, opts={}) {
|
alert(context={}, opts={}) {
|
||||||
if (typeof context === 'string') {
|
if (typeof context === 'string') {
|
||||||
context = {
|
context = {
|
||||||
@ -48,6 +63,12 @@ export class Popup extends Overlay {
|
|||||||
return this.popup(context, opts);
|
return this.popup(context, opts);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {TODO} context TODO
|
||||||
|
* @param {TODO} [opts={}] TODO
|
||||||
|
* @returns {TODO} TODO
|
||||||
|
*/
|
||||||
confirm(context={}, opts={}) {
|
confirm(context={}, opts={}) {
|
||||||
if (typeof context === 'string') {
|
if (typeof context === 'string') {
|
||||||
context = {
|
context = {
|
||||||
@ -77,6 +98,12 @@ export class Popup extends Overlay {
|
|||||||
return this.popup(context, opts);
|
return this.popup(context, opts);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {TODO} [context={}] TODO
|
||||||
|
* @param {TODO} [opts={}] TODO
|
||||||
|
* @returns {TODO} TODO
|
||||||
|
*/
|
||||||
prompt(context={}, opts={}) {
|
prompt(context={}, opts={}) {
|
||||||
if (typeof context === 'string') {
|
if (typeof context === 'string') {
|
||||||
context = {
|
context = {
|
||||||
@ -112,6 +139,12 @@ export class Popup extends Overlay {
|
|||||||
return this.popup(context, opts);
|
return this.popup(context, opts);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {TODO} context TODO
|
||||||
|
* @param {TODO} [opts={}] TODO
|
||||||
|
* @returns {TODO} TODO
|
||||||
|
*/
|
||||||
get(handle) {
|
get(handle) {
|
||||||
if (handle) {
|
if (handle) {
|
||||||
return this.getByHandle(handle, OVERLAY_TYPE);
|
return this.getByHandle(handle, OVERLAY_TYPE);
|
||||||
|
@ -6,7 +6,9 @@ import {Ion} from '../ion';
|
|||||||
import {TapClick} from '../button/button';
|
import {TapClick} from '../button/button';
|
||||||
import {ListHeader} from '../list/list';
|
import {ListHeader} from '../list/list';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A radio group component.
|
||||||
|
*/
|
||||||
@IonicDirective({
|
@IonicDirective({
|
||||||
selector: 'ion-radio-group',
|
selector: 'ion-radio-group',
|
||||||
host: {
|
host: {
|
||||||
@ -19,10 +21,17 @@ import {ListHeader} from '../list/list';
|
|||||||
export class RadioGroup extends Ion {
|
export class RadioGroup extends Ion {
|
||||||
radios: Array<RadioButton> = [];
|
radios: Array<RadioButton> = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {ElementRef} elementRef TODO
|
||||||
|
* @param {IonicConfig} config TODO
|
||||||
|
* @param {NgControl=} ngControl TODO
|
||||||
|
* @param {QueryList<ListHeader>} headerQuery TODO
|
||||||
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
elementRef: ElementRef,
|
elementRef: ElementRef,
|
||||||
config: IonicConfig,
|
config: IonicConfig,
|
||||||
@Optional() cd: NgControl,
|
@Optional() ngControl: NgControl,
|
||||||
@Query(ListHeader) private headerQuery: QueryList<ListHeader>
|
@Query(ListHeader) private headerQuery: QueryList<ListHeader>
|
||||||
) {
|
) {
|
||||||
super(elementRef, config);
|
super(elementRef, config);
|
||||||
@ -31,7 +40,7 @@ export class RadioGroup extends Ion {
|
|||||||
this.onChange = (_) => {};
|
this.onChange = (_) => {};
|
||||||
this.onTouched = (_) => {};
|
this.onTouched = (_) => {};
|
||||||
|
|
||||||
if (cd) cd.valueAccessor = this;
|
if (ngControl) ngControl.valueAccessor = this;
|
||||||
}
|
}
|
||||||
|
|
||||||
onInit() {
|
onInit() {
|
||||||
@ -44,6 +53,10 @@ export class RadioGroup extends Ion {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register the specified radio button with the radio group.
|
||||||
|
* @param {RadioButton} radio The radio button to register.
|
||||||
|
*/
|
||||||
registerRadio(radio) {
|
registerRadio(radio) {
|
||||||
radio.id = radio.id || ('radio-' + this.id + '-' + (++this.radioIds));
|
radio.id = radio.id || ('radio-' + this.id + '-' + (++this.radioIds));
|
||||||
this.radios.push(radio);
|
this.radios.push(radio);
|
||||||
@ -54,6 +67,10 @@ export class RadioGroup extends Ion {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update which radio button in the group is checked, unchecking all others.
|
||||||
|
* @param {RadioButton} checkedRadio The radio button to check.
|
||||||
|
*/
|
||||||
update(checkedRadio) {
|
update(checkedRadio) {
|
||||||
this.value = checkedRadio.value;
|
this.value = checkedRadio.value;
|
||||||
this.activeId = checkedRadio.id;
|
this.activeId = checkedRadio.id;
|
||||||
@ -65,6 +82,12 @@ export class RadioGroup extends Ion {
|
|||||||
this.onChange(this.value);
|
this.onChange(this.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @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) {
|
writeValue(value) {
|
||||||
this.value = value;
|
this.value = value;
|
||||||
for (let radio of this.radios) {
|
for (let radio of this.radios) {
|
||||||
@ -72,14 +95,27 @@ export class RadioGroup extends Ion {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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; }
|
registerOnChange(fn) { this.onChange = fn; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* Angular2 Forms API method called by the the view (NgControl) to register
|
||||||
|
* the onTouched event handler that marks the model (Control) as touched.
|
||||||
|
* @param {Function} fn onTouched event handler.
|
||||||
|
*/
|
||||||
registerOnTouched(fn) { this.onTouched = fn; }
|
registerOnTouched(fn) { this.onTouched = fn; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A radio button component.
|
||||||
|
*/
|
||||||
@IonicComponent({
|
@IonicComponent({
|
||||||
selector: 'ion-radio',
|
selector: 'ion-radio',
|
||||||
properties: [
|
properties: [
|
||||||
@ -109,6 +145,13 @@ export class RadioGroup extends Ion {
|
|||||||
'</div>'
|
'</div>'
|
||||||
})
|
})
|
||||||
export class RadioButton extends Ion {
|
export class RadioButton extends Ion {
|
||||||
|
/**
|
||||||
|
* Radio button constructor.
|
||||||
|
* @param {RadioGroup=} group The parent radio group, if any.
|
||||||
|
* @param {ElementRef} elementRef TODO
|
||||||
|
* @param {IonicConfig} config TODO
|
||||||
|
* @param {TapClick} tapClick TODO
|
||||||
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
@Host() @Optional() group: RadioGroup,
|
@Host() @Optional() group: RadioGroup,
|
||||||
elementRef: ElementRef,
|
elementRef: ElementRef,
|
||||||
@ -135,6 +178,10 @@ export class RadioButton extends Ion {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update the checked state of this radio button.
|
||||||
|
* TODO: Call this toggle? Since unchecks as well
|
||||||
|
*/
|
||||||
check() {
|
check() {
|
||||||
this.checked = !this.checked;
|
this.checked = !this.checked;
|
||||||
this.group.update(this);
|
this.group.update(this);
|
||||||
|
Reference in New Issue
Block a user