Sommaire

Application ionic3-list_slider

1. Compte rendu d’exécution de l’application

L’application ionic3-list_slider est une version améliorée de l’application ionic3-list_avatar. Nous allons découvrir comment mettre en place un mécanisme de glissement (slider) de chaque élément de la liste (pays) à la fois vers la gauche et vers la droite, pour accéder à des fonctionnalités supplémentaires comme la visualisation détaillée de la fiche de chaque pays, la modification et la suppression des fiches.

Plusieurs affichages correspondant à différents états de l’application sont présentés ci-après.

Un clic sur un pays particulier (la Russie dans notre exemple) affiche le nom du pays dans une fenêtre modale.

images/ch30_03.png

Il est également possible de faire glisser latéralement chaque élément de la liste pour faire apparaître des boutons donnant accès à des fonctionnalités supplémentaires (ici, un glissement vers la gauche) :

images/ch30_04.png

Un clic sur le bouton de visualisation déclenchera une méthode associée (affichageDetailsPays) et l’affichage donnera ceci pour le Maroc :

images/ch30_05.png

2. Analyse des scripts principaux

Comme pour l’application précédente, il n’est pas utile, pour les applications basées sur des listes, de revenir sur les scripts config.xml, package.json, src/app/app.components.ts ...