diff --git a/static/usage/v7/accordion/listen-changes/angular/example_component_html.md b/static/usage/v7/accordion/listen-changes/angular/example_component_html.md index a70ad5e3be6..d48c34dd4f4 100644 --- a/static/usage/v7/accordion/listen-changes/angular/example_component_html.md +++ b/static/usage/v7/accordion/listen-changes/angular/example_component_html.md @@ -19,6 +19,4 @@
Third Content
- -

``` diff --git a/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md index c14734aba72..3ebbccce6f7 100644 --- a/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md +++ b/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md @@ -1,27 +1,20 @@ ```ts -import { Component, ElementRef, ViewChild } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', }) export class ExampleComponent { - @ViewChild('listenerOut', { static: true }) listenerOut: ElementRef; private values: string[] = ['first', 'second', 'third']; accordionGroupChange = (ev: any) => { - const nativeEl = this.listenerOut.nativeElement; - if (!nativeEl) { - return; - } - const collapsedItems = this.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(', ')}` + ); }; } ``` diff --git a/static/usage/v7/accordion/listen-changes/demo.html b/static/usage/v7/accordion/listen-changes/demo.html index bbf4c5bfcab..104c0bd5da3 100644 --- a/static/usage/v7/accordion/listen-changes/demo.html +++ b/static/usage/v7/accordion/listen-changes/demo.html @@ -8,11 +8,6 @@ - @@ -39,25 +34,23 @@
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..e47e3311a08 100644 --- a/static/usage/v7/accordion/listen-changes/javascript.md +++ b/static/usage/v7/accordion/listen-changes/javascript.md @@ -20,21 +20,17 @@ -

- ``` diff --git a/static/usage/v7/accordion/listen-changes/react.md b/static/usage/v7/accordion/listen-changes/react.md index eb76312b62a..98b4b7fc3e2 100644 --- a/static/usage/v7/accordion/listen-changes/react.md +++ b/static/usage/v7/accordion/listen-changes/react.md @@ -1,54 +1,44 @@ ```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..60607870264 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
- -

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; - } - - @@ -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 }}

``` 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'); 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}`); }, }, ], 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}`); }, }, ]; 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}`); }, }, ]; 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..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) => { - 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/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}`); }, }, ]; 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..f730bf4c69a 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,24 @@ ```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..a12b3238c60 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 }}

-
- - @@ -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 }} - diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md index d47f6f0aaa5..7354647f224 100644 --- a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md +++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md @@ -10,8 +10,5 @@ {{ food.name }} - - Current value: {{ currentFood | json }} - ``` diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md index afbd5f454cd..20d05fa847f 100644 --- a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md +++ b/static/usage/v7/select/objects-as-values/using-comparewith/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, @@ -31,7 +29,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/using-comparewith/demo.html b/static/usage/v7/select/objects-as-values/using-comparewith/demo.html index 0c59bae8ce0..aee3dae24f4 100644 --- a/static/usage/v7/select/objects-as-values/using-comparewith/demo.html +++ b/static/usage/v7/select/objects-as-values/using-comparewith/demo.html @@ -8,12 +8,6 @@ - - @@ -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 }} - 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 }}