From 91d2d0ac9b152c314ec4cf61f897914f5fe9f40e Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 5 Sep 2023 13:47:17 -0500 Subject: [PATCH 01/25] action-sheet/role-info-on-dismiss --- .../angular/example_component_css.md | 4 ---- .../angular/example_component_html.md | 4 +--- .../angular/example_component_ts.md | 5 ++--- .../action-sheet/role-info-on-dismiss/demo.html | 9 +-------- .../action-sheet/role-info-on-dismiss/index.md | 1 + .../role-info-on-dismiss/javascript.md | 9 +-------- .../role-info-on-dismiss/react/main_css.md | 4 ---- .../role-info-on-dismiss/react/main_tsx.md | 10 +++++----- .../v7/action-sheet/role-info-on-dismiss/vue.md | 17 ++++------------- 9 files changed, 15 insertions(+), 48 deletions(-) diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_css.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_css.md index 5058c1b3377..6bf8f4dc7fc 100644 --- a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_css.md +++ b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_css.md @@ -6,8 +6,4 @@ flex-direction: column; height: 100%; } - -code { - white-space: pre-wrap; -} ``` diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md index 6a1d54531f9..7896f219737 100644 --- a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md +++ b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md @@ -6,9 +6,7 @@ header="Example header" subHeader="Example subheader" [buttons]="actionSheetButtons" - (didDismiss)="setResult($event)" + (didDismiss)="logResult($event)" > - - {{ result }} ``` diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md index 95ba12c92f2..a38c0b92307 100644 --- a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md @@ -7,7 +7,6 @@ import { Component } from '@angular/core'; styleUrls: ['./example.component.css'], }) export class ExampleComponent { - result: string; public actionSheetButtons = [ { text: 'Delete', @@ -33,8 +32,8 @@ export class ExampleComponent { constructor() {} - setResult(ev) { - this.result = JSON.stringify(ev.detail, null, 2); + logResult(ev) { + console.log(JSON.stringify(ev.detail, null, 2)); } } ``` diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html index f458e0f2aaa..ff9583515c2 100644 --- a/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html +++ b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html @@ -13,10 +13,6 @@ .container { flex-direction: column; } - - code { - white-space: pre-wrap; - } @@ -30,14 +26,11 @@ header="Example header" sub-header="Example subheader" > - - diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/index.md b/static/usage/v7/action-sheet/role-info-on-dismiss/index.md index 5554f51a928..3e737eb7be8 100644 --- a/static/usage/v7/action-sheet/role-info-on-dismiss/index.md +++ b/static/usage/v7/action-sheet/role-info-on-dismiss/index.md @@ -32,4 +32,5 @@ import angular_example_component_css from './angular/example_component_css.md'; }} src="usage/v7/action-sheet/role-info-on-dismiss/demo.html" devicePreview + showConsole /> diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md b/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md index b247594a1ab..b21645ebac8 100644 --- a/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md +++ b/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md @@ -7,10 +7,6 @@ height: 100%; flex-direction: column; } - - code { - white-space: pre-wrap; - }
@@ -20,13 +16,10 @@ header="Example header" sub-header="Example subheader" > - -
``` diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_css.md b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_css.md index 5058c1b3377..6bf8f4dc7fc 100644 --- a/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_css.md +++ b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_css.md @@ -6,8 +6,4 @@ flex-direction: column; height: 100%; } - -code { - white-space: pre-wrap; -} ``` diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md index 95d3c39a5ef..5728ab3c194 100644 --- a/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md +++ b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md @@ -1,12 +1,14 @@ ```tsx -import React, { useState } from 'react'; +import React from 'react'; import { IonActionSheet, IonButton } from '@ionic/react'; import type { OverlayEventDetail } from '@ionic/core'; import './main.css'; function Example() { - const [result, setResult] = useState(); + const logResult = (result: OverlayEventDetail) => { + console.log(JSON.stringify(result, null, 2)); + }; return (
@@ -37,10 +39,8 @@ function Example() { }, }, ]} - onDidDismiss={({ detail }) => setResult(detail)} + onDidDismiss={({ detail }) => logResult(detail)} > - - {result && {JSON.stringify(result, null, 2)}}
); } diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md index eebfdef1169..6f56c29920d 100644 --- a/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md +++ b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md @@ -7,10 +7,6 @@ height: 100%; flex-direction: column; } - - code { - white-space: pre-wrap; - } - @@ -39,25 +34,19 @@
Third Content
- -

diff --git a/static/usage/v7/accordion/listen-changes/index.md b/static/usage/v7/accordion/listen-changes/index.md index a10dd609b4f..ba6c8134f00 100644 --- a/static/usage/v7/accordion/listen-changes/index.md +++ b/static/usage/v7/accordion/listen-changes/index.md @@ -22,4 +22,5 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }} size="320px" src="usage/v7/accordion/listen-changes/demo.html" + showConsole={true} /> diff --git a/static/usage/v7/accordion/listen-changes/javascript.md b/static/usage/v7/accordion/listen-changes/javascript.md index e7085ca86eb..9d3dc9e058e 100644 --- a/static/usage/v7/accordion/listen-changes/javascript.md +++ b/static/usage/v7/accordion/listen-changes/javascript.md @@ -20,21 +20,15 @@ -

- ``` diff --git a/static/usage/v7/accordion/listen-changes/react.md b/static/usage/v7/accordion/listen-changes/react.md index eb76312b62a..c698724e02f 100644 --- a/static/usage/v7/accordion/listen-changes/react.md +++ b/static/usage/v7/accordion/listen-changes/react.md @@ -1,54 +1,42 @@ ```tsx -import React, { useRef } from 'react'; +import React from 'react'; import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/react'; function Example() { - const listenerOut = useRef(null); const values = ['first', 'second', 'third']; const accordionGroupChange = (ev: AccordionGroupCustomEvent) => { - const nativeEl = listenerOut.current; - if (!nativeEl) { - return; - } - const collapsedItems = values.filter((value) => value !== ev.detail.value); const selectedValue = ev.detail.value; - nativeEl.innerText = ` - Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} - Collapsed: ${collapsedItems.join(', ')} - `; + console.log(`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`); }; return ( - <> - - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -

- + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + ); } export default Example; diff --git a/static/usage/v7/accordion/listen-changes/vue.md b/static/usage/v7/accordion/listen-changes/vue.md index 0086a788ac0..368036cf31f 100644 --- a/static/usage/v7/accordion/listen-changes/vue.md +++ b/static/usage/v7/accordion/listen-changes/vue.md @@ -20,13 +20,11 @@
Third Content
- -

From 96fef2d7e761c44473b4cdffca650dd8fd0dd435 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 5 Sep 2023 14:00:23 -0500 Subject: [PATCH 03/25] alert/buttons --- .../buttons/angular/example_component_html.md | 2 -- .../buttons/angular/example_component_ts.md | 9 +++------ static/usage/v7/alert/buttons/demo.html | 20 +++---------------- static/usage/v7/alert/buttons/index.md | 1 + static/usage/v7/alert/buttons/javascript.md | 10 +++------- static/usage/v7/alert/buttons/react.md | 13 ++++-------- static/usage/v7/alert/buttons/vue.md | 16 +++++---------- 7 files changed, 19 insertions(+), 52 deletions(-) diff --git a/static/usage/v7/alert/buttons/angular/example_component_html.md b/static/usage/v7/alert/buttons/angular/example_component_html.md index 5db8454f7b2..e9843417484 100644 --- a/static/usage/v7/alert/buttons/angular/example_component_html.md +++ b/static/usage/v7/alert/buttons/angular/example_component_html.md @@ -6,6 +6,4 @@ [buttons]="alertButtons" (didDismiss)="setResult($event)" > -

{{ handlerMessage }}

-

{{ roleMessage }}

``` diff --git a/static/usage/v7/alert/buttons/angular/example_component_ts.md b/static/usage/v7/alert/buttons/angular/example_component_ts.md index e3038179e13..20858d60e46 100644 --- a/static/usage/v7/alert/buttons/angular/example_component_ts.md +++ b/static/usage/v7/alert/buttons/angular/example_component_ts.md @@ -6,28 +6,25 @@ import { Component } from '@angular/core'; templateUrl: 'example.component.html', }) export class ExampleComponent { - handlerMessage = ''; - roleMessage = ''; - public alertButtons = [ { text: 'Cancel', role: 'cancel', handler: () => { - this.handlerMessage = 'Alert canceled'; + console.log('Alert canceled'); }, }, { text: 'OK', role: 'confirm', handler: () => { - this.handlerMessage = 'Alert confirmed'; + console.log('Alert confirmed'); }, }, ]; setResult(ev) { - this.roleMessage = `Dismissed with role: ${ev.detail.role}`; + console.log(`Dismissed with role: ${ev.detail.role}`); } } ``` diff --git a/static/usage/v7/alert/buttons/demo.html b/static/usage/v7/alert/buttons/demo.html index 61c4f22f73c..33bb809d3e8 100644 --- a/static/usage/v7/alert/buttons/demo.html +++ b/static/usage/v7/alert/buttons/demo.html @@ -8,16 +8,6 @@ - - @@ -26,15 +16,11 @@
Click Me -

