Ionic Toast | Comunícate con tu usuario con este genial componente

¿Buscando una manera de comunicarte con tus usuarios y has optado por un Toast en Ionic? O, quizás ya sabes cómo se hace y lo que quieres es darle un poco de estilo o funcionalidad propia ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender, de manera sencilla e intuitiva, a mostrar avisos y mensajes flotantes con Toast Ionic para mandar avisos a tus usuarios.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Instalación y configuración de un Ionic Toast

Bien, en este artículo he unido las dos secciones en una. ¿Por qué? - Simplemente por que este componente no necesita ninguna de las dos, es un componente de sistema que viene ya integrado en el core de Ionic, así que nos libramos. ¡viva!

Cómo se usa un Toast

Saltándonos toda la morralla que hay por la red sobre como deberíamos de usar este tipo de componente y demás… Vamos a ver como poder empezar con él.

import { ToastController } from 'ionic-angular';

constructor(private toastCtrl: ToastController) {

}

presentToast() {
  let toast = this.toastCtrl.create({
    message: 'User was added successfully',
    duration: 3000,
    position: 'top'
  });

  toast.onDidDismiss(() => {
    console.log('Dismissed toast');
  });

  toast.present();
}

Nota antes de continuar: La notificación “toast” es un componente que se colocará encima de la interfaz de nuestra aplicación. Por lo que tenemos que tener cuidado con lo que queda debajo. Puede que sea el menú, un anuncio, etc… Hay que prestar especial atención a este problema. Y, en caso de que no esté permitido colocar cosas encima, como los anuncios de Admob, no tengamos problemas.

1. En primer lugar, realizaremos un “import” de la clase “ToastController” en la nuestra. Esta clase será la encargada de darnos toda la funcionalidad necesaria que vamos a ver a continuación.
2. Posteriormente tendremos que inyectar una instancia de este componente en el constructor para que la podamos usar desde nuestro código.
3. Después, para mostrar el “toast”, vamos a llamar a la función “create” de nuestro “toast” y le pasamos una instancia de la interfaz “ToastOptions” que veremos más abajo en detalle.
4. Ahora que ya tenemos listo todo, y nuestro “toast” preparado vamos a sobrescribir la función “onDismis” para controlar cuando se cierra, o disposea, este “toast” y después lo vamos a mostrar llamando al método “present”.

El código que hemos visto hasta ahora es 100% funcional. Si quieres probarlo te funcionará sin problema. Adelante, pruébalo.

Campos y funciones de Toast en Ionic

Ahora vamos a ver los campos y las funciones de “Toast” y “ToastOptions”, que no son muchos, pero es obligación saber cuales hay para utilizarlo de manera eficiente.

create(ToastOptions)

Esta es la función que hemos visto en el ejemplo y sirve para construir el “toast”. Devuelve una promesa que tenemos que controlar. Dentro de esta contiene una instancia de “HTMLIoncToastElemnt” que nos servirá para poder modificar en HTML de nuestro componente.

dismiss()

Como esta de esperar, tenemos que tener un sistema para esconder el mensaje. Pues este es el método que se usa para ello.

Devuelve una promesa que tenemos que controlar y trae consigo un booleano para informarnos de si todo se ha realizado correctamente.

getTop()

En caso de que tengamos algún “toast” más abierto, al usar esta función, el que la ejecute, automáticamente se pondrá en la parte superior de todos y será que la se muestre al usuario.

Devuelve una promesa que tenemos que controlar que trae consigo una instancia de “HTMLIonToastElement”.

Y estos son todos los métodos que tiene. La verdad que no son necesarios ninguno más, dado que con esto podemos hacerlo todo lo que necesitemos. Ahora vamos a ver los campos que podemos tocar de la interfaz “ToastOptions”, que es la que nos interesa conocer para modificar el comportamiento de nuestro “toast”.

campos de ToastOptions

Estos campos serán los que nos permitan definir el comportamiento de nuestro mensaje. Por ejemplo: la duración, el propio mensaje, o la posición del “toast”. Adelante.

• message -> string -> El mensaje que será mostrado en el “toast”. Si el mensaje es demasiado largo se truncará agregando puntos suspensivos al final.
• duration -> number -> La duración que le vamos a dar al mensaje antes de que desaparezca de manera automática.
• position -> string -> Es la posición donde queremos que aparezca el “toast”. Siendo “bottom” la opción por defecto.
  • “bottom”
  • “top”
  • “middle”
• cssClass -> string -> En caso de que queramos editar nuestro “toast” directamente desde CSS este campo nos permite asignar una, o varias, clases a nuestro componente.
• showCloseButton -> boolean -> Si es true, el componente mostrará un botón para que el usuario pueda cerrar el “toast”.
• closeButtonText -> string -> En caso de que el botón de cerrar sea mostrado, este campo nos permitirá definir el texto que aparecerá en él.
• dismissOnPageChange -> string -> Si es verdadero el “toast” desaparecerá en caso de que cambiemos de ventana.

Y el videotutorial, cómo siempre :)

Algo más que quizás te interese

Mira, tu estrategia para mejorar constantemente el logo de tu aplicación es algo fundamental. Es una estrategia que te asegura más descargas, y por extensión, más ingresos para ti. Y eso es lo que queremos, más ingresos. Pues bien, basándonos en esto, hemos hecho esta herramienta para evaluar, optimizar y mejorar tus logos. Y bueno, que puedas espiar los de la competencia. No te espoileo más, entra en el enlace.

Y ahora si, ya hemos terminado. Nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!