javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +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

57
core/src/components/segment/readme.md
View File

@ -4,63 +4,6 @@ Segments display a group of related buttons, sometimes known as segmented contro
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
<!-- Default Segment -->
<ion-segment>
<ion-segment-button value="friends">
Friends
</ion-segment-button>
<ion-segment-button value="enemies">
Enemies
</ion-segment-button>
</ion-segment>
<!-- 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="bookmark">
<ion-icon name="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
```
<!-- Auto Generated Below -->

15
core/src/components/segment/test/preview/index.html
View File

@ -187,6 +187,21 @@
}
}
const segments = document.querySelectorAll('ion-segment')
for (let i = 0; i < segments.length; i++) {
segments[i].addEventListener('ionChange', (ev) => {
console.log('Segment value changed', ev);
})
}
// 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);
})
}
</script>
</ion-content>

71
core/src/components/segment/usage/angular.md Normal file
View File

@ -0,0 +1,71 @@
```html
<!-- Default Segment -->
<ion-segment (ionChange)="segmentChanged($event)">
<ion-segment-button value="friends">
Friends
</ion-segment-button>
<ion-segment-button value="enemies">
Enemies
</ion-segment-button>
</ion-segment>
<!-- Disabled Segment -->
<ion-segment (ionChange)="segmentChanged($event)" 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 (ionChange)="segmentChanged($event)">
<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 (ionChange)="segmentChanged($event)" 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 (ionChange)="segmentChanged($event)">
<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>
```
```javascript
import { Component } from '@angular/core';
@Component({
selector: 'segment-example',
templateUrl: 'segment-example.html',
styleUrls: ['./segment-example.css'],
})
export class SegmentExample {
segmentChanged(ev: any) {
console.log('Segment changed', ev);
}
}
```

66
core/src/components/segment/usage/javascript.md Normal file
View File

@ -0,0 +1,66 @@
```html
<!-- Default Segment -->
<ion-segment>
<ion-segment-button value="friends">
Friends
</ion-segment-button>
<ion-segment-button value="enemies">
Enemies
</ion-segment-button>
</ion-segment>
<!-- 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="bookmark">
<ion-icon name="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
```
```javascript
// Listen for ionChange on all segments
const segments = document.querySelectorAll('ion-segment')
for (let i = 0; i < segments.length; i++) {
segments[i].addEventListener('ionChange', (ev) => {
console.log('Segment changed', ev);
})
}
```