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();