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): update segment docs

Browse Source
This commit is contained in:
Brandy Carney
2018-02-02 13:57:24 -05:00
parent 67cecf0dfb
commit 909808161e
1 changed files with 52 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,51 +1,64 @@
# 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.
Segments display a group of related buttons, sometimes known as segmented controls, in a horizontal row. They can be displayed inside of a toolbar or the main content.
Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.
```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>
<!-- Default Segment -->
<ion-segment>
<ion-segment-button value="friends">
Friends
</ion-segment-button>
<ion-segment-button value="enemies">
Enemies
</ion-segment-button>
</ion-segment>
<ion-content>
<!-- Segment in content -->
<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)">
<ion-segment-button value="friends">
Friends
<!-- Disabled Segment -->
<ion-segment disabled>
<ion-segment-button value="sunny" checked>
Sunny
</ion-segment-button>
<ion-segment-button value="rainy">
Rainy
</ion-segment-button>
</ion-segment>
<!-- Segment with anchors -->
<ion-segment>
<ion-segment-button href="#dogs" value="dogs">
Dogs
</ion-segment-button>
<ion-segment-button href="#cats" value="cats">
Cats
</ion-segment-button>
</ion-segment>
<!-- Segment with secondary color -->
<ion-segment color="secondary">
<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>
<!-- Segment in a toolbar -->
<ion-toolbar>
<ion-segment>
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
<ion-segment-button value="enemies">
Enemies
<ion-segment-button value="bookmark">
<ion-icon name="bookmark"></ion-icon>
</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>
</ion-toolbar>
```