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-button): update usage for v5 (#20612)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-02-25 10:30:04 -05:00
committed by GitHub
parent b5310effe3
commit fcf97465f5
5 changed files with 36 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,12 +11,12 @@ Segment buttons are groups of related buttons inside of a [Segment](../segment).
### Angular ### Angular
```html ```html
<!-- Segment buttons with text and click listeners --> <!-- Segment buttons with text and click listener -->
<ion-segment> <ion-segment (ionChange)="segmentChanged($event)">
<ion-segment-button (ionSelect)="segmentButtonClicked($event)"> <ion-segment-button>
<ion-label>Friends</ion-label> <ion-label>Friends</ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button (ionSelect)="segmentButtonClicked($event)"> <ion-segment-button>
<ion-label>Enemies</ion-label> <ion-label>Enemies</ion-label>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
@ -157,8 +157,8 @@ import { Component } from '@angular/core';
styleUrls: ['./segment-button-example.css'], styleUrls: ['./segment-button-example.css'],
}) })
export class SegmentButtonExample { export class SegmentButtonExample {
segmentButtonClicked(ev: any) { segmentChanged(ev: any) {
console.log('Segment button clicked', ev); console.log('Segment changed', ev);
} }
} }
``` ```
@ -305,13 +305,11 @@ export class SegmentButtonExample {
``` ```
```javascript ```javascript
// Listen for ionClick on all segment buttons // Listen for ionChange on segment
const segmentButtons = document.querySelectorAll('ion-segment-button') const segment = document.querySelector('ion-segment');
for (let i = 0; i < segmentButtons.length; i++) { segment.addEventListener('ionChange', (ev) => {
segmentButtons[i].addEventListener('ionSelect', (ev) => { console.log('Segment changed', ev);
console.log('Segment button clicked', ev); })
})
}
``` ```
@ -331,7 +329,7 @@ export const SegmentButtonExamples: React.FC = () => {
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent> <IonContent>
{/*-- Segment buttons with text and click listeners --*/} {/*-- Segment buttons with text and click listener --*/}
<IonSegment onIonChange={(e) => console.log(`${e.detail.value} segment selected`)}> <IonSegment onIonChange={(e) => console.log(`${e.detail.value} segment selected`)}>
<IonSegmentButton value="Friends"> <IonSegmentButton value="Friends">
<IonLabel>Friends</IonLabel> <IonLabel>Friends</IonLabel>
@ -477,12 +475,12 @@ export const SegmentButtonExamples: React.FC = () => {
```html ```html
<template> <template>
<!-- Segment buttons with text and click listeners --> <!-- Segment buttons with text and click listener -->
<ion-segment> <ion-segment @ionChange="segmentChanged($event)">
<ion-segment-button @ionSelect="segmentButtonClicked($event)"> <ion-segment-button>
<ion-label>Friends</ion-label> <ion-label>Friends</ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button @ionSelect="segmentButtonClicked($event)"> <ion-segment-button>
<ion-label>Enemies</ion-label> <ion-label>Enemies</ion-label>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
@ -619,8 +617,8 @@ export const SegmentButtonExamples: React.FC = () => {
@Component() @Component()
export default class Example extends Vue { export default class Example extends Vue {
segmentButtonClicked(ev: any) { segmentChanged(ev: any) {
console.log('Segment button clicked', ev); console.log('Segment changed', ev);
} }
} }
</script> </script>

12
core/src/components/segment-button/usage/angular.md
View File

@ -1,10 +1,10 @@
```html ```html
<!-- Segment buttons with text and click listeners --> <!-- Segment buttons with text and click listener -->
<ion-segment> <ion-segment (ionChange)="segmentChanged($event)">
<ion-segment-button (ionSelect)="segmentButtonClicked($event)"> <ion-segment-button>
<ion-label>Friends</ion-label> <ion-label>Friends</ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button (ionSelect)="segmentButtonClicked($event)"> <ion-segment-button>
<ion-label>Enemies</ion-label> <ion-label>Enemies</ion-label>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
@ -145,8 +145,8 @@ import { Component } from '@angular/core';
styleUrls: ['./segment-button-example.css'], styleUrls: ['./segment-button-example.css'],
}) })
export class SegmentButtonExample { export class SegmentButtonExample {
segmentButtonClicked(ev: any) { segmentChanged(ev: any) {
console.log('Segment button clicked', ev); console.log('Segment changed', ev);
} }
} }
``` ```

12
core/src/components/segment-button/usage/javascript.md
View File

@ -137,11 +137,9 @@
``` ```
```javascript ```javascript
// Listen for ionClick on all segment buttons // Listen for ionChange on segment
const segmentButtons = document.querySelectorAll('ion-segment-button') const segment = document.querySelector('ion-segment');
for (let i = 0; i < segmentButtons.length; i++) { segment.addEventListener('ionChange', (ev) => {
segmentButtons[i].addEventListener('ionSelect', (ev) => { console.log('Segment changed', ev);
console.log('Segment button clicked', ev); })
})
}
``` ```

2
core/src/components/segment-button/usage/react.md
View File

@ -12,7 +12,7 @@ export const SegmentButtonExamples: React.FC = () => {
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent> <IonContent>
{/*-- Segment buttons with text and click listeners --*/} {/*-- Segment buttons with text and click listener --*/}
<IonSegment onIonChange={(e) => console.log(`${e.detail.value} segment selected`)}> <IonSegment onIonChange={(e) => console.log(`${e.detail.value} segment selected`)}>
<IonSegmentButton value="Friends"> <IonSegmentButton value="Friends">
<IonLabel>Friends</IonLabel> <IonLabel>Friends</IonLabel>

12
core/src/components/segment-button/usage/vue.md
View File

@ -1,11 +1,11 @@
```html ```html
<template> <template>
<!-- Segment buttons with text and click listeners --> <!-- Segment buttons with text and click listener -->
<ion-segment> <ion-segment @ionChange="segmentChanged($event)">
<ion-segment-button @ionSelect="segmentButtonClicked($event)"> <ion-segment-button>
<ion-label>Friends</ion-label> <ion-label>Friends</ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button @ionSelect="segmentButtonClicked($event)"> <ion-segment-button>
<ion-label>Enemies</ion-label> <ion-label>Enemies</ion-label>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
@ -142,8 +142,8 @@
@Component() @Component()
export default class Example extends Vue { export default class Example extends Vue {
segmentButtonClicked(ev: any) { segmentChanged(ev: any) {
console.log('Segment button clicked', ev); console.log('Segment changed', ev);
} }
} }
</script> </script>