Onglets Ionic - Javascript

Les onglets sont un modèle utile pour tout type de navigation ou pour sélectionner différentes pages dans votre application. Les mêmes onglets apparaîtront en haut de l'écran pour les appareils Android et en bas pour les appareils IOS.

Utilisation des onglets

Des onglets peuvent être ajoutés à l'application en utilisant ion-tabs comme élément de conteneur et ion-tabcomme élément de contenu. Nous l'ajouterons à laindex.html, mais vous pouvez l'ajouter à n'importe quel fichier HTML de votre application. Assurez-vous simplement de ne pas l'ajouter à l'intérieur duion-content pour éviter les problèmes de CSS qui l'accompagnent.

index.html Code

<ion-tabs class = "tabs-icon-only">

   <ion-tab title = "Home" icon-on = "ion-ios-filing" 
      icon-off = "ion-ios-filing-outline"></ion-tab>

   <ion-tab title = "About" icon-on = "ion-ios-home" 
      icon-off = "ion-ios-home-outline"></ion-tab>

   <ion-tab title = "Settings" icon-on = "ion-ios-star" 
      icon-off = "ion-ios-star-outline"></ion-tab>

</ion-tabs>

La sortie ressemblera à celle de la capture d'écran suivante.

Une API est disponible pour ion-tabéléments. Vous pouvez l'ajouter en tant qu'attributs comme indiqué dans l'exemple ci-dessus où nous avons utilisétitle, icon-on et icon-off. Les deux derniers sont utilisés pour différencier l'onglet sélectionné du reste. Si vous regardez l'image ci-dessus, vous pouvez voir que le premier onglet est sélectionné. Vous pouvez vérifier le reste des attributs dans le tableau suivant.

Attributs de l'onglet

Attribut	Type	Détails
Titre	chaîne	Le titre de l'onglet.
href	chaîne	Le lien utilisé pour la navigation par onglets.
icône	chaîne	L'icône de l'onglet.
icône sur	chaîne	L'icône de l'onglet lorsqu'il est sélectionné.
icon-off	chaîne	L'icône de l'onglet lorsqu'il n'est pas sélectionné.
badge	expression	Le badge de l'onglet.
style badge	expression	Le style de badge pour l'onglet.
à la sélection	expression	Appelé lorsque l'onglet est sélectionné
sur-désélection	expression	Appelé lorsque l'onglet est désélectionné
caché	expression	Utilisé pour masquer l'onglet.
désactivée	expression	Utilisé pour désactiver l'onglet.

Les onglets ont également leur propre service de délégué pour un contrôle plus facile de tous les onglets de l'application. Il peut être injecté dans le contrôleur et dispose de plusieurs méthodes, qui sont présentées dans le tableau suivant.

Méthodes de délégation

Méthode	Paramètres	Type	Détails
selectedIndex ()	/	nombre	Renvoie l'index de l'onglet sélectionné.
$ getByHandle (paramètre1)	manipuler	chaîne	Utilisé pour connecter des méthodes à la vue d'onglet particulière avec la même poignée. Une poignée peut être ajoutée àion-tabs en utilisant delegate-handle = "my-handle" attribut. $ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();