modal/inline/basic

Author: amandaesmith3

static/usage/v7/modal/inline/basic/angular/example_component_html.md

@@ -6,7 +6,6 @@
 </ion-header>
 <ion-content class="ion-padding">
   <ion-button id="open-modal" expand="block">Open</ion-button>
-  <p>{{ message }}</p>
   <ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)">
     <ng-template>
       <ion-header>
@@ -22,8 +21,7 @@
       </ion-header>
       <ion-content class="ion-padding">
         <ion-item>
-          <ion-label position="stacked">Enter your name</ion-label>
-          <ion-input type="text" placeholder="Your name" [(ngModel)]="name"></ion-input>
+          <ion-input label="Enter your name" labelPlacement="stacked" type="text" placeholder="Your name" [(ngModel)]="name"></ion-input>
         </ion-item>
       </ion-content>
     </ng-template>

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<OverlayEventDetail<string>>;
     if (ev.detail.role === 'confirm') {
-      this.message = `Hello, ${ev.detail.data}!`;
+      console.log(`Hello, ${ev.detail.data}!`);
     }
   }
 }

static/usage/v7/modal/inline/basic/demo.html

@@ -19,7 +19,6 @@
       </ion-header>
       <ion-content class="ion-padding">
         <ion-button id="open-modal" expand="block">Open</ion-button>
-        <p id="message">This modal example uses triggers to automatically open a modal when the button is clicked.</p>
         <ion-modal trigger="open-modal">
           <ion-header>
             <ion-toolbar>
@@ -34,8 +33,7 @@
           </ion-header>
           <ion-content class="ion-padding">
             <ion-item>
-              <ion-label position="stacked">Enter your name</ion-label>
-              <ion-input type="text" placeholder="Your name"></ion-input>
+              <ion-input label="Enter your name" label-placement="stacked" type="text" placeholder="Your name"></ion-input>
             </ion-item>
           </ion-content>
         </ion-modal>
@@ -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}!`);
         }
       });
     </script>

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}
 />

static/usage/v7/modal/inline/basic/javascript.md

@@ -6,7 +6,6 @@
 </ion-header>
 <ion-content class="ion-padding">
   <ion-button id="open-modal" expand="block">Open</ion-button>
-  <p id="message">This modal example uses triggers to automatically open a modal when the button is clicked.</p>
   <ion-modal trigger="open-modal">
     <ion-header>
       <ion-toolbar>
@@ -21,8 +20,7 @@
     </ion-header>
     <ion-content class="ion-padding">
       <ion-item>
-        <ion-label position="stacked">Enter your name</ion-label>
-        <ion-input type="text" placeholder="Your name"></ion-input>
+        <ion-input label="Enter your name" label-placement="stacked" type="text" placeholder="Your name"></ion-input>
       </ion-item>
     </ion-content>
   </ion-modal>
@@ -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}!`);
     }
   });
 </script>

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<HTMLIonModalElement>(null);
   const input = useRef<HTMLIonInputElement>(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<OverlayEventDetail>) {
     if (ev.detail.role === 'confirm') {
-      setMessage(`Hello, ${ev.detail.data}!`);
+      console.log(`Hello, ${ev.detail.data}!`);
     }
   }
 
@@ -44,7 +39,6 @@ function Example() {
         <IonButton id="open-modal" expand="block">
           Open
         </IonButton>
-        <p>{message}</p>
         <IonModal ref={modal} trigger="open-modal" onWillDismiss={(ev) => onWillDismiss(ev)}>
           <IonHeader>
             <IonToolbar>
@@ -61,8 +55,7 @@ function Example() {
           </IonHeader>
           <IonContent className="ion-padding">
             <IonItem>
-              <IonLabel position="stacked">Enter your name</IonLabel>
-              <IonInput ref={input} type="text" placeholder="Your name" />
+              <IonInput label="Enter your name" labelPlacement="stacked" ref={input} type="text" placeholder="Your name" />
             </IonItem>
           </IonContent>
         </IonModal>

static/usage/v7/modal/inline/basic/vue.md

@@ -7,7 +7,6 @@
   </ion-header>
   <ion-content class="ion-padding">
     <ion-button id="open-modal" expand="block">Open</ion-button>
-    <p>{{ message }}</p>
     <ion-modal ref="modal" trigger="open-modal" @willDismiss="onWillDismiss">
       <ion-header>
         <ion-toolbar>
@@ -22,8 +21,7 @@
       </ion-header>
       <ion-content class="ion-padding">
         <ion-item>
-          <ion-label position="stacked">Enter your name</ion-label>
-          <ion-input ref="input" type="text" placeholder="Your name"></ion-input>
+          <ion-input label="Enter your name" label-placement="stacked" ref="input" type="text" placeholder="Your name"></ion-input>
         </ion-item>
       </ion-content>
     </ion-modal>
@@ -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<OverlayEventDetail>) => {
     if (ev.detail.role === 'confirm') {
-      message.value = `Hello, ${ev.detail.data}!`;
+      console.log(`Hello, ${ev.detail.data}!`);
     }
   };
 </script>