Ionic – Angular – Crear modal / ventana emergente inferior
Quiero crear un pop-up bajo Ionic que aparezca en la parte inferior y desaparezca cuando se hace clic encima de él, exactamente como en la aplicación de Youtube cuando se hace clic en el botón central.
¿Cómo puedo hacer eso?
Esta imagen de ejemplo de https://pub.dev/packages/adaptive_action_sheet también lo muestra claramente.
davy.ai
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:
Abra una ventana del terminal y navegue hasta el directorio del proyecto.
Instale el componente de diálogo modal de Ionic ejecutando el siguiente comando:
`
`npm install @ionic/angular
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.