javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(segment): clean up docs on segment, update demo

Browse Source 
the demo has been changed to show multiple segments in use, instead of
a lot of segments thrown on the page.

fixes driftyco/ionic-site#658
This commit is contained in:
Brandy Carney
2016-06-29 17:16:02 -04:00
parent d5959f4c44
commit 5119b57496
15 changed files with 179 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/segment/segment.ts
View File

@ -8,34 +8,31 @@ import { isPresent, isTrueProperty } from '../../util/util';
* @name SegmentButton
* @description
* The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
*
* @usage
*
* ```html
* <ion-segment [(ngModel)]="relationship" primary>
* <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
* Friends
* </ion-segment-button>
* <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
* Enemies
* </ion-segment-button>
* </ion-segment>
*```
*
* Or with `FormBuilder`
*
*```html
* <form [ngFormModel]="myForm">
* <ion-segment ngControl="mapStyle" danger>
* <ion-segment-button value="standard">
* Standard
* <ion-content>
* <!-- Segment buttons with icons -->
* <ion-segment [(ngModel)]="icons" secondary>
* <ion-segment-button value="camera">
* <ion-icon name="camera"></ion-icon>
* </ion-segment-button>
* <ion-segment-button value="hybrid">
* Hybrid
* </ion-segment-button>
* <ion-segment-button value="sat">
* Satellite
* <ion-segment-button value="bookmark">
* <ion-icon name="bookmark"></ion-icon>
* </ion-segment-button>
* </ion-segment>
* </form>
*
* <!-- Segment buttons with text -->
* <ion-segment [(ngModel)]="relationship" primary>
* <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
* Friends
* </ion-segment-button>
* <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
* Enemies
* </ion-segment-button>
* </ion-segment>
* </ion-content>
* ```
*
*
@ -128,34 +125,47 @@ export class SegmentButton {
* 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 [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)" danger>
* <ion-segment-button value="friends">
* Friends
* </ion-segment-button>
* <ion-segment-button value="enemies">
* Enemies
* </ion-segment-button>
* </ion-segment>
*```
* <!-- Segment in a header -->
* <ion-header>
* <ion-toolbar>
* <ion-segment [(ngModel)]="icons" secondary>
* <ion-segment-button value="camera">
* <ion-icon name="camera"></ion-icon>
* </ion-segment-button>
* <ion-segment-button value="bookmark">
* <ion-icon name="bookmark"></ion-icon>
* </ion-segment-button>
* </ion-segment>
* </ion-toolbar>
* </ion-header>
*
* Or with `FormBuilder`
*
*```html
* <form [ngFormModel]="myForm">
* <ion-segment ngControl="mapStyle" danger>
* <ion-segment-button value="standard">
* Standard
* <ion-content>
* <!-- Segment in content -->
* <ion-segment [(ngModel)]="relationship" primary>
* <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
* Friends
* </ion-segment-button>
* <ion-segment-button value="hybrid">
* Hybrid
* </ion-segment-button>
* <ion-segment-button value="sat">
* Satellite
* <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
* Enemies
* </ion-segment-button>
* </ion-segment>
* </form>
*
* <!-- Segment in a form -->
* <form [ngFormModel]="myForm">
* <ion-segment ngControl="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>
* </ion-content>
* ```
*
*