-

diff --git a/static/usage/v7/alert/buttons/index.md b/static/usage/v7/alert/buttons/index.md index 0da89f1f7bd..199efdea2d0 100644 --- a/static/usage/v7/alert/buttons/index.md +++ b/static/usage/v7/alert/buttons/index.md @@ -22,4 +22,5 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }, }} src="usage/v7/alert/buttons/demo.html" + showConsole={true} /> diff --git a/static/usage/v7/alert/buttons/javascript.md b/static/usage/v7/alert/buttons/javascript.md index 292a5d30c2f..21a45f7cf4d 100644 --- a/static/usage/v7/alert/buttons/javascript.md +++ b/static/usage/v7/alert/buttons/javascript.md @@ -1,12 +1,8 @@ ```html Click Me -

-

``` diff --git a/static/usage/v7/alert/buttons/react.md b/static/usage/v7/alert/buttons/react.md index 5512021adca..f9983f46d84 100644 --- a/static/usage/v7/alert/buttons/react.md +++ b/static/usage/v7/alert/buttons/react.md @@ -1,11 +1,8 @@ ```tsx -import React, { useState } from 'react'; +import React from 'react'; import { IonAlert, IonButton } from '@ionic/react'; function Example() { - const [handlerMessage, setHandlerMessage] = useState(''); - const [roleMessage, setRoleMessage] = useState(''); - return ( <> Click Me @@ -17,21 +14,19 @@ function Example() { text: 'Cancel', role: 'cancel', handler: () => { - setHandlerMessage('Alert canceled'); + console.log('Alert canceled'); }, }, { text: 'OK', role: 'confirm', handler: () => { - setHandlerMessage('Alert confirmed'); + console.log('Alert confirmed'); }, }, ]} - onDidDismiss={({ detail }) => setRoleMessage(`Dismissed with role: ${detail.role}`)} + onDidDismiss={({ detail }) => console.log(`Dismissed with role: ${detail.role}`)} > -

{handlerMessage}

-

{roleMessage}

); } diff --git a/static/usage/v7/alert/buttons/vue.md b/static/usage/v7/alert/buttons/vue.md index 25ae70647d0..245797ab7c1 100644 --- a/static/usage/v7/alert/buttons/vue.md +++ b/static/usage/v7/alert/buttons/vue.md @@ -5,38 +5,32 @@ trigger="present-alert" header="Alert!" :buttons="alertButtons" - @didDismiss="setResult($event)" + @didDismiss="logResult($event)" > -

{{ handlerMessage }}

-

{{ roleMessage }}

``` From 82d21d48ef6c769dee6c42aa3a108cbf85359d86 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 5 Sep 2023 14:12:20 -0500 Subject: [PATCH 04/25] content/scroll-events --- .../v7/content/scroll-events/angular/example_component_ts.md | 2 +- static/usage/v7/content/scroll-events/demo.html | 2 +- static/usage/v7/content/scroll-events/index.md | 1 + static/usage/v7/content/scroll-events/javascript.md | 2 +- static/usage/v7/content/scroll-events/react.md | 2 +- static/usage/v7/content/scroll-events/vue.md | 2 +- 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/static/usage/v7/content/scroll-events/angular/example_component_ts.md b/static/usage/v7/content/scroll-events/angular/example_component_ts.md index 7e3f7625f57..ffd3d5b6d12 100644 --- a/static/usage/v7/content/scroll-events/angular/example_component_ts.md +++ b/static/usage/v7/content/scroll-events/angular/example_component_ts.md @@ -12,7 +12,7 @@ export class ExampleComponent { } handleScroll(ev: CustomEvent) { - console.log('scroll', ev.detail); + console.log('scroll', JSON.stringify(ev.detail)); } handleScrollEnd() { diff --git a/static/usage/v7/content/scroll-events/demo.html b/static/usage/v7/content/scroll-events/demo.html index 956aeb3079c..a9ac0d6e8ee 100644 --- a/static/usage/v7/content/scroll-events/demo.html +++ b/static/usage/v7/content/scroll-events/demo.html @@ -70,7 +70,7 @@

Scroll to fire the scroll events and view them in the console.

content.scrollEvents = true; content.addEventListener('ionScrollStart', () => console.log('scroll start')); - content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail)); + content.addEventListener('ionScroll', (ev) => console.log('scroll', JSON.stringify(ev.detail))); content.addEventListener('ionScrollEnd', () => console.log('scroll end')); diff --git a/static/usage/v7/content/scroll-events/index.md b/static/usage/v7/content/scroll-events/index.md index d908468b2f5..aa9a992a48d 100644 --- a/static/usage/v7/content/scroll-events/index.md +++ b/static/usage/v7/content/scroll-events/index.md @@ -23,4 +23,5 @@ import angular_example_component_ts from './angular/example_component_ts.md'; src="usage/v7/content/scroll-events/demo.html" includeIonContent={false} devicePreview={true} + showConsole={true} /> diff --git a/static/usage/v7/content/scroll-events/javascript.md b/static/usage/v7/content/scroll-events/javascript.md index ed54f080780..822a1b04f81 100644 --- a/static/usage/v7/content/scroll-events/javascript.md +++ b/static/usage/v7/content/scroll-events/javascript.md @@ -56,7 +56,7 @@ content.scrollEvents = true; content.addEventListener('ionScrollStart', () => console.log('scroll start')); - content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail)); + content.addEventListener('ionScroll', (ev) => console.log('scroll', JSON.stringify(ev.detail))); content.addEventListener('ionScrollEnd', () => console.log('scroll end')); ``` diff --git a/static/usage/v7/content/scroll-events/react.md b/static/usage/v7/content/scroll-events/react.md index 92a5d4d3bc7..4247de13b39 100644 --- a/static/usage/v7/content/scroll-events/react.md +++ b/static/usage/v7/content/scroll-events/react.md @@ -8,7 +8,7 @@ function Example() { } function handleScroll(ev: CustomEvent) { - console.log('scroll', ev.detail); + console.log('scroll', JSON.stringify(ev.detail)); } function handleScrollEnd() { diff --git a/static/usage/v7/content/scroll-events/vue.md b/static/usage/v7/content/scroll-events/vue.md index ff6e4a17102..1b8bada7d57 100644 --- a/static/usage/v7/content/scroll-events/vue.md +++ b/static/usage/v7/content/scroll-events/vue.md @@ -69,7 +69,7 @@ console.log('scroll start'); }, handleScroll(ev: CustomEvent) { - console.log('scroll', ev.detail); + console.log('scroll', JSON.stringify(ev.detail)); }, handleScrollEnd() { console.log('scroll end'); From f09dc1e33420e9fe5e8759bf029703f68cc8da16 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 5 Sep 2023 14:16:47 -0500 Subject: [PATCH 05/25] picker/controller --- .../usage/v7/picker/controller/angular/example_component_ts.md | 2 +- static/usage/v7/picker/controller/demo.html | 2 +- static/usage/v7/picker/controller/index.md | 1 + static/usage/v7/picker/controller/javascript.md | 2 +- static/usage/v7/picker/controller/react.md | 2 +- static/usage/v7/picker/controller/vue.md | 2 +- 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/static/usage/v7/picker/controller/angular/example_component_ts.md b/static/usage/v7/picker/controller/angular/example_component_ts.md index 849da3f0f16..16f56cd0ca7 100644 --- a/static/usage/v7/picker/controller/angular/example_component_ts.md +++ b/static/usage/v7/picker/controller/angular/example_component_ts.md @@ -42,7 +42,7 @@ export class ExampleComponent { { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ], diff --git a/static/usage/v7/picker/controller/demo.html b/static/usage/v7/picker/controller/demo.html index ea0ea153593..6b6800a2c96 100644 --- a/static/usage/v7/picker/controller/demo.html +++ b/static/usage/v7/picker/controller/demo.html @@ -56,7 +56,7 @@ { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ], diff --git a/static/usage/v7/picker/controller/index.md b/static/usage/v7/picker/controller/index.md index 890436259bb..249e2306736 100644 --- a/static/usage/v7/picker/controller/index.md +++ b/static/usage/v7/picker/controller/index.md @@ -22,4 +22,5 @@ import angular_example_component_html from './angular/example_component_html.md' }} src="usage/v7/picker/controller/demo.html" size="medium" + showConsole={true} /> diff --git a/static/usage/v7/picker/controller/javascript.md b/static/usage/v7/picker/controller/javascript.md index ca15ad55132..2ee271cbea8 100644 --- a/static/usage/v7/picker/controller/javascript.md +++ b/static/usage/v7/picker/controller/javascript.md @@ -35,7 +35,7 @@ { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ], diff --git a/static/usage/v7/picker/controller/react.md b/static/usage/v7/picker/controller/react.md index d0c351a9368..90124100d63 100644 --- a/static/usage/v7/picker/controller/react.md +++ b/static/usage/v7/picker/controller/react.md @@ -38,7 +38,7 @@ function Example() { { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ], diff --git a/static/usage/v7/picker/controller/vue.md b/static/usage/v7/picker/controller/vue.md index 71660c96aeb..54fedf2cce3 100644 --- a/static/usage/v7/picker/controller/vue.md +++ b/static/usage/v7/picker/controller/vue.md @@ -48,7 +48,7 @@ { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ], From c3aa63383ea8599f2acb53a4f29358f86300274e Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 5 Sep 2023 14:18:03 -0500 Subject: [PATCH 06/25] picker/inline/isOpen --- .../v7/picker/inline/isOpen/angular/example_component_ts.md | 2 +- static/usage/v7/picker/inline/isOpen/demo.html | 2 +- static/usage/v7/picker/inline/isOpen/index.md | 1 + static/usage/v7/picker/inline/isOpen/javascript.md | 2 +- static/usage/v7/picker/inline/isOpen/react.md | 2 +- static/usage/v7/picker/inline/isOpen/vue.md | 2 +- 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md b/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md index b8c2a7948a7..69a5fb611aa 100644 --- a/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md +++ b/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md @@ -40,7 +40,7 @@ export class ExampleComponent { { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ]; diff --git a/static/usage/v7/picker/inline/isOpen/demo.html b/static/usage/v7/picker/inline/isOpen/demo.html index 1ea9a11c35a..c76e2ed34b5 100644 --- a/static/usage/v7/picker/inline/isOpen/demo.html +++ b/static/usage/v7/picker/inline/isOpen/demo.html @@ -54,7 +54,7 @@ { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ]; diff --git a/static/usage/v7/picker/inline/isOpen/index.md b/static/usage/v7/picker/inline/isOpen/index.md index 34a92521bad..0c06e8579b1 100644 --- a/static/usage/v7/picker/inline/isOpen/index.md +++ b/static/usage/v7/picker/inline/isOpen/index.md @@ -22,4 +22,5 @@ import angular_example_component_html from './angular/example_component_html.md' }} src="usage/v7/picker/inline/isOpen/demo.html" size="medium" + showConsole={true} /> diff --git a/static/usage/v7/picker/inline/isOpen/javascript.md b/static/usage/v7/picker/inline/isOpen/javascript.md index c08477a59b2..fdf1fd8c3f5 100644 --- a/static/usage/v7/picker/inline/isOpen/javascript.md +++ b/static/usage/v7/picker/inline/isOpen/javascript.md @@ -37,7 +37,7 @@ { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ]; diff --git a/static/usage/v7/picker/inline/isOpen/react.md b/static/usage/v7/picker/inline/isOpen/react.md index b7e61f682f9..b618bd48dc9 100644 --- a/static/usage/v7/picker/inline/isOpen/react.md +++ b/static/usage/v7/picker/inline/isOpen/react.md @@ -42,7 +42,7 @@ function Example() { { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ]} diff --git a/static/usage/v7/picker/inline/isOpen/vue.md b/static/usage/v7/picker/inline/isOpen/vue.md index 9bcceb96851..bd03157e734 100644 --- a/static/usage/v7/picker/inline/isOpen/vue.md +++ b/static/usage/v7/picker/inline/isOpen/vue.md @@ -50,7 +50,7 @@ { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ]; From 6f82577800fa4156bc8a39d9871d3e0a51ea187a Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 5 Sep 2023 14:18:58 -0500 Subject: [PATCH 07/25] picker/inline/trigger --- .../v7/picker/inline/trigger/angular/example_component_ts.md | 2 +- static/usage/v7/picker/inline/trigger/demo.html | 2 +- static/usage/v7/picker/inline/trigger/index.md | 1 + static/usage/v7/picker/inline/trigger/javascript.md | 2 +- static/usage/v7/picker/inline/trigger/react.md | 2 +- static/usage/v7/picker/inline/trigger/vue.md | 2 +- 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md index 90413b31470..7a638c60964 100644 --- a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md +++ b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md @@ -38,7 +38,7 @@ export class ExampleComponent { { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ]; diff --git a/static/usage/v7/picker/inline/trigger/demo.html b/static/usage/v7/picker/inline/trigger/demo.html index 4a0f14c6c05..b5c3c1e790f 100644 --- a/static/usage/v7/picker/inline/trigger/demo.html +++ b/static/usage/v7/picker/inline/trigger/demo.html @@ -54,7 +54,7 @@ { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ]; diff --git a/static/usage/v7/picker/inline/trigger/index.md b/static/usage/v7/picker/inline/trigger/index.md index 1bd0ab3950f..27b6911cd47 100644 --- a/static/usage/v7/picker/inline/trigger/index.md +++ b/static/usage/v7/picker/inline/trigger/index.md @@ -22,4 +22,5 @@ import angular_example_component_html from './angular/example_component_html.md' }} src="usage/v7/picker/inline/trigger/demo.html" size="medium" + showConsole={true} /> diff --git a/static/usage/v7/picker/inline/trigger/javascript.md b/static/usage/v7/picker/inline/trigger/javascript.md index e02349631ba..ba7c07dd0e8 100644 --- a/static/usage/v7/picker/inline/trigger/javascript.md +++ b/static/usage/v7/picker/inline/trigger/javascript.md @@ -37,7 +37,7 @@ { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ]; diff --git a/static/usage/v7/picker/inline/trigger/react.md b/static/usage/v7/picker/inline/trigger/react.md index 08506f7fb30..4b0e09239a0 100644 --- a/static/usage/v7/picker/inline/trigger/react.md +++ b/static/usage/v7/picker/inline/trigger/react.md @@ -39,7 +39,7 @@ function Example() { { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ]} diff --git a/static/usage/v7/picker/inline/trigger/vue.md b/static/usage/v7/picker/inline/trigger/vue.md index 07046c63cf7..05a4d215b9e 100644 --- a/static/usage/v7/picker/inline/trigger/vue.md +++ b/static/usage/v7/picker/inline/trigger/vue.md @@ -43,7 +43,7 @@ { text: 'Confirm', handler: (value) => { - window.alert(`You selected: ${value.languages.value}`); + console.log(`You selected: ${value.languages.value}`); }, }, ]; From d8dcaf6daa55c770e25aa429ecc1fb6a976f1484 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 5 Sep 2023 14:20:16 -0500 Subject: [PATCH 08/25] picker/multiple-column --- .../v7/picker/multiple-column/angular/example_component_ts.md | 2 +- static/usage/v7/picker/multiple-column/demo.html | 2 +- static/usage/v7/picker/multiple-column/index.md | 1 + static/usage/v7/picker/multiple-column/javascript.md | 2 +- static/usage/v7/picker/multiple-column/react.md | 2 +- static/usage/v7/picker/multiple-column/vue.md | 2 +- 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md index 10790602bc8..6f252e19dc9 100644 --- a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md +++ b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md @@ -68,7 +68,7 @@ export class ExampleComponent { { text: 'Confirm', handler: (value) => { - window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); + console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); }, }, ]; diff --git a/static/usage/v7/picker/multiple-column/demo.html b/static/usage/v7/picker/multiple-column/demo.html index 142618d1061..17c0591fae7 100644 --- a/static/usage/v7/picker/multiple-column/demo.html +++ b/static/usage/v7/picker/multiple-column/demo.html @@ -84,7 +84,7 @@ { text: 'Confirm', handler: (value) => { - window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); + console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); }, }, ]; diff --git a/static/usage/v7/picker/multiple-column/index.md b/static/usage/v7/picker/multiple-column/index.md index 48a6d1202fa..5016456a9ae 100644 --- a/static/usage/v7/picker/multiple-column/index.md +++ b/static/usage/v7/picker/multiple-column/index.md @@ -22,4 +22,5 @@ import angular_example_component_html from './angular/example_component_html.md' }} src="usage/v7/picker/multiple-column/demo.html" size="medium" + showConsole={true} /> diff --git a/static/usage/v7/picker/multiple-column/javascript.md b/static/usage/v7/picker/multiple-column/javascript.md index 9196a0dc7c7..28b44dedaef 100644 --- a/static/usage/v7/picker/multiple-column/javascript.md +++ b/static/usage/v7/picker/multiple-column/javascript.md @@ -67,7 +67,7 @@ { text: 'Confirm', handler: (value) => { - window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); + console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); }, }, ]; diff --git a/static/usage/v7/picker/multiple-column/react.md b/static/usage/v7/picker/multiple-column/react.md index cd01f4aa199..0de671f73f6 100644 --- a/static/usage/v7/picker/multiple-column/react.md +++ b/static/usage/v7/picker/multiple-column/react.md @@ -69,7 +69,7 @@ function Example() { { text: 'Confirm', handler: (value) => { - window.alert( + console.log( `You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}` ); }, diff --git a/static/usage/v7/picker/multiple-column/vue.md b/static/usage/v7/picker/multiple-column/vue.md index 16251372059..d396dcf9c9b 100644 --- a/static/usage/v7/picker/multiple-column/vue.md +++ b/static/usage/v7/picker/multiple-column/vue.md @@ -73,7 +73,7 @@ { text: 'Confirm', handler: (value) => { - window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); + console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); }, }, ]; From 617dc96a47c0e814501606b4f7311230d97067a2 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 5 Sep 2023 14:30:35 -0500 Subject: [PATCH 09/25] modal/inline/basic --- .../inline/basic/angular/example_component_html.md | 4 +--- .../inline/basic/angular/example_component_ts.md | 3 +-- static/usage/v7/modal/inline/basic/demo.html | 7 ++----- static/usage/v7/modal/inline/basic/index.md | 1 + static/usage/v7/modal/inline/basic/javascript.md | 7 ++----- static/usage/v7/modal/inline/basic/react.md | 13 +++---------- static/usage/v7/modal/inline/basic/vue.md | 9 ++------- 7 files changed, 12 insertions(+), 32 deletions(-) diff --git a/static/usage/v7/modal/inline/basic/angular/example_component_html.md b/static/usage/v7/modal/inline/basic/angular/example_component_html.md index d89c7626f3d..ec8a4c68c74 100644 --- a/static/usage/v7/modal/inline/basic/angular/example_component_html.md +++ b/static/usage/v7/modal/inline/basic/angular/example_component_html.md @@ -6,7 +6,6 @@ Open -

{{ message }}

@@ -22,8 +21,7 @@ - Enter your name - + diff --git a/static/usage/v7/modal/inline/basic/angular/example_component_ts.md b/static/usage/v7/modal/inline/basic/angular/example_component_ts.md index a21954ec5f1..6bb49aed57e 100644 --- a/static/usage/v7/modal/inline/basic/angular/example_component_ts.md +++ b/static/usage/v7/modal/inline/basic/angular/example_component_ts.md @@ -10,7 +10,6 @@ import { OverlayEventDetail } from '@ionic/core/components'; export class ExampleComponent { @ViewChild(IonModal) modal: IonModal; - message = 'This modal example uses triggers to automatically open a modal when the button is clicked.'; name: string; cancel() { @@ -24,7 +23,7 @@ export class ExampleComponent { onWillDismiss(event: Event) { const ev = event as CustomEvent>; if (ev.detail.role === 'confirm') { - this.message = `Hello, ${ev.detail.data}!`; + console.log(`Hello, ${ev.detail.data}!`); } } } diff --git a/static/usage/v7/modal/inline/basic/demo.html b/static/usage/v7/modal/inline/basic/demo.html index 9ea5eab1699..fc647ab978d 100644 --- a/static/usage/v7/modal/inline/basic/demo.html +++ b/static/usage/v7/modal/inline/basic/demo.html @@ -19,7 +19,6 @@ Open -

This modal example uses triggers to automatically open a modal when the button is clicked.

@@ -34,8 +33,7 @@ - Enter your name - + @@ -56,8 +54,7 @@ modal.addEventListener('willDismiss', (ev) => { if (ev.detail.role === 'confirm') { - const message = document.querySelector('#message'); - message.textContent = `Hello ${ev.detail.data}!`; + console.log(`Hello ${ev.detail.data}!`); } }); diff --git a/static/usage/v7/modal/inline/basic/index.md b/static/usage/v7/modal/inline/basic/index.md index 1406cd29c09..70e2f83d0b3 100644 --- a/static/usage/v7/modal/inline/basic/index.md +++ b/static/usage/v7/modal/inline/basic/index.md @@ -23,4 +23,5 @@ import angular_example_component_ts from './angular/example_component_ts.md'; src="usage/v7/modal/inline/basic/demo.html" devicePreview includeIonContent={false} + showConsole={true} /> diff --git a/static/usage/v7/modal/inline/basic/javascript.md b/static/usage/v7/modal/inline/basic/javascript.md index cffa297eebd..368f2279ae9 100644 --- a/static/usage/v7/modal/inline/basic/javascript.md +++ b/static/usage/v7/modal/inline/basic/javascript.md @@ -6,7 +6,6 @@ Open -

This modal example uses triggers to automatically open a modal when the button is clicked.

@@ -21,8 +20,7 @@ - Enter your name - + @@ -42,8 +40,7 @@ modal.addEventListener('willDismiss', (ev) => { if (ev.detail.role === 'confirm') { - const message = document.querySelector('#message'); - message.textContent = `Hello ${ev.detail.data}!`; + console.log(`Hello ${ev.detail.data}!`); } }); diff --git a/static/usage/v7/modal/inline/basic/react.md b/static/usage/v7/modal/inline/basic/react.md index aa465052e4c..3b89b93e2e5 100644 --- a/static/usage/v7/modal/inline/basic/react.md +++ b/static/usage/v7/modal/inline/basic/react.md @@ -1,5 +1,5 @@ ```tsx -import React, { useState, useRef } from 'react'; +import React, { useRef } from 'react'; import { IonButtons, IonButton, @@ -10,7 +10,6 @@ import { IonTitle, IonPage, IonItem, - IonLabel, IonInput, } from '@ionic/react'; import { OverlayEventDetail } from '@ionic/core/components'; @@ -19,17 +18,13 @@ function Example() { const modal = useRef(null); const input = useRef(null); - const [message, setMessage] = useState( - 'This modal example uses triggers to automatically open a modal when the button is clicked.' - ); - function confirm() { modal.current?.dismiss(input.current?.value, 'confirm'); } function onWillDismiss(ev: CustomEvent) { if (ev.detail.role === 'confirm') { - setMessage(`Hello, ${ev.detail.data}!`); + console.log(`Hello, ${ev.detail.data}!`); } } @@ -44,7 +39,6 @@ function Example() { Open -

{message}

onWillDismiss(ev)}> @@ -61,8 +55,7 @@ function Example() { - Enter your name - + diff --git a/static/usage/v7/modal/inline/basic/vue.md b/static/usage/v7/modal/inline/basic/vue.md index 2c5435b4335..5ad2f58c53a 100644 --- a/static/usage/v7/modal/inline/basic/vue.md +++ b/static/usage/v7/modal/inline/basic/vue.md @@ -7,7 +7,6 @@ Open -

{{ message }}

@@ -22,8 +21,7 @@ - Enter your name - + @@ -41,13 +39,10 @@ IonTitle, IonItem, IonInput, - IonLabel, } from '@ionic/vue'; import { OverlayEventDetail } from '@ionic/core/components'; import { ref } from 'vue'; - const message = ref('This modal example uses triggers to automatically open a modal when the button is clicked.'); - const modal = ref(); const input = ref(); @@ -60,7 +55,7 @@ const onWillDismiss = (ev: CustomEvent) => { if (ev.detail.role === 'confirm') { - message.value = `Hello, ${ev.detail.data}!`; + console.log(`Hello, ${ev.detail.data}!`); } }; From 0677f82f34ba7a8ab3649561b6424c11b03e17db Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 6 Sep 2023 09:46:18 -0500 Subject: [PATCH 10/25] modal/controller --- .../angular/example_component_html.md | 1 - .../angular/example_component_ts.md | 4 +- static/usage/v7/modal/controller/demo.html | 37 +++++++++---------- static/usage/v7/modal/controller/index.md | 1 + .../usage/v7/modal/controller/javascript.md | 5 +-- static/usage/v7/modal/controller/react.md | 6 +-- .../v7/modal/controller/vue/example_vue.md | 6 +-- 7 files changed, 25 insertions(+), 35 deletions(-) diff --git a/static/usage/v7/modal/controller/angular/example_component_html.md b/static/usage/v7/modal/controller/angular/example_component_html.md index 1920bb7a4a0..cc17eae07e8 100644 --- a/static/usage/v7/modal/controller/angular/example_component_html.md +++ b/static/usage/v7/modal/controller/angular/example_component_html.md @@ -6,6 +6,5 @@ Open -

{{ message }}

 ``` diff --git a/static/usage/v7/modal/controller/angular/example_component_ts.md b/static/usage/v7/modal/controller/angular/example_component_ts.md index 920a2335257..f5a72481994 100644 --- a/static/usage/v7/modal/controller/angular/example_component_ts.md +++ b/static/usage/v7/modal/controller/angular/example_component_ts.md @@ -9,8 +9,6 @@ import { ModalExampleComponent } from './modal-example.component'; templateUrl: 'example.component.html', }) export class ExampleComponent { - message = 'This modal example uses the modalController to present and dismiss modals.'; - constructor(private modalCtrl: ModalController) {} async openModal() { @@ -22,7 +20,7 @@ export class ExampleComponent { const { data, role } = await modal.onWillDismiss(); if (role === 'confirm') { - this.message = `Hello, ${data}!`; + console.log(`Hello, ${data}!`); } } } diff --git a/static/usage/v7/modal/controller/demo.html b/static/usage/v7/modal/controller/demo.html index 5a146f90afb..1f26867e5e0 100644 --- a/static/usage/v7/modal/controller/demo.html +++ b/static/usage/v7/modal/controller/demo.html @@ -23,7 +23,6 @@ Open -

This modal example uses the modalController to present and dismiss modals.

 @@ -31,23 +30,23 @@ const openModal = async () => { const div = document.createElement('div'); div.innerHTML = ` - - - - Cancel - - Welcome - - Confirm - - - - - - - - - `; + + + + Cancel + + Welcome + + Confirm + + + + + + + + + `; const modal = await modalController.create({ component: div, @@ -58,7 +57,7 @@ const { data, role } = await modal.onWillDismiss(); if (role === 'confirm') { - document.querySelector('#message').innerHTML = `Hello, ${data}!`; + console.log(`Hello, ${data}!`); } }; diff --git a/static/usage/v7/modal/controller/index.md b/static/usage/v7/modal/controller/index.md index 750bbe53efb..7af4f8b1c19 100644 --- a/static/usage/v7/modal/controller/index.md +++ b/static/usage/v7/modal/controller/index.md @@ -36,4 +36,5 @@ import angular_modal_example_component_html from './angular/modal-example_compon src="usage/v7/modal/controller/demo.html" devicePreview includeIonContent={false} + showConsole={true} /> diff --git a/static/usage/v7/modal/controller/javascript.md b/static/usage/v7/modal/controller/javascript.md index ca5bb55011c..59d2e712509 100644 --- a/static/usage/v7/modal/controller/javascript.md +++ b/static/usage/v7/modal/controller/javascript.md @@ -6,7 +6,6 @@ Open -

This modal example uses the modalController to present and dismiss modals.

 From 08f50707d340cb2ffa41d23f46d58183c44eb41d Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 6 Sep 2023 09:51:53 -0500 Subject: [PATCH 11/25] popover/presenting/controller --- .../angular/example_component_html.md | 1 - .../angular/example_component_ts.md | 4 +-- .../popover/presenting/controller/demo.html | 11 +------- .../v7/popover/presenting/controller/index.md | 1 + .../presenting/controller/javascript.md | 5 +--- .../v7/popover/presenting/controller/react.md | 26 ++++++++----------- .../presenting/controller/vue/example_vue.md | 8 +----- 7 files changed, 16 insertions(+), 40 deletions(-) diff --git a/static/usage/v7/popover/presenting/controller/angular/example_component_html.md b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md index f84fbf6fd80..679b36f5040 100644 --- a/static/usage/v7/popover/presenting/controller/angular/example_component_html.md +++ b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md @@ -1,4 +1,3 @@ ```html Click Me -

{{ roleMsg }}

``` diff --git a/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md index bf0e0165d78..647bef04dac 100644 --- a/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md +++ b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md @@ -10,8 +10,6 @@ import { PopoverComponent } from './popover.component'; templateUrl: 'example.component.html', }) export class ExampleComponent { - roleMsg = ''; - constructor(public popoverController: PopoverController) {} async presentPopover(e: Event) { @@ -23,7 +21,7 @@ export class ExampleComponent { await popover.present(); const { role } = await popover.onDidDismiss(); - this.roleMsg = `Popover dismissed with role: ${role}`; + console.log(`Popover dismissed with role: ${role}`); } } ``` diff --git a/static/usage/v7/popover/presenting/controller/demo.html b/static/usage/v7/popover/presenting/controller/demo.html index 25db62b4be8..8145dd5ce0e 100644 --- a/static/usage/v7/popover/presenting/controller/demo.html +++ b/static/usage/v7/popover/presenting/controller/demo.html @@ -8,12 +8,6 @@ - - @@ -21,14 +15,11 @@
Click Me -

diff --git a/static/usage/v7/range/ion-knob-move-event/index.md b/static/usage/v7/range/ion-knob-move-event/index.md index 772cf127ed2..3a88d90412d 100644 --- a/static/usage/v7/range/ion-knob-move-event/index.md +++ b/static/usage/v7/range/ion-knob-move-event/index.md @@ -21,4 +21,5 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }, }} src="usage/v7/range/ion-knob-move-event/demo.html" + showConsole={true} /> diff --git a/static/usage/v7/range/ion-knob-move-event/javascript.md b/static/usage/v7/range/ion-knob-move-event/javascript.md index aacaac60e37..5f7389814ba 100644 --- a/static/usage/v7/range/ion-knob-move-event/javascript.md +++ b/static/usage/v7/range/ion-knob-move-event/javascript.md @@ -1,23 +1,15 @@ ```html -
- ionKnobMoveStart: -
-
- ionKnobMoveEnd: -
``` diff --git a/static/usage/v7/range/ion-knob-move-event/react.md b/static/usage/v7/range/ion-knob-move-event/react.md index f7f20048349..7085cc5c3b7 100644 --- a/static/usage/v7/range/ion-knob-move-event/react.md +++ b/static/usage/v7/range/ion-knob-move-event/react.md @@ -1,24 +1,14 @@ ```tsx -import React, { useState } from 'react'; -import { IonLabel, IonRange } from '@ionic/react'; -import { RangeValue } from '@ionic/core'; +import React from 'react'; +import { IonRange } from '@ionic/react'; + function Example() { - const [moveStartValue, setMoveStartValue] = useState(); - const [moveEndValue, setMoveEndValue] = useState(); return ( - <> - setMoveStartValue(detail.value)} - onIonKnobMoveEnd={({ detail }) => setMoveEndValue(detail.value)} - > -
- ionKnobMoveStart: {moveStartValue as number} -
-
- ionKnobMoveEnd: {moveEndValue as number} -
- + console.log('ionKnobMoveStart:', detail.value)} + onIonKnobMoveEnd={({ detail }) => console.log('ionKnobMoveEnd:', detail.value)} + > ); } export default Example; diff --git a/static/usage/v7/range/ion-knob-move-event/vue.md b/static/usage/v7/range/ion-knob-move-event/vue.md index 373044281b7..84531f16f2c 100644 --- a/static/usage/v7/range/ion-knob-move-event/vue.md +++ b/static/usage/v7/range/ion-knob-move-event/vue.md @@ -5,32 +5,20 @@ @ionKnobMoveStart="onIonKnobMoveStart" @ionKnobMoveEnd="onIonKnobMoveEnd" > -
- ionKnobMoveStart: {{moveStart}} -
-
- onIonKnobMoveEnd: {{moveEnd}} -
- -
-
- - - - Apples - Oranges - Bananas - - - - -
-
+ + + + Apples + Oranges + Bananas + + +
diff --git a/static/usage/v7/select/basic/responding-to-interaction/index.md b/static/usage/v7/select/basic/responding-to-interaction/index.md index 583ffe168f6..e17708e1e45 100644 --- a/static/usage/v7/select/basic/responding-to-interaction/index.md +++ b/static/usage/v7/select/basic/responding-to-interaction/index.md @@ -22,4 +22,5 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }, }} src="usage/v7/select/basic/responding-to-interaction/demo.html" + showConsole={true} /> diff --git a/static/usage/v7/select/basic/responding-to-interaction/javascript.md b/static/usage/v7/select/basic/responding-to-interaction/javascript.md index 2a737be09bb..aad9323759a 100644 --- a/static/usage/v7/select/basic/responding-to-interaction/javascript.md +++ b/static/usage/v7/select/basic/responding-to-interaction/javascript.md @@ -8,22 +8,20 @@ -
``` diff --git a/static/usage/v7/select/basic/responding-to-interaction/react.md b/static/usage/v7/select/basic/responding-to-interaction/react.md index 2753a2dc611..647d0f38317 100644 --- a/static/usage/v7/select/basic/responding-to-interaction/react.md +++ b/static/usage/v7/select/basic/responding-to-interaction/react.md @@ -1,37 +1,25 @@ ```tsx -import React, { useState } from 'react'; +import React from 'react'; import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; function Example() { - const [logs, setLogs] = useState([]); - - const pushLog = (msg: string) => { - setLogs([msg, ...logs]); - }; return ( - <> - - - pushLog(`ionChange fired with value: ${e.detail.value}`)} - onIonCancel={() => pushLog('ionCancel fired')} - onIonDismiss={() => pushLog('ionDismiss fired')} - > - Apples - Oranges - Bananas - - - -
- {logs.map((log) => ( -

{log}

- ))} -
- + + + console.log(`ionChange fired with value: ${e.detail.value}`)} + onIonCancel={() => console.log('ionCancel fired')} + onIonDismiss={() => console.log('ionDismiss fired')} + > + Apples + Oranges + Bananas + + + ); } diff --git a/static/usage/v7/select/basic/responding-to-interaction/vue.md b/static/usage/v7/select/basic/responding-to-interaction/vue.md index f3db28c64c4..73aec561007 100644 --- a/static/usage/v7/select/basic/responding-to-interaction/vue.md +++ b/static/usage/v7/select/basic/responding-to-interaction/vue.md @@ -5,9 +5,9 @@ Apples Oranges @@ -15,9 +15,6 @@ -
-

