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
```html
<!-- Segment buttons with text and click listeners -->
<ion-segment>
<ion-segment-button (ionSelect)="segmentButtonClicked($event)">
<!-- Segment buttons with text and click listener -->
<ion-segment (ionChange)="segmentChanged($event)">
<ion-segment-button>
<ion-label>Friends</ion-label>
</ion-segment-button>
<ion-segment-button (ionSelect)="segmentButtonClicked($event)">
<ion-segment-button>
<ion-label>Enemies</ion-label>
</ion-segment-button>
</ion-segment>
@ -157,8 +157,8 @@ import { Component } from '@angular/core';
styleUrls: ['./segment-button-example.css'],
})
export class SegmentButtonExample {
segmentButtonClicked(ev: any) {
console.log('Segment button clicked', ev);
segmentChanged(ev: any) {
console.log('Segment changed', ev);
}
}
```
@ -305,13 +305,11 @@ export class SegmentButtonExample {
```
```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('ionSelect', (ev) => {
console.log('Segment button clicked', ev);
})
}
// Listen for ionChange on segment
const segment = document.querySelector('ion-segment');
segment.addEventListener('ionChange', (ev) => {
console.log('Segment changed', ev);
})
```
@ -331,7 +329,7 @@ export const SegmentButtonExamples: React.FC = () => {
</IonToolbar>
</IonHeader>
<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`)}>
<IonSegmentButton value="Friends">
<IonLabel>Friends</IonLabel>
@ -477,12 +475,12 @@ export const SegmentButtonExamples: React.FC = () => {
```html
<template>
<!-- Segment buttons with text and click listeners -->
<ion-segment>
<ion-segment-button @ionSelect="segmentButtonClicked($event)">
<!-- Segment buttons with text and click listener -->
<ion-segment @ionChange="segmentChanged($event)">
<ion-segment-button>
<ion-label>Friends</ion-label>
</ion-segment-button>
<ion-segment-button @ionSelect="segmentButtonClicked($event)">
<ion-segment-button>
<ion-label>Enemies</ion-label>
</ion-segment-button>
</ion-segment>
@ -619,8 +617,8 @@ export const SegmentButtonExamples: React.FC = () => {
@Component()
export default class Example extends Vue {
segmentButtonClicked(ev: any) {
console.log('Segment button clicked', ev);
segmentChanged(ev: any) {
console.log('Segment changed', ev);
}
}
</script>

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

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

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

@ -137,11 +137,9 @@
```
```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('ionSelect', (ev) => {
console.log('Segment button clicked', ev);
})
}
// Listen for ionChange on segment
const segment = document.querySelector('ion-segment');
segment.addEventListener('ionChange', (ev) => {
console.log('Segment changed', ev);
})
```

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

@ -12,7 +12,7 @@ export const SegmentButtonExamples: React.FC = () => {
</IonToolbar>
</IonHeader>
<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`)}>
<IonSegmentButton value="Friends">
<IonLabel>Friends</IonLabel>

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

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