Saltar al contenido

Toast Ionic

Toast Ionic

¿Interesado en incluir avisos flotantes dentro de tu aplicación con el componente Toast Ionic? O, quizás ya sabes cómo se hace y lo que quieres es darle un poco de estilo o funcionalidad propia ¿verdad?

Pues si has respondido que si a cualquiera de estas dos preguntas, tranquilo, no eres el primero ni el último que pasa por aquí a darles respuesta, a las preguntas.

Es más, y cómo digo siempre, hasta los más expertos necesitamos de estos artículos cuando vamos a implementar una funcionalidad nueva o que llevamos un tiempo sin utilizar.

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde el año 2014, y en este artículo te enseñaré cómo puedes, de manera sencilla e intuitiva, mostrar avisos y mensajes flotantes con Toast Ionic.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

 

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.

 

Más tutoriales de Ionic

 

Y el videotutorial, cómo siempre 🙂

 

Pues hemos llegado al final, únicamente me queda pedirte que si te ha gustado el artículo, te pases por «El Círculo» aquí. Si no sabes lo que es, vuelve al comienzo del artículo y lee la introducción. Te ayudará.

Un saludo enorme y nos vemos en el siguiente artículo. Hasta entonces, que vaya bien.