{{ log }}

-
- - @@ -24,12 +18,6 @@ - - - Current value: - - - @@ -68,9 +56,8 @@ selectEl.appendChild(selectOption); }); - const valueLabel = document.querySelector('ion-text'); selectEl.addEventListener('ionChange', () => { - valueLabel.innerHTML = JSON.stringify(selectEl.value); + console.log('Current value:', JSON.stringify(selectEl.value)); }); diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/index.md b/static/usage/v7/select/objects-as-values/using-comparewith/index.md index f6e530c8ba2..25c58651971 100644 --- a/static/usage/v7/select/objects-as-values/using-comparewith/index.md +++ b/static/usage/v7/select/objects-as-values/using-comparewith/index.md @@ -22,4 +22,5 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }, }} src="usage/v7/select/objects-as-values/using-comparewith/demo.html" + showConsole={true} /> diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md b/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md index cfcb848b768..4c4a831c91f 100644 --- a/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md +++ b/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md @@ -3,12 +3,6 @@ - - - Current value: - - - ``` diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/react.md b/static/usage/v7/select/objects-as-values/using-comparewith/react.md index 08512071f7a..ff1fe016e84 100644 --- a/static/usage/v7/select/objects-as-values/using-comparewith/react.md +++ b/static/usage/v7/select/objects-as-values/using-comparewith/react.md @@ -1,6 +1,6 @@ ```tsx -import React, { useState } from 'react'; -import { IonItem, IonList, IonLabel, IonSelect, IonSelectOption } from '@ionic/react'; +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; interface Food { id: number; @@ -31,8 +31,6 @@ const compareWith = (o1: Food, o2: Food) => { }; function Example() { - const [currentFood, setCurrentFood] = useState(''); - return ( @@ -40,7 +38,7 @@ function Example() { aria-label="Food" placeholder="Select food" compareWith={compareWith} - onIonChange={(ev) => setCurrentFood(JSON.stringify(ev.detail.value))} + onIonChange={(ev) => console.log('Current value:', JSON.stringify(ev.detail.value))} > {foods.map((food) => ( @@ -49,9 +47,6 @@ function Example() { ))} - - Current food: {currentFood} - ); } diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/vue.md b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md index 2603ff71164..e93b223f6a1 100644 --- a/static/usage/v7/select/objects-as-values/using-comparewith/vue.md +++ b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md @@ -6,26 +6,22 @@ aria-label="Food" placeholder="Select fruit" :compareWith="compareWith" - @ionChange="currentFood = JSON.stringify($event.detail.value)" + @ionChange="handleChange($event)" > {{ food.name }} - - Current value: {{ currentFood }} - From 2ea17cd796666c84ac16f1142057e1ddc8833458 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 6 Sep 2023 12:49:21 -0500 Subject: [PATCH 21/25] select/objects-as-values/multiple-selection --- .../angular/example_component_html.md | 3 --- .../angular/example_component_ts.md | 4 +--- .../multiple-selection/demo.html | 19 +------------------ .../multiple-selection/index.md | 1 + .../multiple-selection/javascript.md | 9 +-------- .../multiple-selection/react.md | 11 +++-------- .../multiple-selection/vue.md | 13 ++++++------- 7 files changed, 13 insertions(+), 47 deletions(-) diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md index 6f1354b96a8..af00be1957e 100644 --- a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md +++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md @@ -11,8 +11,5 @@ {{ food.name }} - - Current value: {{ currentFood | json }} - ``` diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md index 76fa7e51e49..c33570deec9 100644 --- a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md +++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md @@ -6,8 +6,6 @@ import { Component } from '@angular/core'; templateUrl: 'example.component.html', }) export class ExampleComponent { - currentFood = undefined; - foods = [ { id: 1, @@ -39,7 +37,7 @@ export class ExampleComponent { } handleChange(ev) { - this.currentFood = ev.target.value; + console.log('Current value:', JSON.stringify(ev.target.value)); } } ``` diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/demo.html b/static/usage/v7/select/objects-as-values/multiple-selection/demo.html index d9b3f071f7c..dff14888c6c 100644 --- a/static/usage/v7/select/objects-as-values/multiple-selection/demo.html +++ b/static/usage/v7/select/objects-as-values/multiple-selection/demo.html @@ -8,16 +8,6 @@ - - @@ -28,12 +18,6 @@ - - - Current value: - - - @@ -80,9 +64,8 @@ selectEl.appendChild(selectOption); }); - const valueLabel = document.querySelector('ion-text'); selectEl.addEventListener('ionChange', () => { - valueLabel.innerHTML = JSON.stringify(selectEl.value); + console.log('Current value:', JSON.stringify(selectEl.value)); }); diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/index.md b/static/usage/v7/select/objects-as-values/multiple-selection/index.md index c81c011718e..d28b2b1926d 100644 --- a/static/usage/v7/select/objects-as-values/multiple-selection/index.md +++ b/static/usage/v7/select/objects-as-values/multiple-selection/index.md @@ -22,4 +22,5 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }, }} src="usage/v7/select/objects-as-values/multiple-selection/demo.html" + showConsole={true} /> diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md b/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md index 8b18603b344..fef901c8e28 100644 --- a/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md +++ b/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md @@ -3,12 +3,6 @@ - - - Current value: - - - ``` diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/react.md b/static/usage/v7/select/objects-as-values/multiple-selection/react.md index 2ab4681fa91..a41ed0c8670 100644 --- a/static/usage/v7/select/objects-as-values/multiple-selection/react.md +++ b/static/usage/v7/select/objects-as-values/multiple-selection/react.md @@ -1,6 +1,6 @@ ```tsx -import React, { useState } from 'react'; -import { IonItem, IonList, IonLabel, IonSelect, IonSelectOption } from '@ionic/react'; +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; interface Food { id: number; @@ -39,8 +39,6 @@ const compareWith = (o1: Food, o2: Food) => { }; function Example() { - const [currentFood, setCurrentFood] = useState(''); - return ( @@ -48,7 +46,7 @@ function Example() { aria-label="Food" placeholder="Select food" compareWith={compareWith} - onIonChange={(ev) => setCurrentFood(JSON.stringify(ev.detail.value))} + onIonChange={(ev) => console.log('Current value:', JSON.stringify(ev.detail.value))} multiple={true} > {foods.map((food) => ( @@ -58,9 +56,6 @@ function Example() { ))} - - Current value: {currentFood} - ); } diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/vue.md b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md index 0c07d17d52e..cf095fd89c0 100644 --- a/static/usage/v7/select/objects-as-values/multiple-selection/vue.md +++ b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md @@ -6,27 +6,23 @@ aria-label="Food" placeholder="Select food" :compareWith="compareWith" - @ionChange="currentFood = JSON.stringify($event.detail.value)" + @ionChange="handleChange($event)" :multiple="true" > {{ food.name }} - - Current value: {{ currentFood }} - From 082bbcce653ea5265dd619e13dfa9001cc0c47ba Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 6 Sep 2023 13:02:07 -0500 Subject: [PATCH 22/25] toast/buttons --- .../buttons/angular/example_component_html.md | 2 -- .../buttons/angular/example_component_ts.md | 8 +++----- static/usage/v7/toast/buttons/demo.html | 20 +++---------------- static/usage/v7/toast/buttons/index.md | 1 + static/usage/v7/toast/buttons/javascript.md | 10 +++------- static/usage/v7/toast/buttons/react.md | 13 ++++-------- static/usage/v7/toast/buttons/vue.md | 17 ++++++---------- 7 files changed, 20 insertions(+), 51 deletions(-) diff --git a/static/usage/v7/toast/buttons/angular/example_component_html.md b/static/usage/v7/toast/buttons/angular/example_component_html.md index 36717f5eb9a..15ced1fb702 100644 --- a/static/usage/v7/toast/buttons/angular/example_component_html.md +++ b/static/usage/v7/toast/buttons/angular/example_component_html.md @@ -7,6 +7,4 @@ [buttons]="toastButtons" (didDismiss)="setRoleMessage($event)" > -

{{ handlerMessage }}

-

{{ roleMessage }}

``` diff --git a/static/usage/v7/toast/buttons/angular/example_component_ts.md b/static/usage/v7/toast/buttons/angular/example_component_ts.md index dd34310e22d..4e1c0e564b9 100644 --- a/static/usage/v7/toast/buttons/angular/example_component_ts.md +++ b/static/usage/v7/toast/buttons/angular/example_component_ts.md @@ -11,23 +11,21 @@ export class ExampleComponent { text: 'More Info', role: 'info', handler: () => { - this.handlerMessage = 'More Info clicked'; + console.log('More Info clicked'); }, }, { text: 'Dismiss', role: 'cancel', handler: () => { - this.handlerMessage = 'Dismiss clicked'; + console.log('Dismiss clicked'); }, }, ]; - handlerMessage = ''; - roleMessage = ''; setRoleMessage(ev) { const { role } = ev.detail; - this.roleMessage = `Dismissed with role: ${role}`; + console.log(`Dismissed with role: ${role}`); } } ``` diff --git a/static/usage/v7/toast/buttons/demo.html b/static/usage/v7/toast/buttons/demo.html index d2b2341e230..236f0ba0bed 100644 --- a/static/usage/v7/toast/buttons/demo.html +++ b/static/usage/v7/toast/buttons/demo.html @@ -8,16 +8,6 @@ - - @@ -31,37 +21,33 @@
Open Toast -

-

diff --git a/static/usage/v7/toast/buttons/index.md b/static/usage/v7/toast/buttons/index.md index 75d2d2c2a2e..452c5245ba0 100644 --- a/static/usage/v7/toast/buttons/index.md +++ b/static/usage/v7/toast/buttons/index.md @@ -22,4 +22,5 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }, }} src="usage/v7/toast/buttons/demo.html" + showConsole={true} /> diff --git a/static/usage/v7/toast/buttons/javascript.md b/static/usage/v7/toast/buttons/javascript.md index f8dfa701d1d..843c1a469c6 100644 --- a/static/usage/v7/toast/buttons/javascript.md +++ b/static/usage/v7/toast/buttons/javascript.md @@ -1,34 +1,30 @@ ```html Open Toast -

-

``` diff --git a/static/usage/v7/toast/buttons/react.md b/static/usage/v7/toast/buttons/react.md index ac815c8c693..14c7595a309 100644 --- a/static/usage/v7/toast/buttons/react.md +++ b/static/usage/v7/toast/buttons/react.md @@ -1,11 +1,8 @@ ```tsx -import React, { useState } from 'react'; +import React from 'react'; import { IonButton, IonToast } from '@ionic/react'; function Example() { - const [handlerMessage, setHandlerMessage] = useState(''); - const [roleMessage, setRoleMessage] = useState(''); - return ( <> Open Toast @@ -18,21 +15,19 @@ function Example() { text: 'More Info', role: 'info', handler: () => { - setHandlerMessage('More Info clicked'); + console.log('More Info clicked'); }, }, { text: 'Dismiss', role: 'cancel', handler: () => { - setHandlerMessage('Dismiss clicked'); + console.log('Dismiss clicked'); }, }, ]} - onDidDismiss={(e: CustomEvent) => setRoleMessage(`Dismissed with role: ${e.detail.role}`)} + onDidDismiss={(e: CustomEvent) => console.log(`Dismissed with role: ${e.detail.role}`)} > -

{handlerMessage}

-

{roleMessage}

); } diff --git a/static/usage/v7/toast/buttons/vue.md b/static/usage/v7/toast/buttons/vue.md index 3f0c0e87848..fc05a785e17 100644 --- a/static/usage/v7/toast/buttons/vue.md +++ b/static/usage/v7/toast/buttons/vue.md @@ -6,10 +6,8 @@ message="Hello World!" :duration="3000" :buttons="toastButtons" - @didDismiss="setRoleMessage($event)" + @didDismiss="handleDismiss($event)" > -

{{ handlerMessage }}

-

{{ roleMessage }}

diff --git a/static/usage/v7/accordion/listen-changes/javascript.md b/static/usage/v7/accordion/listen-changes/javascript.md index 9d3dc9e058e..e47e3311a08 100644 --- a/static/usage/v7/accordion/listen-changes/javascript.md +++ b/static/usage/v7/accordion/listen-changes/javascript.md @@ -28,7 +28,9 @@ const collapsedItems = values.filter((value) => value !== ev.detail.value); const selectedValue = ev.detail.value; - console.log(`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`); + console.log( + `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}` + ); }); ``` diff --git a/static/usage/v7/accordion/listen-changes/react.md b/static/usage/v7/accordion/listen-changes/react.md index c698724e02f..98b4b7fc3e2 100644 --- a/static/usage/v7/accordion/listen-changes/react.md +++ b/static/usage/v7/accordion/listen-changes/react.md @@ -7,7 +7,9 @@ function Example() { const collapsedItems = values.filter((value) => value !== ev.detail.value); const selectedValue = ev.detail.value; - console.log(`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`); + console.log( + `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}` + ); }; return ( diff --git a/static/usage/v7/accordion/listen-changes/vue.md b/static/usage/v7/accordion/listen-changes/vue.md index 368036cf31f..60607870264 100644 --- a/static/usage/v7/accordion/listen-changes/vue.md +++ b/static/usage/v7/accordion/listen-changes/vue.md @@ -39,9 +39,13 @@ const collapsedItems = values.filter((value) => value !== ev.detail.value); const selectedValue = ev.detail.value; - console.log(`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`); + console.log( + `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join( + ', ' + )}` + ); }; - + return { accordionGroupChange }; }, }); diff --git a/static/usage/v7/modal/inline/basic/angular/example_component_html.md b/static/usage/v7/modal/inline/basic/angular/example_component_html.md index ec8a4c68c74..844a4c996a2 100644 --- a/static/usage/v7/modal/inline/basic/angular/example_component_html.md +++ b/static/usage/v7/modal/inline/basic/angular/example_component_html.md @@ -21,7 +21,13 @@ - + diff --git a/static/usage/v7/modal/inline/basic/demo.html b/static/usage/v7/modal/inline/basic/demo.html index fc647ab978d..8cc6a59865a 100644 --- a/static/usage/v7/modal/inline/basic/demo.html +++ b/static/usage/v7/modal/inline/basic/demo.html @@ -33,7 +33,12 @@ - + diff --git a/static/usage/v7/modal/inline/basic/react.md b/static/usage/v7/modal/inline/basic/react.md index 3b89b93e2e5..b5275eceafa 100644 --- a/static/usage/v7/modal/inline/basic/react.md +++ b/static/usage/v7/modal/inline/basic/react.md @@ -55,7 +55,13 @@ function Example() { - + diff --git a/static/usage/v7/modal/inline/basic/vue.md b/static/usage/v7/modal/inline/basic/vue.md index 5ad2f58c53a..d0405a7391c 100644 --- a/static/usage/v7/modal/inline/basic/vue.md +++ b/static/usage/v7/modal/inline/basic/vue.md @@ -21,7 +21,13 @@ - + diff --git a/static/usage/v7/picker/multiple-column/react.md b/static/usage/v7/picker/multiple-column/react.md index 0de671f73f6..9769e8b9af0 100644 --- a/static/usage/v7/picker/multiple-column/react.md +++ b/static/usage/v7/picker/multiple-column/react.md @@ -69,9 +69,7 @@ function Example() { { text: 'Confirm', handler: (value) => { - console.log( - `You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}` - ); + console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); }, }, ]} diff --git a/static/usage/v7/select/basic/responding-to-interaction/react.md b/static/usage/v7/select/basic/responding-to-interaction/react.md index 647d0f38317..f730bf4c69a 100644 --- a/static/usage/v7/select/basic/responding-to-interaction/react.md +++ b/static/usage/v7/select/basic/responding-to-interaction/react.md @@ -3,7 +3,6 @@ import React from 'react'; import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; function Example() { - return ( diff --git a/static/usage/v7/select/basic/responding-to-interaction/vue.md b/static/usage/v7/select/basic/responding-to-interaction/vue.md index 73aec561007..a12b3238c60 100644 --- a/static/usage/v7/select/basic/responding-to-interaction/vue.md +++ b/static/usage/v7/select/basic/responding-to-interaction/vue.md @@ -25,13 +25,13 @@ components: { IonItem, IonList, IonSelect, IonSelectOption }, methods: { handleChange(ev) { - console.log('ionChange fired with value: ' + ev.detail.value) + console.log('ionChange fired with value: ' + ev.detail.value); }, handleCancel() { - console.log('ionCancel fired') + console.log('ionCancel fired'); }, handleDismiss() { - console.log('ionDismiss fired') + console.log('ionDismiss fired'); }, }, }); From 1f1dd1773b2fccee79ab8b1c6a023eb2471fb613 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 7 Sep 2023 09:36:24 -0500 Subject: [PATCH 24/25] Revert "modal/controller" This reverts commit 0677f82f34ba7a8ab3649561b6424c11b03e17db. --- .../angular/example_component_html.md | 1 + .../angular/example_component_ts.md | 4 +- static/usage/v7/modal/controller/demo.html | 37 ++++++++++--------- static/usage/v7/modal/controller/index.md | 1 - .../usage/v7/modal/controller/javascript.md | 5 ++- static/usage/v7/modal/controller/react.md | 6 ++- .../v7/modal/controller/vue/example_vue.md | 6 ++- 7 files changed, 35 insertions(+), 25 deletions(-) diff --git a/static/usage/v7/modal/controller/angular/example_component_html.md b/static/usage/v7/modal/controller/angular/example_component_html.md index cc17eae07e8..1920bb7a4a0 100644 --- a/static/usage/v7/modal/controller/angular/example_component_html.md +++ b/static/usage/v7/modal/controller/angular/example_component_html.md @@ -6,5 +6,6 @@ Open +

