Saltar al contenido

Toast Ionic

Toast Ionic

En el artículo de hoy vamos a hablar sobre uno de los componentes, por regla general, pero depende de cada desarrollador, más usados en el ámbito del desarrollo móvil. Se trata de “Toast” o la típica barrita negra que nos aparece en la parte de debajo de la pantalla cuando queremos notificar algo. Comencemos…

Yepaaaa!! Hola guapa lectora, majo lector, ¿qué tal todo? Espero que genial por que en el capi de hoy vamos a hablar de un componente genial, y que personalmente me encanta, en esto del desarrollo móvil. Se trata de los mensajes “toast” y de como vamos a poder personalizarlos a gusto para que sean la leche. Ale, comencemos.

 

Instalación y configuración

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!

 

Como 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.

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.

Posteriormente tendremos que inyectar una instancia de este componente en el constructor para que la podamos usar desde nuestro código.

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.

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.

 

Pues con este hemos terminado de dar a conocer este genial “mini” componente. Ahora solo queda despedirme y pedir que, si te ha sido de ayuda este tuto, te pases por “el circulo” una comunidad que estoy montando alrededor de esta industria que amo, y que si tu también, no te puedes perder. Todas las instrucciones están en este enlace.

 

Y para los más ganduletes, el tutorial en vídeo de Toast Ionic 🙂

 

Un saludo enorme y nos vemos en el siguiente artículo 🙂