Top Tab Navigator (Onglet supérieur Navigateur)
Le style de navigation le plus courant dans les applications mobiles est sans doute la navigation par onglets.
Vue d'ensemble
L'onglet "Top Tab Navigator" est placé en haut de votre application et permet aux utilisateurs de passer d'un écran à l'autre en cliquant.
Ajout de navigateurs
Pour ajouter un navigateur à votre application, vous devez faire glisser le composant navigateur dans votre arborescence de composants, puis faire glisser un écran au dessus du composant navigateur.
Propriétés du navigateur à onglets
Vous disposez de nombreuses options pour personnaliser votre Top Tab Navigator, comme par exemple changer la couleur de fond ou la couleur de teinte. Voici les différentes options de personnalisation :
Propriétés simples
SwipeEnabled : Permet à l'utilisateur de passer d'un écran à l'autre.
AnimationEnabled : Permet d'animer les transitions entre les écrans.
Lazy: Si c'est vrai, les onglets ne sont chargés qu'une fois que l'onglet est ouvert. Si faux, tous les onglets sont chargés lors de la première ouverture du navigateur d'onglets.
Background Color : sélectionnez une couleur pour l'onglet supérieur du navigateur.
Tab Indicator Color : un soulignement apparaîtra sous l'onglet que vous aurez sélectionné. Vous pouvez choisir une couleur pour le soulignement.
Active Tint Color : sélectionnez une couleur de police pour l'onglet actuellement utilisé.
Inactive Tint Color : sélectionnez une couleur pour le texte des onglets qui ne sont pas utilisés.
ShowIcon : permet d'afficher ou non les icônes dans l'onglet Navigateur.
ShowLabel : Permet d'afficher ou non les étiquettes des onglets dans le navigateur d'onglets.
Propriétés avancées
Upper Case Label : Faites en sorte que le texte de tous les onglets soit en majuscules.
PressColor : la couleur du matériau ondule lorsqu'une languette est pressée
PressOpacity : Opacité de l'ondulation du matériau lorsqu'une languette est pressée
ScrollEnabled : Activer ou non les onglets déroulants
Tab Indicator Height : Un trait de soulignement apparaîtra sous l'onglet que vous aurez sélectionné. Cette section vous permettra de choisir la hauteur du soulignement.
Ajouter des étiquettes et des icônes à vos onglets
Lors de la conception d'un onglet, vous pouvez utiliser des mots ou des images pour guider les utilisateurs vers les différents écrans.
Instructions étape par étape
Étape 1. Ajoutez des écrans à un Navigateur en les faisant glisser et en les déposant sur un Navigateur.
Étape 2. Sélectionnez l'onglet supérieur Navigateur. Décidez si vous souhaitez afficher des icônes (ShowIcon) ou des étiquettes (ShowLabel) en cliquant sur ces boutons :
Étape 3. Selon que vous ajoutez des icônes ou des étiquettes, sélectionnez l'écran que vous souhaitez styliser et téléchargez une image ou ajoutez du contenu :
Vous trouverez ci-dessous des descriptions supplémentaires :
TabBarLabel -- Le nom de votre étiquette d'onglet
ActiveTabIcon -- Icône qui apparaît lorsque l'onglet est sélectionné ; Vous pouvez télécharger une image pour cette icône.
InactiveTabIcon -- Icône qui apparaît lorsque l'onglet n'est pas sélectionné ; vous pouvez télécharger une image pour cette icône.
Permettre le balayage
Le balayage est une façon populaire de se déplacer dans les écrans et est activé par l'onglet Navigateur. Vous pouvez activer la fonction de balayage en cliquant sur le bouton SwipeEnabled.
Last updated
