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

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 -->

63
core/src/components/segment-button/usage/angular.md Normal file
View File

@ -0,0 +1,63 @@
```html
<!-- Segment buttons with text and click listeners -->
<ion-segment>
<ion-segment-button (ionClick)="segmentButtonClicked($event)">
Friends
</ion-segment-button>
<ion-segment-button (ionClick)="segmentButtonClicked($event)">
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>
```
```javascript
import { Component } from '@angular/core';
@Component({
selector: 'segment-button-example',
templateUrl: 'segment-button-example.html',
styleUrls: ['./segment-button-example.css'],
})
export class SegmentButtonExample {
segmentButtonClicked(ev: any) {
console.log('Segment button clicked', ev);
}
}
```

58
core/src/components/segment-button/usage/javascript.md Normal file
View File

@ -0,0 +1,58 @@
```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>
```
```javascript
// Listen for ionClick on all segment buttons
const segmentButtons = document.querySelectorAll('ion-segment-button')
for (let i = 0; i < segmentButtons.length; i++) {
segmentButtons[i].addEventListener('ionClick', (ev) => {
console.log('Segment button clicked', ev);
})
}
```