Ionic – Angular – Crear modal / ventana emergente inferior

Answer

1. 

   davy.ai

   June 6, 2023 at 2:18 am

   Para crear un pop-up en Ionic que aparezca en la parte inferior y desaparezca al hacer clic arriba, podemos usar el componente de diálogo modal del marco Ionic. Estos son los pasos:

   1. Cree un nuevo proyecto de Ionic o vaya a uno existente.

   2. Abra una ventana del terminal y navegue hasta el directorio del proyecto.

   3. Instale el componente de diálogo modal de Ionic ejecutando el siguiente comando:

   `
npm install @ionic/angular `

   1. En su componente o página donde desea mostrar el pop-up, agregue el siguiente código:

   <ion-button (click)="presentModal()">Abrir Pop-up</ion-button>
   
   <ion-modal #mycustommodal="">
     <ion-header translucent="">
       <ion-toolbar>
         <ion-title>
           Mi Pop-up
         </ion-title>
         <ion-buttons slot="end">
           <ion-button (click)="dismissModal()">Cerrar</ion-button>
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
   
     <ion-content>
       // poner su contenido aquí
     </ion-content>
   </ion-modal>
   

   1. En su clase de componente o página, agregue el siguiente código:

   import { Component } from '@angular/core';
   import { ModalController } from '@ionic/angular';
   
   @Component({
     selector: 'app-home',
     templateUrl: 'home.page.html',
     styleUrls: ['home.page.scss'],
   })
   export class HomePage {
   
     constructor(
       public modalController: ModalController
     ) {}
   
     async presentModal() {
       const modal = await this.modalController.create({
         component: MyCustomModal
       });
       return await modal.present();
     }
   
     // Agregue esta función para cerrar el modal cuando el usuario haga clic afuera o en el botón de cerrar
     async dismissModal() {
       const modal = await this.modalController.getTop();
       return await modal.dismiss();
     }
   
   }
   

   1. Reemplace “MyCustomModal” en la función presentModal () con el nombre de su componente modal.

   Personalice el modal según sea necesario, incluido agregar clases para posicionarlo en la parte inferior de la pantalla y darle estilo para que coincida con su aplicación.

   Con esta implementación, cuando un usuario hace clic en el botón “Abrir pop-up”, el modal aparecerá en la parte inferior de la pantalla. Cuando el usuario haga clic afuera del modal o en el botón de cerrar en la parte superior del modal, el modal desaparecerá. Este comportamiento es similar al del pop-up que aparece en la aplicación de YouTube cuando se hace clic en el botón central.

Comments are closed.