javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into WIP-api-demos

Browse Source
This commit is contained in:
Drew Rygh
2015-12-16 11:13:03 -06:00
parent adf62fdc41 364f9e12ae
commit 068f3ceb29
185 changed files with 2645 additions and 1828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
ionic/components/segment/segment.ts
View File

@ -1,4 +1,5 @@
import {Directive, Renderer, ElementRef, Host, Optional, NgControl} from 'angular2/angular2';
import {Directive, Renderer, ElementRef, Host, Optional} from 'angular2/core';
import {NgControl} from 'angular2/common';
import {Ion} from '../ion';
import {Config} from '../../config/config';
@ -9,12 +10,12 @@ import {Config} from '../../config/config';
* @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)
* You could use Angular 2's `ngModel` 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 [(ngModel)]="relationship" danger>
* <ion-segment-button value="friends">
* Friends
* </ion-segment-button>
@ -27,8 +28,8 @@ import {Config} from '../../config/config';
* Or with `FormBuilder`
*
*```html
* <form [ng-form-model]="myForm">
* <ion-segment ng-control="mapStyle" danger>
* <form [ngFormModel]="myForm">
* <ion-segment ngControl="mapStyle" danger>
* <ion-segment-button value="standard">
* Standard
* </ion-segment-button>
@ -141,7 +142,7 @@ export class Segment extends Ion {
* @property {string} [value] - the value of the segment-button.
* @usage
* ```html
* <ion-segment [(ng-model)]="relationship" primary>
* <ion-segment [(ngModel)]="relationship" primary>
* <ion-segment-button value="friends">
* Friends
* </ion-segment-button>
@ -154,8 +155,8 @@ export class Segment extends Ion {
* Or with `FormBuilder`
*
*```html
* <form [ng-form-model]="myForm">
* <ion-segment ng-control="mapStyle" danger>
* <form [ngFormModel]="myForm">
* <ion-segment ngControl="mapStyle" danger>
* <ion-segment-button value="standard">
* Standard
* </ion-segment-button>

2
ionic/components/segment/test/basic/index.ts
View File

@ -1,4 +1,4 @@
import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common';
import {App} from 'ionic/ionic';

22
ionic/components/segment/test/basic/main.html
View File

@ -1,5 +1,5 @@
<ion-toolbar>
<ion-segment [(ng-model)]="relationship">
<ion-segment [(ngModel)]="relationship">
<ion-segment-button value="friends" class="e2eSegmentFriends">
Friends
</ion-segment-button>
@ -30,8 +30,8 @@
<h4>Map mode: NgControl</h4>
<form (submit)="doSubmit($event)" [ng-form-model]="myForm">
<ion-segment ng-control="mapStyle" danger>
<form (submit)="doSubmit($event)" [ngFormModel]="myForm">
<ion-segment ngControl="mapStyle" danger>
<ion-segment-button value="standard" class="e2eSegmentStandard">
Standard
</ion-segment-button>
@ -47,14 +47,14 @@
<p>
Map mode: <b>{{myForm.controls.mapStyle.value}}</b> -
<span [ng-switch]="myForm.controls.mapStyle.value">
<span *ng-switch-when="'standard'">
<span [ngSwitch]="myForm.controls.mapStyle.value">
<span *ngSwitchWhen="'standard'">
<b>Standard</b>
</span>
<span *ng-switch-when="'hybrid'">
<span *ngSwitchWhen="'hybrid'">
<b>Hybrid</b>
</span>
<span *ng-switch-when="'sat'">
<span *ngSwitchWhen="'sat'">
<b>Satellite</b>
</span>
</span>
@ -64,7 +64,7 @@
<h4>Model style: NgModel</h4>
<ion-segment [(ng-model)]="modelStyle" dark>
<ion-segment [(ngModel)]="modelStyle" dark>
<ion-segment-button value="A">
Model A
</ion-segment-button>
@ -83,7 +83,7 @@
</ion-content>
<ion-toolbar position="bottom" primary>
<ion-segment [(ng-model)]="appType" light>
<ion-segment [(ngModel)]="appType" light>
<ion-segment-button value="paid">
Primary
</ion-segment-button>
@ -97,7 +97,7 @@
</ion-toolbar>
<ion-toolbar position="bottom">
<ion-segment [(ng-model)]="appType" danger>
<ion-segment [(ngModel)]="appType" danger>
<ion-segment-button value="paid">
Light
</ion-segment-button>
@ -111,7 +111,7 @@
</ion-toolbar>
<ion-toolbar position="bottom">
<ion-segment [(ng-model)]="appType" dark>
<ion-segment [(ngModel)]="appType" dark>
<ion-segment-button value="paid">
Light
</ion-segment-button>

2
ionic/components/segment/test/nav/index.ts
View File

@ -1,4 +1,4 @@
import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common';
import {App, Page} from 'ionic/ionic';

10
ionic/components/segment/test/nav/main.html
View File

@ -5,7 +5,7 @@
</ion-navbar>
<ion-toolbar>
<ion-segment [(ng-model)]="signInType">
<ion-segment [(ngModel)]="signInType">
<ion-segment-button value="new">
New
</ion-segment-button>
@ -32,14 +32,14 @@
</ion-col>
</ion-row>
<div [ng-switch]="signInType">
<div *ng-switch-when="'existing'">
<div [ngSwitch]="signInType">
<div *ngSwitchWhen="'existing'">
Signing up as an <b>Existing User</b>.
</div>
<div *ng-switch-when="'new'">
<div *ngSwitchWhen="'new'">
Signing up as a <b>New User</b>.
</div>
<div *ng-switch-when="'test'">
<div *ngSwitchWhen="'test'">
Signing up as a <b>Test User</b>.
</div>
</div>