| 1 | import { ElementRef, EventEmitter, OnDestroy, OnInit, Renderer } from '@angular/core';
|
| 2 | import { Config } from '../../config/config';
|
| 3 | import { Form, IonicTapInput } from '../../util/form';
|
| 4 | import { Ion } from '../ion';
|
| 5 | import { Item } from '../item/item';
|
| 6 | import { RadioGroup } from './radio-group';
|
| 7 | /**
|
| 8 | * @description
|
| 9 | * A radio button is a button that can be either checked or unchecked. A user can tap
|
| 10 | * the button to check or uncheck it. It can also be checked from the template using
|
| 11 | * the `checked` property.
|
| 12 | *
|
| 13 | * Use an element with a `radio-group` attribute to group a set of radio buttons. When
|
| 14 | * radio buttons are inside a [radio group](../RadioGroup), exactly one radio button
|
| 15 | * in the group can be checked at any time. If a radio button is not placed in a group,
|
| 16 | * they will all have the ability to be checked at the same time.
|
| 17 | *
|
| 18 | * See the [Angular Forms Docs](https://angular.io/docs/ts/latest/guide/forms.html) for
|
| 19 | * more information on forms and input.
|
| 20 | *
|
| 21 | * @usage
|
| 22 | * ```html
|
| 23 | * <ion-list radio-group [(ngModel)]="relationship">
|
| 24 | * <ion-item>
|
| 25 | * <ion-label>Friends</ion-label>
|
| 26 | * <ion-radio value="friends" checked></ion-radio>
|
| 27 | * </ion-item>
|
| 28 | * <ion-item>
|
| 29 | * <ion-label>Family</ion-label>
|
| 30 | * <ion-radio value="family"></ion-radio>
|
| 31 | * </ion-item>
|
| 32 | * <ion-item>
|
| 33 | * <ion-label>Enemies</ion-label>
|
| 34 | * <ion-radio value="enemies" [disabled]="isDisabled"></ion-radio>
|
| 35 | * </ion-item>
|
| 36 | * </ion-list>
|
| 37 | * ```
|
| 38 | * @demo /docs/demos/src/radio/
|
| 39 | * @see {@link /docs/components#radio Radio Component Docs}
|
| 40 | * @see {@link ../RadioGroup RadioGroup API Docs}
|
| 41 | */
|
| 42 | export declare class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit {
|
| 43 | private _form;
|
| 44 | private _item;
|
| 45 | private _group;
|
| 46 | /**
|
| 47 | * @internal
|
| 48 | */
|
| 49 | _checked: boolean;
|
| 50 | /**
|
| 51 | * @internal
|
| 52 | */
|
| 53 | _disabled: boolean;
|
| 54 | /**
|
| 55 | * @internal
|
| 56 | */
|
| 57 | _labelId: string;
|
| 58 | /**
|
| 59 | * @internal
|
| 60 | */
|
| 61 | _value: any;
|
| 62 | /**
|
| 63 | * @internal
|
| 64 | */
|
| 65 | id: string;
|
| 66 | /**
|
| 67 | * @input {string} The color to use from your Sass `$colors` map.
|
| 68 | * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
|
| 69 | * For more information, see [Theming your App](/docs/theming/theming-your-app).
|
| 70 | */
|
| 71 | color: string;
|
| 72 | /**
|
| 73 | * @output {any} Emitted when the radio button is selected.
|
| 74 | */
|
| 75 | ionSelect: EventEmitter<any>;
|
| 76 | constructor(_form: Form, config: Config, elementRef: ElementRef, renderer: Renderer, _item: Item, _group: RadioGroup);
|
| 77 | /**
|
| 78 | * @input {any} The value of the radio button. Defaults to the generated id.
|
| 79 | */
|
| 80 | value: any;
|
| 81 | /**
|
| 82 | * @input {boolean} If true, the element is selected, and other buttons in the group are unselected.
|
| 83 | */
|
| 84 | checked: boolean;
|
| 85 | /**
|
| 86 | * @input {boolean} If true, the user cannot interact with this element.
|
| 87 | */
|
| 88 | disabled: boolean;
|
| 89 | /**
|
| 90 | * @hidden
|
| 91 | */
|
| 92 | initFocus(): void;
|
| 93 | /**
|
| 94 | * @internal
|
| 95 | */
|
| 96 | _click(ev: UIEvent): void;
|
| 97 | /**
|
| 98 | * @internal
|
| 99 | */
|
| 100 | ngOnInit(): void;
|
| 101 | /**
|
| 102 | * @internal
|
| 103 | */
|
| 104 | ngOnDestroy(): void;
|
| 105 | }
|