# Etude des composants Ionic: cas du composant "ion-tabs" 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. ### Comment l'utiliser et le personnaliser ? 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 composant**`ion-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. ```xml Listen Now Radio Library Search ``` * **Explorons ensemble les diverses propriétés, méthodes et évènements des composants**`ion-tabs`**,**`ion-tab`**,**`ion-tab-bar`**et**`ion-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](https://ionicframework.com/docs/api/tab-button) * **Quelques styles personnalisés des composants**`ion-tab-bar`**et**`ion-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](https://ionicframework.com/docs/api/tab-button) 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](https://ionicframework.com/docs/api/tabs)