docs(modal): add console logs

Author: thetaPC

static/usage/v8/modal/sheet/drag-move-event/angular/example_component_ts.md

@@ -29,6 +29,8 @@ export class ExampleComponent {
   }
 
   onDragEnd(event: CustomEvent<ModalDragEventDetail>) {
+    console.log('Drag ended', event.detail);
+
     // `currentBreakpoint` tells us which snap point the modal will animate to after the drag ends
     const { progress, currentBreakpoint } = event.detail;
     const headerEl = this.header.nativeElement;

static/usage/v8/modal/sheet/drag-move-event/demo.html

@@ -56,6 +56,8 @@
       });
 
       modal.addEventListener('ionDragEnd', (event) => {
+        console.log('Drag ended', JSON.stringify(event.detail));
+
         // `currentBreakpoint` tells us which snap point the modal will animate to after the drag ends
         const { progress, currentBreakpoint } = event.detail;
 

static/usage/v8/modal/sheet/drag-move-event/index.md

@@ -25,4 +25,5 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   src="usage/v8/modal/sheet/drag-move-event/demo.html"
   devicePreview
   includeIonContent={false}
+  showConsole={true}
 />

static/usage/v8/modal/sheet/drag-move-event/javascript.md

@@ -36,6 +36,8 @@
   });
 
   modal.addEventListener('ionDragEnd', (event) => {
+    console.log('Drag ended', event.detail);
+
     // `currentBreakpoint` tells us which snap point the modal will animate to after the drag ends
     const { progress, currentBreakpoint } = event.detail;
 

static/usage/v8/modal/sheet/drag-move-event/react.md

@@ -22,6 +22,8 @@ function Example() {
   };
 
   const onDragEnd = (event: CustomEvent<ModalDragEventDetail>) => {
+    console.log('Drag ended', event.detail);
+
     // `currentBreakpoint` tells us which snap point the modal will animate to after the drag ends
     const { progress, currentBreakpoint } = event.detail;
     const headerEl = header.current!;

static/usage/v8/modal/sheet/drag-move-event/vue.md

@@ -48,6 +48,8 @@ const onDragMove = (event: CustomEvent<ModalDragEventDetail>) => {
 };
 
 const onDragEnd = (event: CustomEvent<ModalDragEventDetail>) => {
+  console.log('Drag ended', event.detail);
+
   // `currentBreakpoint` tells us which snap point the modal will animate to after the drag ends
   const { progress, currentBreakpoint } = event.detail;
   const headerEl = header.value!.$el;

static/usage/v8/modal/sheet/drag-start-end-events/demo.html

@@ -49,7 +49,7 @@
       });
 
       modal.addEventListener('ionDragEnd', (event) => {
-        console.log('Drag ended', event.detail);
+        console.log('Drag ended', JSON.stringify(event.detail));
 
         header.style.opacity = 1;
       });

static/usage/v8/modal/sheet/drag-start-end-events/index.md

@@ -25,4 +25,5 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   src="usage/v8/modal/sheet/drag-start-end-events/demo.html"
   devicePreview
   includeIonContent={false}
+  showConsole={true}
 />