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

docs(readme): move jsdoc descriptions to readme.md

Browse Source
This commit is contained in:
Adam Bradley
2017-11-21 21:16:49 -06:00
parent f7c1d04d34
commit 2e83084867
31 changed files with 832 additions and 1003 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
packages/core/src/components/segment/readme.md
View File

@ -1,5 +1,52 @@
# ion-segment
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.
```html
<!-- Segment in a header -->
<ion-header>
<ion-toolbar>
<ion-segment [(ngModel)]="icons" color="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>
<ion-content>
<!-- Segment in content -->
<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)">
<ion-segment-button value="friends">
Friends
</ion-segment-button>
<ion-segment-button value="enemies">
Enemies
</ion-segment-button>
</ion-segment>
<!-- Segment in a form -->
<form [formGroup]="myForm">
<ion-segment formControlName="mapStyle" color="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>
```
<!-- Auto Generated Below -->

58
packages/core/src/components/segment/segment.tsx
View File

@ -1,64 +1,6 @@
import { Component, Element, Event, EventEmitter, Listen, Prop, PropDidChange } from '@stencil/core';
import { SegmentButtonEvent } from '../../index';
/**
* @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'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)
*
*
* ```html
* <!-- Segment in a header -->
* <ion-header>
* <ion-toolbar>
* <ion-segment [(ngModel)]="icons" color="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>
*
* <ion-content>
* <!-- Segment in content -->
* <ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)">
* <ion-segment-button value="friends">
* Friends
* </ion-segment-button>
* <ion-segment-button value="enemies">
* Enemies
* </ion-segment-button>
* </ion-segment>
*
* <!-- Segment in a form -->
* <form [formGroup]="myForm">
* <ion-segment formControlName="mapStyle" color="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>
* ```
*
*
* @demo /docs/demos/src/segment/
* @see {@link /docs/components#segment Segment Component Docs}
* @see [Angular Forms](http://learnangular2.com/forms/)
*/
@Component({
tag: 'ion-segment',
styleUrls: {