UNPKG

ionic-framework

Version:
132 lines (131 loc) 3.97 kB
import { Renderer, ElementRef } from 'angular2/core'; import { NgControl } from 'angular2/common'; import { Ion } from '../ion'; import { Config } from '../../config/config'; /** * @name Segment * @description * A Segment is a group of buttons, sometimes known as Segmented Controls, that allow the user to interact with a compact group of a number of controls. * Segments provide functionality similar to tabs, selecting one will unselect all others. You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app. * You could use Angular 2's `ng-model` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular 2 Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html) * * * @usage * ```html * <ion-segment [(ng-model)]="relationship" danger> * <ion-segment-button value="friends"> * Friends * </ion-segment-button> * <ion-segment-button value="enemies"> * Enemies * </ion-segment-button> * </ion-segment> *``` * * Or with `FormBuilder` * *```html * <form [ng-form-model]="myForm"> * <ion-segment ng-control="mapStyle" danger> * <ion-segment-button value="standard"> * Standard * </ion-segment-button> * <ion-segment-button value="hybrid"> * Hybrid * </ion-segment-button> * <ion-segment-button value="sat"> * Satellite * </ion-segment-button> * </ion-segment> * </form> * ``` * * @see {@link /docs/v2/components#segment Segment Component Docs} * @see [Angular 2 Forms](http://learnangular2.com/forms/) */ export declare class Segment extends Ion { /** * @private */ buttons: Array<SegmentButton>; constructor(ngControl: NgControl, elementRef: ElementRef, config: Config); /** * @private */ writeValue(value: any): void; /** * @private */ registerOnChange(fn: any): void; /** * @private */ registerOnTouched(fn: any): void; /** * @private * Called by child SegmentButtons to bind themselves to * the Segment. * @param {SegmentButton} segmentButton The child SegmentButton to register. */ register(segmentButton: any): void; /** * @private * Select the button with the given value. * @param {string} value Value of the button to select. */ selectFromValue(value: any): void; /** * @private * Indicate a button should be selected. * @param {SegmentButton} segmentButton The button to select. */ selected(segmentButton: any): void; } /** * @name SegmentButton * @description * The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value. * @property {string} [value] - the value of the segment-button. * @usage * ```html * <ion-segment [(ng-model)]="relationship" primary> * <ion-segment-button value="friends"> * Friends * </ion-segment-button> * <ion-segment-button value="enemies"> * Enemies * </ion-segment-button> * </ion-segment> *``` * * Or with `FormBuilder` * *```html * <form [ng-form-model]="myForm"> * <ion-segment ng-control="mapStyle" danger> * <ion-segment-button value="standard"> * Standard * </ion-segment-button> * <ion-segment-button value="hybrid"> * Hybrid * </ion-segment-button> * <ion-segment-button value="sat"> * Satellite * </ion-segment-button> * </ion-segment> * </form> * ``` * @see {@link /docs/v2/components#segment Segment Component Docs} * @see {@link /docs/v2/api/components/segment/Segment/ Segment API Docs} */ export declare class SegmentButton { constructor(segment: Segment, elementRef: ElementRef, renderer: Renderer); /** * @private */ ngOnInit(): void; /** * @private */ click(event: any): void; }