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.
Last updated
Was this helpful?
Le style de navigation le plus courant dans les applications mobiles est sans doute la navigation par onglets.
Last updated
Was this helpful?
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.
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.
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 :
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.
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.
Lors de la conception d'un onglet, vous pouvez utiliser des mots ou des images pour guider les utilisateurs vers les différents écrans.
É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.
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.
