Skip to content

Commit 288a265

Browse files
averyjohnstonaveryjohnston
authored
feat(many): update playgrounds to use showConsole prop instead of showing data within demo (#3107)
1 parent 134d538 commit 288a265

File tree

101 files changed

+254
-541
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+254
-541
lines changed

‎static/usage/v7/accordion/listen-changes/angular/example_component_html.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,4 @@
1919
<div class="ion-padding" slot="content">Third Content</div>
2020
</ion-accordion>
2121
</ion-accordion-group>
22-
23-
<p #listenerOut></p>
2422
```

‎static/usage/v7/accordion/listen-changes/angular/example_component_ts.md

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,20 @@
11
```ts
2-
import { Component, ElementRef, ViewChild } from '@angular/core';
2+
import { Component } from '@angular/core';
33

44
@Component({
55
selector: 'app-example',
66
templateUrl: 'example.component.html',
77
})
88
export class ExampleComponent {
9-
@ViewChild('listenerOut', { static: true }) listenerOut: ElementRef;
109
private values: string[] = ['first', 'second', 'third'];
1110

1211
accordionGroupChange = (ev: any) => {
13-
const nativeEl = this.listenerOut.nativeElement;
14-
if (!nativeEl) {
15-
return;
16-
}
17-
1812
const collapsedItems = this.values.filter((value) => value !== ev.detail.value);
1913
const selectedValue = ev.detail.value;
2014

21-
nativeEl.innerText = `
22-
Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
23-
Collapsed: ${collapsedItems.join(', ')}
24-
`;
15+
console.log(
16+
`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
17+
);
2518
};
2619
}
2720
```

‎static/usage/v7/accordion/listen-changes/demo.html

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,6 @@
88
<script src="../../../common.js"></script>
99
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
1010
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11-
<style>
12-
.container {
13-
flex-direction: column;
14-
}
15-
</style>
1611
</head>
1712

1813
<body>
@@ -39,25 +34,23 @@
3934
<div class="ion-padding" slot="content">Third Content</div>
4035
</ion-accordion>
4136
</ion-accordion-group>
42-
43-
<p class="listener-out"></p>
4437
</div>
4538
</ion-content>
4639
</ion-app>
4740

4841
<script>
4942
const accordionGroup = document.querySelector('ion-accordion-group');
50-
const listenerOut = document.querySelector('.listener-out');
5143
const values = ['first', 'second', 'third'];
5244

5345
accordionGroup.addEventListener('ionChange', (ev) => {
5446
const collapsedItems = values.filter((value) => value !== ev.detail.value);
5547
const selectedValue = ev.detail.value;
5648

57-
listenerOut.innerText = `
58-
Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
59-
Collapsed: ${collapsedItems.join(', ')}
60-
`;
49+
console.log(
50+
`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
51+
', '
52+
)}`
53+
);
6154
});
6255
</script>
6356
</body>

‎static/usage/v7/accordion/listen-changes/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@ import angular_example_component_ts from './angular/example_component_ts.md';
2222
}}
2323
size="320px"
2424
src="usage/v7/accordion/listen-changes/demo.html"
25+
showConsole={true}
2526
/>

‎static/usage/v7/accordion/listen-changes/javascript.md

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,17 @@
2020
</ion-accordion>
2121
</ion-accordion-group>
2222

23-
<p class="listener-out"></p>
24-
2523
<script>
2624
const accordionGroup = document.querySelector('ion-accordion-group');
27-
const listenerOut = document.querySelector('.listener-out');
2825
const values = ['first', 'second', 'third'];
2926
3027
accordionGroup.addEventListener('ionChange', (ev) => {
3128
const collapsedItems = values.filter((value) => value !== ev.detail.value);
3229
const selectedValue = ev.detail.value;
3330
34-
listenerOut.innerText = `
35-
Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
36-
Collapsed: ${collapsedItems.join(', ')}
37-
`;
31+
console.log(
32+
`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
33+
);
3834
});
3935
</script>
4036
```

‎static/usage/v7/accordion/listen-changes/react.md

Lines changed: 30 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,44 @@
11
```tsx
2-
import React, { useRef } from 'react';
2+
import React from 'react';
33
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/react';
44
function Example() {
5-
const listenerOut = useRef<null | HTMLParagraphElement>(null);
65
const values = ['first', 'second', 'third'];
76
const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
8-
const nativeEl = listenerOut.current;
9-
if (!nativeEl) {
10-
return;
11-
}
12-
137
const collapsedItems = values.filter((value) => value !== ev.detail.value);
148
const selectedValue = ev.detail.value;
159

16-
nativeEl.innerText = `
17-
Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
18-
Collapsed: ${collapsedItems.join(', ')}
19-
`;
10+
console.log(
11+
`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
12+
);
2013
};
2114

2215
return (
23-
<>
24-
<IonAccordionGroup onIonChange={accordionGroupChange}>
25-
<IonAccordion value="first">
26-
<IonItem slot="header" color="light">
27-
<IonLabel>First Accordion</IonLabel>
28-
</IonItem>
29-
<div className="ion-padding" slot="content">
30-
First Content
31-
</div>
32-
</IonAccordion>
33-
<IonAccordion value="second">
34-
<IonItem slot="header" color="light">
35-
<IonLabel>Second Accordion</IonLabel>
36-
</IonItem>
37-
<div className="ion-padding" slot="content">
38-
Second Content
39-
</div>
40-
</IonAccordion>
41-
<IonAccordion value="third">
42-
<IonItem slot="header" color="light">
43-
<IonLabel>Third Accordion</IonLabel>
44-
</IonItem>
45-
<div className="ion-padding" slot="content">
46-
Third Content
47-
</div>
48-
</IonAccordion>
49-
</IonAccordionGroup>
50-
<p ref={listenerOut}></p>
51-
</>
16+
<IonAccordionGroup onIonChange={accordionGroupChange}>
17+
<IonAccordion value="first">
18+
<IonItem slot="header" color="light">
19+
<IonLabel>First Accordion</IonLabel>
20+
</IonItem>
21+
<div className="ion-padding" slot="content">
22+
First Content
23+
</div>
24+
</IonAccordion>
25+
<IonAccordion value="second">
26+
<IonItem slot="header" color="light">
27+
<IonLabel>Second Accordion</IonLabel>
28+
</IonItem>
29+
<div className="ion-padding" slot="content">
30+
Second Content
31+
</div>
32+
</IonAccordion>
33+
<IonAccordion value="third">
34+
<IonItem slot="header" color="light">
35+
<IonLabel>Third Accordion</IonLabel>
36+
</IonItem>
37+
<div className="ion-padding" slot="content">
38+
Third Content
39+
</div>
40+
</IonAccordion>
41+
</IonAccordionGroup>
5242
);
5343
}
5444
export default Example;

‎static/usage/v7/accordion/listen-changes/vue.md

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,11 @@
2020
<div class="ion-padding" slot="content">Third Content</div>
2121
</ion-accordion>
2222
</ion-accordion-group>
23-
24-
<p ref="listenerOut"></p>
2523
</template>
2624

2725
<script lang="ts">
2826
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
29-
import { defineComponent, ref } from 'vue';
27+
import { defineComponent } from 'vue';
3028
3129
export default defineComponent({
3230
components: {
@@ -36,22 +34,19 @@
3634
IonLabel,
3735
},
3836
setup() {
39-
const listenerOut = ref(null);
4037
const values = ['first', 'second', 'third'];
4138
const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
42-
if (!listenerOut.value) {
43-
return;
44-
}
45-
4639
const collapsedItems = values.filter((value) => value !== ev.detail.value);
4740
const selectedValue = ev.detail.value;
4841
49-
listenerOut.value.innerText = `
50-
Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
51-
Collapsed: ${collapsedItems.join(', ')}
52-
`;
42+
console.log(
43+
`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
44+
', '
45+
)}`
46+
);
5347
};
54-
return { listenerOut, accordionGroupChange };
48+
49+
return { accordionGroupChange };
5550
},
5651
});
5752
</script>

‎static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_css.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,4 @@
66
flex-direction: column;
77
height: 100%;
88
}
9-
10-
code {
11-
white-space: pre-wrap;
12-
}
139
```

‎static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@
66
header="Example header"
77
subHeader="Example subheader"
88
[buttons]="actionSheetButtons"
9-
(didDismiss)="setResult($event)"
9+
(didDismiss)="logResult($event)"
1010
></ion-action-sheet>
11-
12-
<code *ngIf="result">{{ result }}</code>
1311
</div>
1412
```

