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

• Ajout de navigateurs

• Propriétés du navigateur à onglets

• Ajouter des étiquettes et des icônes

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.

Utiliser des mots

Utilisation des images

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.