Widget Navigation entre les vues

Le widget Navigation entre les vues est un moyen d’accès interactif aux vues d’un widget Section. À mesure que les utilisateurs accèdent aux vues de la section, seul le contenu de la section et non l’intégralité de la page est actualisé, ce qui améliore les performances de l’application.

Exemple

Utilisez ce widget pour prendre en charge les exigences de conception d’application, telles que les suivantes :

• Vous créez plusieurs vues de contenu similaire dans un widget Section pour éviter de faire trop défiler la page dans votre application. Incluez un widget View Navigation (Navigation entre les vues) pour que les utilisateurs puissent cliquer sur des onglets ou des boutons, ou faire glisser un curseur, pour actualiser le contenu de la section et accéder aux vues.

Remarques sur l’utilisation

La page doit comporter un widget Section, auquel vous pouvez associer le widget Navigation entre les vues. Vous devez positionner le widget en dehors de la section ; vous ne pouvez pas imbriquer le widget Navigation entre les vues dans son widget Section correspondant. Par exemple, positionnez le widget au-dessus ou en dessous d’une section (idéal pour les onglets horizontaux) ou à gauche ou à droite d’une section (idéal pour les onglets verticaux).

Lorsque vous ajoutez un widget Navigation entre les vues, la fenêtre Quick style (Style rapide) s’affiche en regard du widget. C’est dans cette fenêtre que vous pouvez sélectionner divers styles, notamment des onglets, des symboles, un curseur et des boutons de navigation. (Pour accéder de nouveau à cette fenêtre ultérieurement, cliquez sur le bouton Quick style (Style rapide) dans la barre d’outils du widget.) Vous pouvez également configurer votre propre modèle en sélectionnant des couleurs et des polices de caractères pour les différents états du widget, dans les paramètres avancés.

Pour les styles d’onglet et de symbole, vous pouvez inclure toutes les vues de la section ou certaines vues. Pour spécifier la séquence des vues, ouvrez le panneau de configuration du widget Section et faites glisser les vues suivant l’ordre dans lequel vous souhaitez qu’elles apparaissent dans le widget Navigation entre les vues. Vous pouvez également mettre à jour les noms des vues dans les paramètres du widget Section (Section).

Paramètres

Le widget Navigation entre les vues comprend les paramètres suivants :

• Link to (Lier à) : choisissez un widget Section (Section) de la page.

Selon le style choisi, vous pouvez configurer divers paramètres.

Pour les styles d’onglet (par défaut, souligné et pilules), vous pouvez configurer les paramètres suivants :

• Views (Vues) : définissez les vues à afficher dans le widget en sélectionnant l’une des options suivantes :
  • Auto (Auto) : incluez des onglets pour toutes les vues de la section.
  • Custom (Personnalisé) : incluez des onglets pour des vues spécifiques de la section.
• Direction (Direction) : affichez les onglets horizontalement ou verticalement.
• Spacing (Espacement) : définissez l’espacement entre les onglets en pixels.
• Alignment (Alignement) : déterminez l’emplacement du texte de l’onglet. Par exemple, si vous choisissez un style de sélecteur à boutons horizontal, les noms des onglets s’alignent avec l’onglet sur le bord gauche, le bord droit, sont centrés au milieu.
• Show icon (Afficher l’icône) : affichez les icônes pour chaque vue. Vous pouvez changer l’icône de chaque vue dans les paramètres du widget Section.
• Advanced (Avancé) : remplacez le thème de votre application, pour changer la couleur d’arrière-plan du widget et styliser les trois états des onglets afin de fournir à l’utilisateur un repère visuel lorsqu’il survole ou sélectionne un onglet. Default (Par défaut) correspond à l’état de l’onglet sans aucune action de l’utilisateur ; Selected (Sélectionné) représente la sélection par l’utilisateur de l’onglet, qui affiche la vue correspondante dans le widget Section lié ; Hover (Survolé) correspond à l’état de l’onglet lorsqu’un utilisateur pointe dessus avec le curseur de la souris.

  Conseil :

  Pour tester ces options, cliquez sur Live view (Vue en temps réel) dans la barre d’outils du générateur.

  • Text (Texte) - Changez la couleur et la taille de la police de caractères (en pixels), et stylisez l’onglet par une mise en forme (gras, italique, barré et souligné).
  • Icon (Icône) : lorsque l’option Show icon (Afficher l’icône) est activée, vous pouvez changer la taille (en pixels) et la couleur des icônes de vue.
  • Background (Arrière-plan) - Sélectionnez la couleur de remplissage de l’onglet.
  • Border (Bordure) ou Underline (Souligné) : Sélectionnez la couleur, le style (par exemple, tireté ou pointillé) et la largeur en pixels de la bordure de l’onglet. Pour le style Tab underline (Onglet - Soulignement), vous ne pouvez sélectionner que la couleur et la largeur de la bordure.
  • Border radius (Rayon de bordure) - Changez la taille du rayon (en pixels ou en pourcentage) pour modeler les coins de l’onglet.

