Les applications mobiles modernes exigent des interfaces utilisateur fluides et intuitives pour offrir une expérience utilisateur de qualité. Ionic, avec sa vaste gamme de composants prêts à l'emploi, facilite grandement le développement d'applications hybrides. Parmi ces composants, ion-tabs se distingue comme un outil puissant pour la navigation à onglets.
Qu'est-ce-que ion-tabs ?
ion-tabs est ce composant du framework Ionic qui permet aux développeurs de créer des structures de navigation élégantes et intuitives, où les utilisateurs peuvent basculer sans effort entre les différentes sections ou fonctionnalités de l'application. Qu'il s'agisse d'une simple interface à onglets ou d'un système de navigation sophistiqué à plusieurs niveaux, ion-tabs offre la flexibilité et l'évolutivité nécessaires pour concrétiser votre vision.
Le composant ion-tabs est subdivisé en plusieurs éléments que sont ion-tab, ion-tab-bar et ion-tab-button
Création d'un composantion-tabs
Présentons tout d'abord chacun des éléments qui composent ion-tabs
ion-tab
Le composant ion-tab (onglet) est un composant enfant de ion-tabs. Chaque onglet peut contenir une pile de navigation de haut niveau pour une application ou une vue unique. Une application peut comporter de nombreux onglets, tous dotés d'une navigation indépendante.
ion-tab-bar
Le composant ion-tab-bar (barre d'onglets) est un composant de l'interface utilisateur qui contient un ensemble de boutons d'onglets. Une barre d'onglets doit être fournie à l'intérieur des onglets pour communiquer avec chacun d'entre eux.
ion-tab-button
Le composant ion-tab-button (bouton d'onglet) est un composant d'interface utilisateur placé à l'intérieur d'une barre d'onglets. Le bouton d'onglet peut spécifier la disposition de l'icône et de l'étiquette et se connecter à une vue d'onglet.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-icon name="play-circle"></ion-icon>
Listen Now
</ion-tab-button>
<ion-tab-button tab="radio">
<ion-icon name="radio"></ion-icon>
Radio
</ion-tab-button>
<ion-tab-button tab="library">
<ion-icon name="library"></ion-icon>
Library
</ion-tab-button>
<ion-tab-button tab="search">
<ion-icon name="search"></ion-icon>
Search
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
Explorons ensemble les diverses propriétés, méthodes et évènements des composantsion-tabs,ion-tab,ion-tab-baretion-tab-button
ion-tabs
Les onglets peuvent être utilisés avec le routeur Ionic pour mettre en œuvre une navigation basée sur les onglets. La barre d'onglets et l'onglet actif seront automatiquement résolus en fonction de l'url. C'est le modèle le plus courant pour la navigation par onglets. Les composants ion-tabs ne disposent pas de propriétés propres à eux.
Cependant ils disposent des évènements ionTabsDidChange qui est émis lorsque la navigation a terminé la transition vers un nouveau composant et ionTabsWillChange qui est émis lorsque la navigation est sur le point de passer à un nouveau composant. Quant aux méthodes, on note les méthodes getSelected, getTab, select qui permettent respectivement d'obtenir l'onglet actuellement sélectionné, d'obtenir un onglet spécifique à partir de la valeur de sa propriété tab ou d'une référence d'élément et de sélectionner un onglet en fonction de la valeur de sa propriété tab ou d'une référence d'élément.
ion-tab
Le composant ion-tab (onglet) est un composant enfant de ion-tabs (onglets). Chaque onglet peut contenir une pile de navigation de haut niveau pour une application ou une vue unique. Une application peut comporter de nombreux onglets, tous dotés d'une navigation indépendante. Ils disposent des propriétés component et tabs qui permettent respectivement de spécifier le composant à afficher à l'intérieur de l'onglet et l'identifiant d'onglet doit qui doit être fourni pour chaque composant ion-tab Ce dernier est utilisé en interne pour référencer l'onglet sélectionné ou par le routeur pour passer d'un onglet à l'autre. Ils ne possèdent pas d'évènement mais disposent d'une methode setActive qui permet de définir le composant actif de l'onglet
ion-tab-bar
Le composant ion-tab-bar (barre d'onglets) est un composant de l'interface utilisateur qui contient un ensemble de boutons d'onglets. Une barre d'onglets doit être fournie à l'intérieur des onglets pour communiquer avec chacun d'entre eux. Comme propriétés personnalisées de ce composant on peut noter color, mode, selectTab, translucent qui permettent respectivement de définir la couleur à utiliser dans la palette de couleurs de votre application Ionic, de définir le type de plateforme (android ou ios) à utiliser, de définir l'onglet sélectionné et de spécifier si la barre d'onglet doit etre translucide ou non. Il ne dispose par contre pas d'év
ion-tab-button
Le composant ion-tab-button (bouton d'onglet) est un composant d'interface utilisateur placé à l'intérieur d'une barre d'onglets. Le bouton d'onglet peut spécifier la disposition de l'icône et de l'étiquette et se connecter à une vue d'onglet. Ce composant dispose de quelques propriétés que sont : disabled, download, href, layout, mode, rel, selected, tab, target que vous pouvez explorer plus en détail ici
Quelques styles personnalisés des composantsion-tab-baretion-tab-button
Les composants ion-tabs et ion-tab ne disposent pas de styles personnalisés.
Quant aux composants ion-tab-bar et ion-tab-button, ils sont livrés avec une variété de propriétés CSS que vous pouvez personnaliser pour adapter l'apparence du composant ion-tabs à vos préférences en matière de design. Vous trouverez ci-dessous, quelques-unes des propriétés CSS personnalisées les plus couramment utilisées :
ion-tab-bar
--background : qui permet de spécifier la couleur de l'arrière-plan
--border : qui permet de spécifier la bordure
--color : qui permet de définir la couleur
ion-tab-button
--background : pour définir la couleur de l'arrière plan
--background-focused : pour définir la couleur de l'arrière plan lorsqu'il y a un focus
--background-focused-opacity : pour définir l'opacité de la couleur de l'arrière plan lorsqu'il y a un focus
--color : pour définir la couleur
--color-focused : pour définir la couleur lorsqu'il y a un focus
--color-selected : pour définir la couleur lorsque le composant est sélectionné
Il dispose également d'autres propriétés CSS telles que --padding-bottom, --padding-end, --padding-start, --padding-top et --ripple-color que vous pouvez étudier ici
En résumé, le composant ion-tabs offre une solution puissante et flexible pour créer des interfaces à onglets dans les applications hybrides. Avec ses fonctionnalités riches, sa facilité d'utilisation et ses options de personnalisation étendues, il permet aux développeurs de concevoir des expériences de navigation fluides et intuitives qui répondent aux besoins de leurs utilisateurs.
Pour plus d'informations :
👉Ion-tabs
