UNPKG

ionic-framework

Version:

The ionic-framework package comes with both Javascript and Sass frontend dependencies, located in the root of the package, and a Node API, located in `tooling/`.

153 lines (152 loc) 4.93 kB
import { ElementRef, Renderer, QueryList } from 'angular2/core'; import { NgControl } from 'angular2/common'; import { Form } from '../../util/form'; import { Label } from '../label/label'; import { NavController } from '../nav/nav-controller'; import { Option } from '../option/option'; /** * @name Select * @description * The `ion-select` component is similar to an HTML `<select>` element, however, * Ionic's select component makes it easier for users to sort through and select * the preferred option or options. When users tap the select component, a * dialog will appear with all of the options in a large, easy to select list * for users. * * Under-the-hood the `ion-select` actually uses the * {@link ../../alert/Alert Alert API} to open up the overlay of options * which the user is presented with. Select takes one child `ion-label` * component, and numerous child `ion-option` components. Each `ion-option` * should be given a `value` attribute. * * ### Single Value: Radio Buttons * * The standard `ion-select` component allows the user to select only one * option. When selecting only one option the alert overlay presents users with * a radio button styled list of options. The `ion-select` component's value * receives the value of the selected option's value. * * ```html * <ion-select [(ngModel)]="gender"> * <ion-label>Gender</ion-label> * <ion-option value="f" checked="true">Female</ion-option> * <ion-option value="m">Male</ion-option> * </ion-select> * ``` * * ### Multiple Value: Checkboxes * * By adding the `multiple="true"` attribute to `ion-select`, users are able * to select multiple options. When multiple options can be selected, the alert * overlay presents users with a checkbox styled list of options. The * `ion-select multiple="true"` component's value receives an array of all the * selected option values. * * ```html * <ion-select [(ngModel)]="toppings" multiple="true"> * <ion-label>Toppings</ion-label> * <ion-option value="bacon">Bacon</ion-option> * <ion-option value="olives">Black Olives</ion-option> * <ion-option value="xcheese">Extra Cheese</ion-option> * <ion-option value="mushrooms">Mushrooms</ion-option> * <ion-option value="pepperoni">Pepperoni</ion-option> * <ion-option value="sausage">Sausage</ion-option> * </ion-select> * ``` * * ### Alert Buttons * By default, the two buttons read `Cancel` and `OK`. The each button's text * can be customized using the `cancelText` and `okText` attributes: * * ```html * <ion-select okText="Okay" cancelText="Dismiss"> * ... * </ion-select> * ``` * * ### Alert Options * * Remember how `ion-select` is really just a wrapper to `Alert`? By using * the `alertOptions` property you can pass custom options to the alert * overlay. This would be useful if there is a custom alert title, * subtitle or message. {@link ../../alert/Alert Alert API} * * ```html * <ion-select [alertOptions]="alertOptions"> * ... * </ion-select> * ``` * * ```ts * this.alertOptions = { * title: 'Pizza Toppings', * subTitle: 'Select your toppings' * }; * ``` * */ export declare class Select { private form; private elementRef; private renderer; private navCtrl; private selectedText; private labelId; cancelText: string; okText: string; value: string; alertOptions: any; checked: any; disabled: boolean; id: string; multiple: string; label: Label; options: QueryList<Option>; constructor(form: Form, elementRef: ElementRef, renderer: Renderer, navCtrl: NavController, ngControl: NgControl); /** * @private */ ngOnInit(): void; /** * @private */ ngAfterContentInit(): void; /** * @private */ _click(): void; /** * @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: any): void; /** * @private */ onChange(val: any): void; /** * @private */ onTouched(val: any): void; /** * @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: any): void; /** * @private * Angular2 Forms API method called by the the view (NgControl) to register * the onTouched event handler that marks model (Control) as touched. * @param {Function} fn onTouched event handler. */ registerOnTouched(fn: any): void; /** * @private */ ngOnDestroy(): void; }