Pour le style Symbol (Symbole), vous pouvez configurer les paramètres suivants :

• Views (Vues) : définissez les vues à afficher dans le widget en sélectionnant l’une des options suivantes :
  • Auto : incluez des symboles pour toutes les vues de la section.
  • Custom (Personnalisé) : incluez des symboles pour certaines vues de la section.
• Direction : affichez les symboles horizontalement ou verticalement.
• Spacing (Espacement) : définissez l’espacement entre les symboles en pixels.
• Alignment (Alignement) : déterminez l’emplacement des symboles dans le widget. Par exemple, si vous choisissez une direction verticale, les symboles s’alignent avec le conteneur de widget selon le bord gauche ou droit, ou sont centrés.
• Tooltip (Info-bulle) : activez l’affichage d’un texte de survol correspondant au nom de la vue.
• Symbol (Symbole) : sélectionnez des icônes pour la vue actuelle et d’autres vues.
• Advanced (Avancé) : remplacez le thème de votre application, pour changer la couleur d’arrière-plan du widget ainsi que la taille d’icône (en pixels) et la couleur des trois états du symbole de navigation entre les vues : Default (Par défaut), Selected (Sélectionné) et Hover (Survol).

Pour le style Slider (Curseur), vous pouvez configurer les paramètres suivants :

• Thumb handle (Poignée) - Insérez une poignée (ou un bouton) sur le curseur pour afficher la progression le long de la trace.
• Advanced (Avancé) - Remplacez le thème de votre application, pour changer la couleur d’arrière-plan du widget et la couleur des trois états du curseur :
  • Active (Actif) - Portion achevée de la trace du curseur.
  • Thumb (Poignée) - Poignée (ou bouton) sur la trace du curseur. Vous pouvez sélectionner les couleurs de remplissage et de bordure.
  • Inactif (Actif) - Portion inachevée de la trace du curseur.

Pour les styles de flèche, vous pouvez configurer les paramètres suivants :

• Direction - Affichez les boutons de navigation et le texte horizontalement ou verticalement.
• Step (Pas) - Définissez l’incrément de déplacement en avant et en arrière dans la section à chaque clic sur les boutons de navigation. La valeur par défaut est 1. Les valeurs en entrée acceptables sont comprises entre 0 et 1. Pour observer l’effet du pas, vous devez définir une animation de transition pour le widget Section correspondant.
• Previous (Précédent) et Next (Suivant) - Saisissez le texte et sélectionnez une icône pour les boutons de navigation.
• Advanced (Avancé) : remplacez le thème de votre application pour changer la couleur d’arrière-plan du widget et la couleur de police de la pagination (pour les styles Arrow 1 (Flèche 1) et Arrow 3 (Flèche 3)) ainsi que les trois états du bouton de navigation  : Default (Par défaut) correspond à l’état du bouton sans action de l’utilisateur ; Hover (Survol) correspond à l’état du bouton lorsqu’un utilisateur pointe dessus avec le curseur de la souris ; Disabled (Désactivé) correspond à l’état du bouton lorsqu’il n’est pas possible de cliquer dessus car il n’existe pas de vue suivante ou précédente.
  • Text (Texte) - Sélectionnez la taille de police de caractères (en pixels), la couleur et le style du texte des boutons de navigation.
  • Icon (Icône) - Changez la couleur et la taille (en pixels) des boutons de navigation.
  • Background (Arrière-plan) - Sélectionnez la couleur de remplissage des boutons de navigation.
  • Border (Bordure) - Sélectionnez la couleur, le style et la largeur (en pixels) des bordures de bouton.
  • Border radius (Rayon de bordure) : changez la taille du rayon (en pixels ou en pourcentage) pour arrondir les coins des boutons de navigation.