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é de la page 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 disposition du composant d’onglets pour le facteur de forme mobile.

La plupart des options de mise en page des colonnes 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 Tout > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour 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, consultez Créer une page dans Générateur d’IU.
4. En haut, 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 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 l’onglet Configurer du panneau de configuration, 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 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 Démarrer à 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é 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 adaptés à la largeur de la tablette.

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

    

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

    

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. Sur 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 des ordinateurs de bureau et des tablettes pour afficher que la liste déroulante Plus n’apparaît pas.
21. Sélectionnez le X pour fermer la superposition de l’aperçu .