‎static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { Component } from '@angular/core';
77
styleUrls: ['./example.component.css'],
88
})
99
export class ExampleComponent {
10-
result: string;
1110
public actionSheetButtons = [
1211
{
1312
text: 'Delete',
@@ -33,8 +32,8 @@ export class ExampleComponent {
3332

3433
constructor() {}
3534

36-
setResult(ev) {
37-
this.result = JSON.stringify(ev.detail, null, 2);
35+
logResult(ev) {
36+
console.log(JSON.stringify(ev.detail, null, 2));
3837
}
3938
}
4039
```

‎static/usage/v7/action-sheet/role-info-on-dismiss/demo.html

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,6 @@
1313
.container {
1414
flex-direction: column;
1515
}
16-
17-
code {
18-
white-space: pre-wrap;
19-
}
2016
</style>
2117
</head>
2218

@@ -30,14 +26,11 @@
3026
header="Example header"
3127
sub-header="Example subheader"
3228
></ion-action-sheet>
33-
34-
<code id="action"></code>
3529
</div>
3630
</ion-content>
3731
</ion-app>
3832
<script>
3933
const actionSheet = document.querySelector('ion-action-sheet');
40-
const action = document.getElementById('action');
4134

4235
actionSheet.buttons = [
4336
{
@@ -63,7 +56,7 @@
6356
];
6457

6558
actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
66-
action.innerText = JSON.stringify(ev.detail, null, 2);
59+
console.log(JSON.stringify(ev.detail, null, 2));
6760
});
6861
</script>
6962
</body>

‎static/usage/v7/action-sheet/role-info-on-dismiss/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,5 @@ import angular_example_component_css from './angular/example_component_css.md';
3232
}}
3333
src="usage/v7/action-sheet/role-info-on-dismiss/demo.html"
3434
devicePreview
35+
showConsole
3536
/>

‎static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@
77
height: 100%;
88
flex-direction: column;
99
}
10-
11-
code {
12-
white-space: pre-wrap;
13-
}
1410
</style>
1511

1612
<div class="container">
@@ -20,13 +16,10 @@
2016
header="Example header"
2117
sub-header="Example subheader"
2218
></ion-action-sheet>
23-
24-
<code id="action"></code>
2519
</div>
2620

2721
<script>
2822
var actionSheet = document.querySelector('ion-action-sheet');
29-
var action = document.getElementById('action');
3023
3124
actionSheet.buttons = [
3225
{
@@ -52,7 +45,7 @@
5245
];
5346
5447
actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
55-
action.innerText = JSON.stringify(ev.detail, null, 2);
48+
console.log(JSON.stringify(ev.detail, null, 2));
5649
});
5750
</script>
5851
```

‎static/usage/v7/action-sheet/role-info-on-dismiss/react/main_css.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,4 @@
66
flex-direction: column;
77
height: 100%;
88
}
9-
10-
code {
11-
white-space: pre-wrap;
12-
}
139
```

‎static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
```tsx
2-
import React, { useState } from 'react';
2+
import React from 'react';
33
import { IonActionSheet, IonButton } from '@ionic/react';
44
import type { OverlayEventDetail } from '@ionic/core';
55

66
import './main.css';
77

88
function Example() {
9-
const [result, setResult] = useState<OverlayEventDetail>();
9+
const logResult = (result: OverlayEventDetail) => {
10+
console.log(JSON.stringify(result, null, 2));
11+
};
1012

1113
return (
1214
<div className="container">
@@ -37,10 +39,8 @@ function Example() {
3739
},
3840
},
3941
]}
40-
onDidDismiss={({ detail }) => setResult(detail)}
42+
onDidDismiss={({ detail }) => logResult(detail)}
4143
></IonActionSheet>
42-
43-
{result && <code>{JSON.stringify(result, null, 2)}</code>}
4444
</div>
4545
);
4646
}

0 commit comments

Comments
 (0)