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

docs(segment): add usage for segment and segment button

Browse Source
This commit is contained in:
Brandy Carney
2018-04-05 11:32:47 -04:00
parent 2c5f5b3fe1
commit 5e0965260f
7 changed files with 273 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
core/src/components/segment-button/readme.md
View File

@ -2,53 +2,6 @@
Segment buttons are groups of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. A segment button can be checked by default by adding the `checked` attribute or by setting the `value` of the segment to the `value` of the segment button. Only one segment button should be selected at a time.
```html
<!-- Segment buttons with text -->
<ion-segment>
<ion-segment-button>
Friends
</ion-segment-button>
<ion-segment-button>
Enemies
</ion-segment-button>
</ion-segment>
<!-- Segment buttons with the first checked and the last disabled -->
<ion-segment>
<ion-segment-button checked>
Paid
</ion-segment-button>
<ion-segment-button>
Free
</ion-segment-button>
<ion-segment-button disabled>
Top
</ion-segment-button>
</ion-segment>
<!-- Segment buttons with values and icons -->
<ion-segment>
<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>
<!-- Segment with a value that checks the last button -->
<ion-segment value="shared">
<ion-segment-button value="bookmarks">
Bookmarks
</ion-segment-button>
<ion-segment-button value="reading">
Reading List
</ion-segment-button>
<ion-segment-button value="shared">
Shared Links
</ion-segment-button>
</ion-segment>
```
<!-- Auto Generated Below -->