| 1 | import { ElementRef, OnDestroy, Renderer } from '@angular/core';
|
| 2 | import { Config } from '../../config/config';
|
| 3 | import { Form, IonicTapInput } from '../../util/form';
|
| 4 | import { BaseInput } from '../../util/base-input';
|
| 5 | import { Item } from '../item/item';
|
| 6 | /**
|
| 7 | * @name Checkbox
|
| 8 | * @module ionic
|
| 9 | *
|
| 10 | * @description
|
| 11 | * The Checkbox is a simple component styled based on the mode. It can be
|
| 12 | * placed in an `ion-item` or used as a stand-alone checkbox.
|
| 13 | *
|
| 14 | * See the [Angular Docs](https://angular.io/docs/ts/latest/guide/forms.html)
|
| 15 | * for more info on forms and inputs.
|
| 16 | *
|
| 17 | *
|
| 18 | * @usage
|
| 19 | * ```html
|
| 20 | *
|
| 21 | * <ion-list>
|
| 22 | *
|
| 23 | * <ion-item>
|
| 24 | * <ion-label>Pepperoni</ion-label>
|
| 25 | * <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
|
| 26 | * </ion-item>
|
| 27 | *
|
| 28 | * <ion-item>
|
| 29 | * <ion-label>Sausage</ion-label>
|
| 30 | * <ion-checkbox [(ngModel)]="sausage" disabled="true"></ion-checkbox>
|
| 31 | * </ion-item>
|
| 32 | *
|
| 33 | * <ion-item>
|
| 34 | * <ion-label>Mushrooms</ion-label>
|
| 35 | * <ion-checkbox [(ngModel)]="mushrooms"></ion-checkbox>
|
| 36 | * </ion-item>
|
| 37 | *
|
| 38 | * </ion-list>
|
| 39 | * ```
|
| 40 | *
|
| 41 | * @advanced
|
| 42 | *
|
| 43 | * ```html
|
| 44 | *
|
| 45 | * <!-- Call function when state changes -->
|
| 46 | * <ion-list>
|
| 47 | *
|
| 48 | * <ion-item>
|
| 49 | * <ion-label>Cucumber</ion-label>
|
| 50 | * <ion-checkbox [(ngModel)]="cucumber" (ionChange)="updateCucumber()"></ion-checkbox>
|
| 51 | * </ion-item>
|
| 52 | *
|
| 53 | * </ion-list>
|
| 54 | * ```
|
| 55 | *
|
| 56 | * ```ts
|
| 57 | * @Component({
|
| 58 | * templateUrl: 'main.html'
|
| 59 | * })
|
| 60 | * class SaladPage {
|
| 61 | * cucumber: boolean;
|
| 62 | *
|
| 63 | * updateCucumber() {
|
| 64 | * console.log('Cucumbers new state:' + this.cucumber);
|
| 65 | * }
|
| 66 | * }
|
| 67 | * ```
|
| 68 | *
|
| 69 | * @demo /docs/demos/src/checkbox/
|
| 70 | * @see {@link /docs/components#checkbox Checkbox Component Docs}
|
| 71 | */
|
| 72 | export declare class Checkbox extends BaseInput<boolean> implements IonicTapInput, OnDestroy {
|
| 73 | /**
|
| 74 | * @input {boolean} If true, the element is selected.
|
| 75 | */
|
| 76 | checked: boolean;
|
| 77 | constructor(config: Config, form: Form, item: Item, elementRef: ElementRef, renderer: Renderer);
|
| 78 | /**
|
| 79 | * @hidden
|
| 80 | */
|
| 81 | _click(ev: UIEvent): void;
|
| 82 | /**
|
| 83 | * @hidden
|
| 84 | */
|
| 85 | _inputNormalize(val: any): boolean;
|
| 86 | /**
|
| 87 | * @hidden
|
| 88 | */
|
| 89 | _inputUpdated(): void;
|
| 90 | }
|