Ionic Framework est une plate-forme open source de développement d'application web. Avec une seule base de code, Ionic Framwork permet de développer des applications de bureau, web ou mobile. La version 4.0 de Ionic est sortie au début de cette année et depuis le framework évolue à un rythme soutenu.

Cette version apporte de nombreuses corrections de bugs et une évolution du composant Toast.

Un toast est une notification qui peut être utilisée pour fournir des informations sur une opération ou pour afficher un message système. Le toast apparaît au-dessus du contenu de l'application et peut être ignoré pour reprendre l'interaction avec l'utilisateur.

Avec Ionic 4.3, il est possible de définir des boutons pour ajouter des fonctionnalités supplémentaires aux toasts. Les boutons ainsi définis peuvent afficher du texte ou une icône, avoir une propriété side qui détermine si ces éléments s'affichent au début ou à la fin du toast et un gestionnaire qui reçoit une fonction pour personnaliser la logique du toast.

L'animation et le code ci-dessous, qui proviennent du blog de Ionic, illustrent ces nouvelles possibilités du composant Toast.

async showToast()
{
  const toast = await this.toastController.create({
    header: 'API Error',
    message: 'Error saving data.',
    buttons: [
      { icon: 'close', side: 'start' },
      {
        text: 'Retry?',
        side: 'end',
        handler: () => {
          toast.message = 'Retrying...';
          // remove the retry button
          toast.buttons.splice(1, 1);
          // simulate a retry
          setTimeout(() => {
            toast.message = 'Success!';
            toast.duration = 1500;
            // dismiss the toast in 2s
            setTimeout(toast.dismiss, 2000);
          }, 1000);
          // returning false so the toast doesn't dismiss
          return false;
        }
      }
    ]
  });
  await toast.present();
}