Widget Section (Section)

Le widget Section est un conteneur de mise en page destiné au contenu dynamique d’une ou de plusieurs vues qui peut inclure une combinaison de plusieurs autres widgets, comme un widget de carte, de liste et d’image. Lorsque le widget Section comporte plusieurs vues, vous pouvez activer les outils de navigation intégrés ou le widget peut fonctionner de manière coordonnée avec le widget View Navigation (Navigation entre les vues). À mesure que le contenu d’une section change, seule la section et non l’intégralité de la page est actualisée, ce qui améliore les performances de l’application.

Exemples

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

• Vous souhaitez afficher plusieurs grandes images avec des en-têtes similaires, mais voulez éviter de faire trop défiler la page dans votre application. Utilisez plusieurs vues dans une section et incluez les outil intégrés ou ajoutez un widget Views Navigation (Navigateur de vues) pour que les utilisateurs puissent accéder à chaque image sans avoir à faire défiler la page.
• Vous disposez de différentes entités axées sur la même localisation et souhaitez mettre en avant leurs informations avec une liste et une carte sans avoir à accéder à une page ou un bloc distinct. Vous pouvez basculer entre les vues pour afficher les différentes perspectives. Par exemple, créez une section avec deux vues qui contiennent une carte et une liste. Une vue présente une carte des restaurants à San Diego et une autre, une carte de la même zone, mais avec les espaces de détente.

Remarques sur l’utilisation

Vous pouvez créer plusieurs vues pour organiser le contenu dynamique dans une section. Les sections peuvent être placées partout sur une page et inclure plusieurs vues. Par ailleurs, un contenu distinct peut apparaître dans chaque vue. pour que les utilisateurs finaux puissent parcourir les différentes vues d’une section, vous pouvez activer les outils de navigation ou ajouter un widget View Navigation (Navigation entre les vues).

Comme les utilisateurs peuvent voir les noms des vues dans le widget Navigation entre les vues correspondant, indiquez des noms évocateurs. La séquence des vues dans le panneau de configuration correspond à leur ordre d’affichage dans le widget Navigation entre les vues.

Paramètres

Le widget Section (Section) inclut les paramètres suivants :

• Views (Vues) : ajoutez plusieurs vues, les unes après les autres, ou dupliquez des vues existantes si vous souhaitez qu’elles utilisent le même arrière-plan ou la même mise en page.
  • Gérez les vues à l’aide des options suivantes : Rename (Renommer), Duplicate (Dupliquer) et Delete (Supprimer). Le nom de la vue est également utilisé dans l’URL de l’expérience. Si vous changez le nom d’une vue après la publication, les URL précédemment utilisées fonctionnent toujours.
  • Faites glisser les vues pour modifier l’ordre de navigation dans la section.
  • Icon (Icône) : choisissez une icône pour chaque vue. Vous pouvez sélectionner des icônes dans les bibliothèques General (Général) et Arrows (Flèches) ou ajouter votre propre icône à partir d’un fichier.

    Remarque :

    Vous pouvez télécharger les formats d’image suivants : PNG, GIF, JPG, JPEG et BMP. Pour préserver une performance optimale, une limite de taille à 10 Mo est appliquée.

  • Background (Arrière-plan) : mettez à jour l’arrière-plan de chaque vue en choisissant une couleur ou une image. Lorsque vous utilisez une image d’arrière-plan, définissez sa position dans la vue en sélectionnant Fit (Adapter), Fill (Remplir), Center (Centrer), Tile (Tuile) ou Stretch (Étirer).
  • Lazy loading (Chargement différé) : choisissez de différer le chargement du contenu pour la vue jusqu’à ce que son affichage soit nécessaire dans le widget, améliorant ainsi les performances lorsque la section contient un grand nombre de vues.
• Tools (Outils) : incluez des outils pour que les utilisateurs naviguent entre les vues.
  • Flèches
    • Direction : affichez les flèches horizontalement ou verticalement.
    • Size (Taille) : définissez la taille des flèches.
    • Offset (Décalage) : définissez l’emplacement des flèches. 0 signifie que les flèches se trouvent sur le bord du widget Section. Les flèches avec un décalage positif sont plus proches que celles dotées de valeurs négatives.
  • Points
    • Position : sélectionnez une position parmi les choix suivants : Left (Gauche), Top (Haut), Right (Droite) et Bottom (Bas).
    • Size (Taille) : définissez la taille des points.
    • Offset (Décalage) : définissez l’emplacement entre les points. 0 signifie que les points se trouvent sur le bord du widget Section. Les points avec un décalage positif sont plus proches du centre du widget Section que ceux dotés de valeurs négatives.
    • Spacing (Espacement) : déterminez l’espacement entre chaque point.
• Auto play (Lecture automatique) : affichez automatiquement les vues de la section avec un intervalle de temps prédéfini.
  • Interval (Intervalle) : déterminez l’intervalle de temps entre les vues lorsque la lecture automatique est activée.
  • Loop (En boucle) : activez l’affichage en boucle des vues.
  • Lors de l’exécution, survolez un widget Section pour qu’il mette en pause la lecture automatique. Si un utilisateur passe à une autre vue en cliquant sur des outils de section ou sur un widget View Navigation (Navigation entre les vues) associé, la lecture automatique se poursuit à partir de la vue nouvellement affichée.
• Le paramètre de style Animation propre aux sections propose des options pour animer les volets de section ainsi que les vues. Pour plus d’informations, reportez-vous à la rubrique Animation.