Ajuster la mise en page pour une création dynamique

Lors de la création de pages avec une création dynamique pour différents facteurs de forme, découvrez comment ajuster la mise en page pour améliorer l’apparence de la page dans des tailles plus petites.

Avant de commencer

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche

Une méthode pour améliorer la convivialité des pages consiste à adapter les composants en ajustant la mise en page sur les différents points d’arrêt. Il existe de nombreuses options pour ajuster la mise en page. Dans cette procédure, ajustez la mise en page du composant d’onglets pour le facteur de forme mobile.

La plupart des options de disposition de colonne du volet des propriétés peuvent être modifiées pour différents facteurs de forme. Toutefois, les options suivantes ont des valeurs globales dans tous les facteurs de formulaire :

• Nombre de colonnes
• Option Empiler les colonnes dessous (pixels)
• Toutes les options sous Accessibilité

Procédure

1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour travailler ou créer une expérience en sélectionnant Créer une expérience >.
   Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
3. Créez une page à partir de zéro avec une création dynamique.
   Pour plus d’informations sur la création d’une page, consultez Créer une page dans Générateur d’IU.
4. En haut, vérifiez que l’icône de facteur de forme Bureau est sélectionnée.
   
5. À l’étape, sélectionnez + Ajouter du contenu.
6. Dans l’onglet Mises en page , sélectionnez Colonne unique.
7. Ajoutez le composant des onglets.
   1. Sélectionnez l’icône + au centre de la colonne sur l’étape.
   2. Dans l’onglet Composants , recherchez et sélectionnez le composant Onglets .
   3. Sélectionnez Enregistrer.
8. Dans le panneau de configuration, dans l’onglet Configurer , modifiez le nom du premier onglet en sélectionnant l’icône de modification.
   
9. Dans Tab label (Étiquette de l’onglet), saisissez l’onglet 1.
10. Dans l’ID d’onglet, saisissez tab_1
11. Sélectionnez Enregistrer.
12. Ajoutez un deuxième onglet.
    1. Dans l’onglet Configurer , sélectionnez + Ajouter en regard de Onglets.
    2. Sélectionnez Start from an empty container (Commencer à partir d’un conteneur vide ), puis sélectionnez Next (Suivant).
    3. Dans Tab label (Étiquette de l’onglet), saisissez l’onglet 2.
    4. Vérifiez que l’ID d’onglet a été automatiquement renseigné avec tab_2.
       
    5. Sélectionnez Créer.
13. Ajoutez un troisième onglet en répétant l’étape 12 et dans 12c, nommez l’onglet Onglet 3.
14. Vérifiez que votre arborescence de contenu et votre page sont exactes.
    
15. Sélectionnez l’icône de facteur de forme de la tablette.

    

    L’espacement et la position des onglets sont corrects pour la largeur de la tablette.

16. Sélectionnez l’icône de facteur de forme mobile.

    

    Les onglets prennent plus de place à la plus petite taille.

    

17. Modifiez la mise en page des onglets uniquement pour la taille du mobile.
    1. Dans l’arborescence de contenu, sélectionnez la colonne 1 sous la mise en page de colonne 1.
    2. Dans le panneau de configuration, dans Direction, sélectionnez l’icône de ligne.

       

    3. Sélectionnez Enregistrer.
    L’étape se met automatiquement à jour et indique que l’onglet 1 est visible et qu’il existe un nouveau menu déroulant.

    

18. Sélectionnez Aperçu.
19. Sélectionnez Plus.
    Les deux autres onglets sont disponibles.

    

20. Sélectionnez les icônes de facteur de forme du bureau et de la tablette pour voir que la liste déroulante Plus n’apparaît pas.
21. Sélectionnez le X pour fermer la superposition de l’aperçu .