| 1 | import { AfterContentInit, ElementRef, QueryList, Renderer } from '@angular/core';
|
| 2 | import { NgControl } from '@angular/forms';
|
| 3 | import { Config } from '../../config/config';
|
| 4 | import { BaseInput } from '../../util/base-input';
|
| 5 | import { SegmentButton } from './segment-button';
|
| 6 | /**
|
| 7 | * @name Segment
|
| 8 | * @description
|
| 9 | * 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.
|
| 10 | * 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.
|
| 11 | * You could use Angular's `ngModel` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html)
|
| 12 | *
|
| 13 | *
|
| 14 | * ```html
|
| 15 | * <!-- Segment in a header -->
|
| 16 | * <ion-header>
|
| 17 | * <ion-toolbar>
|
| 18 | * <ion-segment [(ngModel)]="icons" color="secondary">
|
| 19 | * <ion-segment-button value="camera">
|
| 20 | * <ion-icon name="camera"></ion-icon>
|
| 21 | * </ion-segment-button>
|
| 22 | * <ion-segment-button value="bookmark">
|
| 23 | * <ion-icon name="bookmark"></ion-icon>
|
| 24 | * </ion-segment-button>
|
| 25 | * </ion-segment>
|
| 26 | * </ion-toolbar>
|
| 27 | * </ion-header>
|
| 28 | *
|
| 29 | * <ion-content>
|
| 30 | * <!-- Segment in content with material design mode on all devices -->
|
| 31 | * <ion-segment [(ngModel)]="relationship" color="primary" mode="md" (ionChange)="segmentChanged($event)">
|
| 32 | * <ion-segment-button value="friends">
|
| 33 | * Friends
|
| 34 | * </ion-segment-button>
|
| 35 | * <ion-segment-button value="enemies">
|
| 36 | * Enemies
|
| 37 | * </ion-segment-button>
|
| 38 | * </ion-segment>
|
| 39 | *
|
| 40 | * <!-- Segment in a form -->
|
| 41 | * <form [formGroup]="myForm">
|
| 42 | * <ion-segment formControlName="mapStyle" color="danger">
|
| 43 | * <ion-segment-button value="standard">
|
| 44 | * Standard
|
| 45 | * </ion-segment-button>
|
| 46 | * <ion-segment-button value="hybrid">
|
| 47 | * Hybrid
|
| 48 | * </ion-segment-button>
|
| 49 | * <ion-segment-button value="sat">
|
| 50 | * Satellite
|
| 51 | * </ion-segment-button>
|
| 52 | * </ion-segment>
|
| 53 | * </form>
|
| 54 | * </ion-content>
|
| 55 | * ```
|
| 56 | *
|
| 57 | *
|
| 58 | * @demo /docs/demos/src/segment/
|
| 59 | * @see {@link /docs/components#segment Segment Component Docs}
|
| 60 | * @see [Angular Forms](http://learnangular2.com/forms/)
|
| 61 | */
|
| 62 | export declare class Segment extends BaseInput<string> implements AfterContentInit {
|
| 63 | /**
|
| 64 | * @hidden
|
| 65 | */
|
| 66 | _buttons: QueryList<SegmentButton>;
|
| 67 | constructor(config: Config, elementRef: ElementRef, renderer: Renderer, ngControl: NgControl);
|
| 68 | /**
|
| 69 | * @hidden
|
| 70 | */
|
| 71 | ngAfterContentInit(): void;
|
| 72 | /**
|
| 73 | * @hidden
|
| 74 | * Write a new value to the element.
|
| 75 | */
|
| 76 | _inputUpdated(): void;
|
| 77 | }
|