Ionic 3 – Infinite Swiped Tabs

Actuellement sur une construction d’application pour la fin de l’année dans le cadre de mon challenge « Une nouvelle application tous les mois« , j’ai souhaité obtenir le même rendu que les scrollable tabs de Android Material Design :

android scrollable tabs

Celà n’existe pas par défaut sur le framework d’application mobiles hybride Ionic 3, je me suis donc basé sur deux composants Ionic pour réalisé le même rendu.

Ionic Segments

Ionic Slides

 

Voilà les principes attendu :

Scalable

Je veux pouvoir avoir plus de 5 éléments, il faut rendre la liste scrollable

Visible

Je veux que le bouton actif soit automatiquement centré par rapport au scroll

Swipeable

Je veux pouvoir utiliser les boutons ou le swipe sur les vues pour passer d’une vue a l’autre

Résultat final

Auto-centrage du segment actif, infinite segments, swipe, tout ce que je souhaitais fonctionne bien.

Le code est disponible sur GitHub :

https://github.com/julienkermarec/ionic-infinite-swiped-tabs