Ajuster la mise en page pour une création dynamique

Lors de la création de pages avec 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 à des tailles plus petites.

Avant de commencer

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche

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

La plupart des options de mise en page des colonnes du panneau 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 forme :

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

Procédure

1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant Créer > 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 la création dynamique.
   Pour plus d’informations sur la création d’une page, voir Créer une page dans le générateur d’IU.
4. En haut de l’écran, vérifiez que l’icône du facteur de forme du 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 d’onglets.
   1. Sélectionnez l’icône + au centre de la colonne de l’étape.
   2. Dans l’onglet Composants , recherchez et sélectionnez le composant Onglets .
   3. Sélectionnez Enregistrer.
8. Dans le panneau de configuration, sous l’onglet Configurer , modifiez le nom du premier onglet en sélectionnant l’icône de modification.
   
9. Dans Étiquette de l’onglet, saisissez l’onglet 1.
10. Dans l’ID de l’onglet, saisissez tab_1
11. Sélectionnez Enregistrer.
12. Ajoutez un deuxième onglet.
    1. Dans l’onglet Configurer , sélectionnez + Ajouter à côté de Onglets.
    2. Sélectionnez Commencer à partir d’un conteneur vide , puis sélectionnez Suivant.
    3. Dans Étiquette de l’onglet, saisissez l’onglet 2.
    4. Vérifiez que l’ID d’onglet a été rempli automatiquement avec tab_2.
       
    5. Sélectionnez Créer.
13. Ajoutez un troisième onglet en répétant l’étape 12 et en 12c, nommez l’onglet 3.
14. Vérifiez l’exactitude de votre arborescence de contenu et de votre page.
    
15. Sélectionnez l’icône du facteur de forme de la tablette.

    

    L’espacement et la position des onglets ont l’air bien à la largeur de la tablette.

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

    

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

    

17. Modifiez la disposition des onglets uniquement pour la taille mobile.
    1. Dans l’arborescence de contenu, sélectionnez Colonne 1 sous 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 à jour automatiquement pour indiquer que l’onglet 1 est visible et qu’un nouveau menu déroulant s’affiche.

    

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 des ordinateurs de bureau et des tablettes 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 .