{{ message }}

 ``` diff --git a/static/usage/v7/modal/controller/angular/example_component_ts.md b/static/usage/v7/modal/controller/angular/example_component_ts.md index f5a72481994..920a2335257 100644 --- a/static/usage/v7/modal/controller/angular/example_component_ts.md +++ b/static/usage/v7/modal/controller/angular/example_component_ts.md @@ -9,6 +9,8 @@ import { ModalExampleComponent } from './modal-example.component'; templateUrl: 'example.component.html', }) export class ExampleComponent { + message = 'This modal example uses the modalController to present and dismiss modals.'; + constructor(private modalCtrl: ModalController) {} async openModal() { @@ -20,7 +22,7 @@ export class ExampleComponent { const { data, role } = await modal.onWillDismiss(); if (role === 'confirm') { - console.log(`Hello, ${data}!`); + this.message = `Hello, ${data}!`; } } } diff --git a/static/usage/v7/modal/controller/demo.html b/static/usage/v7/modal/controller/demo.html index 1f26867e5e0..5a146f90afb 100644 --- a/static/usage/v7/modal/controller/demo.html +++ b/static/usage/v7/modal/controller/demo.html @@ -23,6 +23,7 @@ Open +

This modal example uses the modalController to present and dismiss modals.

 @@ -30,23 +31,23 @@ const openModal = async () => { const div = document.createElement('div'); div.innerHTML = ` - - - - Cancel - - Welcome - - Confirm - - - - - - - - - `; + + + + Cancel + + Welcome + + Confirm + + + + + + + + + `; const modal = await modalController.create({ component: div, @@ -57,7 +58,7 @@ const { data, role } = await modal.onWillDismiss(); if (role === 'confirm') { - console.log(`Hello, ${data}!`); + document.querySelector('#message').innerHTML = `Hello, ${data}!`; } }; diff --git a/static/usage/v7/modal/controller/index.md b/static/usage/v7/modal/controller/index.md index 7af4f8b1c19..750bbe53efb 100644 --- a/static/usage/v7/modal/controller/index.md +++ b/static/usage/v7/modal/controller/index.md @@ -36,5 +36,4 @@ import angular_modal_example_component_html from './angular/modal-example_compon src="usage/v7/modal/controller/demo.html" devicePreview includeIonContent={false} - showConsole={true} /> diff --git a/static/usage/v7/modal/controller/javascript.md b/static/usage/v7/modal/controller/javascript.md index 59d2e712509..ca5bb55011c 100644 --- a/static/usage/v7/modal/controller/javascript.md +++ b/static/usage/v7/modal/controller/javascript.md @@ -6,6 +6,7 @@ Open +

This modal example uses the modalController to present and dismiss modals.

 From c9d2630bf058c35db7781f67dc09d6a53cb14890 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 7 Sep 2023 09:38:31 -0500 Subject: [PATCH 25/25] Revert "modal/inline/basic" This reverts commit 617dc96a47c0e814501606b4f7311230d97067a2. --- .../basic/angular/example_component_html.md | 10 +++------- .../basic/angular/example_component_ts.md | 3 ++- static/usage/v7/modal/inline/basic/demo.html | 12 +++++------- static/usage/v7/modal/inline/basic/index.md | 1 - .../usage/v7/modal/inline/basic/javascript.md | 7 +++++-- static/usage/v7/modal/inline/basic/react.md | 19 ++++++++++--------- static/usage/v7/modal/inline/basic/vue.md | 15 +++++++-------- 7 files changed, 32 insertions(+), 35 deletions(-) diff --git a/static/usage/v7/modal/inline/basic/angular/example_component_html.md b/static/usage/v7/modal/inline/basic/angular/example_component_html.md index 844a4c996a2..d89c7626f3d 100644 --- a/static/usage/v7/modal/inline/basic/angular/example_component_html.md +++ b/static/usage/v7/modal/inline/basic/angular/example_component_html.md @@ -6,6 +6,7 @@ Open +

{{ message }}

@@ -21,13 +22,8 @@ - + Enter your name + diff --git a/static/usage/v7/modal/inline/basic/angular/example_component_ts.md b/static/usage/v7/modal/inline/basic/angular/example_component_ts.md index 6bb49aed57e..a21954ec5f1 100644 --- a/static/usage/v7/modal/inline/basic/angular/example_component_ts.md +++ b/static/usage/v7/modal/inline/basic/angular/example_component_ts.md @@ -10,6 +10,7 @@ import { OverlayEventDetail } from '@ionic/core/components'; export class ExampleComponent { @ViewChild(IonModal) modal: IonModal; + message = 'This modal example uses triggers to automatically open a modal when the button is clicked.'; name: string; cancel() { @@ -23,7 +24,7 @@ export class ExampleComponent { onWillDismiss(event: Event) { const ev = event as CustomEvent>; if (ev.detail.role === 'confirm') { - console.log(`Hello, ${ev.detail.data}!`); + this.message = `Hello, ${ev.detail.data}!`; } } } diff --git a/static/usage/v7/modal/inline/basic/demo.html b/static/usage/v7/modal/inline/basic/demo.html index 8cc6a59865a..9ea5eab1699 100644 --- a/static/usage/v7/modal/inline/basic/demo.html +++ b/static/usage/v7/modal/inline/basic/demo.html @@ -19,6 +19,7 @@ Open +

This modal example uses triggers to automatically open a modal when the button is clicked.

@@ -33,12 +34,8 @@ - + Enter your name + @@ -59,7 +56,8 @@ modal.addEventListener('willDismiss', (ev) => { if (ev.detail.role === 'confirm') { - console.log(`Hello ${ev.detail.data}!`); + const message = document.querySelector('#message'); + message.textContent = `Hello ${ev.detail.data}!`; } }); diff --git a/static/usage/v7/modal/inline/basic/index.md b/static/usage/v7/modal/inline/basic/index.md index 70e2f83d0b3..1406cd29c09 100644 --- a/static/usage/v7/modal/inline/basic/index.md +++ b/static/usage/v7/modal/inline/basic/index.md @@ -23,5 +23,4 @@ import angular_example_component_ts from './angular/example_component_ts.md'; src="usage/v7/modal/inline/basic/demo.html" devicePreview includeIonContent={false} - showConsole={true} /> diff --git a/static/usage/v7/modal/inline/basic/javascript.md b/static/usage/v7/modal/inline/basic/javascript.md index 368f2279ae9..cffa297eebd 100644 --- a/static/usage/v7/modal/inline/basic/javascript.md +++ b/static/usage/v7/modal/inline/basic/javascript.md @@ -6,6 +6,7 @@ Open +

This modal example uses triggers to automatically open a modal when the button is clicked.

@@ -20,7 +21,8 @@ - + Enter your name + @@ -40,7 +42,8 @@ modal.addEventListener('willDismiss', (ev) => { if (ev.detail.role === 'confirm') { - console.log(`Hello ${ev.detail.data}!`); + const message = document.querySelector('#message'); + message.textContent = `Hello ${ev.detail.data}!`; } }); diff --git a/static/usage/v7/modal/inline/basic/react.md b/static/usage/v7/modal/inline/basic/react.md index b5275eceafa..aa465052e4c 100644 --- a/static/usage/v7/modal/inline/basic/react.md +++ b/static/usage/v7/modal/inline/basic/react.md @@ -1,5 +1,5 @@ ```tsx -import React, { useRef } from 'react'; +import React, { useState, useRef } from 'react'; import { IonButtons, IonButton, @@ -10,6 +10,7 @@ import { IonTitle, IonPage, IonItem, + IonLabel, IonInput, } from '@ionic/react'; import { OverlayEventDetail } from '@ionic/core/components'; @@ -18,13 +19,17 @@ function Example() { const modal = useRef(null); const input = useRef(null); + const [message, setMessage] = useState( + 'This modal example uses triggers to automatically open a modal when the button is clicked.' + ); + function confirm() { modal.current?.dismiss(input.current?.value, 'confirm'); } function onWillDismiss(ev: CustomEvent) { if (ev.detail.role === 'confirm') { - console.log(`Hello, ${ev.detail.data}!`); + setMessage(`Hello, ${ev.detail.data}!`); } } @@ -39,6 +44,7 @@ function Example() { Open +

{message}

onWillDismiss(ev)}> @@ -55,13 +61,8 @@ function Example() { - + Enter your name + diff --git a/static/usage/v7/modal/inline/basic/vue.md b/static/usage/v7/modal/inline/basic/vue.md index d0405a7391c..2c5435b4335 100644 --- a/static/usage/v7/modal/inline/basic/vue.md +++ b/static/usage/v7/modal/inline/basic/vue.md @@ -7,6 +7,7 @@ Open +

{{ message }}

@@ -21,13 +22,8 @@ - + Enter your name + @@ -45,10 +41,13 @@ IonTitle, IonItem, IonInput, + IonLabel, } from '@ionic/vue'; import { OverlayEventDetail } from '@ionic/core/components'; import { ref } from 'vue'; + const message = ref('This modal example uses triggers to automatically open a modal when the button is clicked.'); + const modal = ref(); const input = ref(); @@ -61,7 +60,7 @@ const onWillDismiss = (ev: CustomEvent) => { if (ev.detail.role === 'confirm') { - console.log(`Hello, ${ev.detail.data}!`); + message.value = `Hello, ${ev.detail.data}!`; } };