Utiliser les mises en page Flexbox dans Générateur d'IU

Créez une mise en page Flexbox pour Générateur d'IU créer des pages puissantes afin de pouvoir les personnaliser avec des feuilles de style en cascade (CSS) et d’améliorer vos performances.

Vous pouvez facilement créer des pages personnalisées avec des mises en page Flexbox dans Générateur d'IU. La personnalisation de la mise en page de votre page vous permet de profiter pleinement de Flexbox afin de réaliser votre conception globale de page. Pour plus d'informations, consultez Organiser les composants dans les pages du générateur d'IU.

Flexbox est un système de mise en page unidimensionnel en CSS. Flexbox est intrinsèquement flexible, ce qui est utile lorsque vous ne connaissez pas la taille de votre contenu. Si vous prévoyez de créer des pages complexes, vous pouvez personnaliser la mise en page de votre page dans l’onglet styles du panneau de configuration ou avec CSS. Visitez Mozilla pour en savoir plus sur Flexbox.

Vous pouvez modifier l’orientation de votre contenu dans la mise en page de la manière suivante :

• Ligne : les lignes sont organisées de gauche à droite ou de droite à gauche, selon la direction de la langue par défaut de votre navigateur. Gauche/droite est le cas pour un navigateur anglais.
• Inversion de ligne : les lignes sont organisées dans le sens inverse de la langue par défaut de votre navigateur, par exemple de droite à gauche ou de gauche à droite.
• Colonne : Haut/Bas ou Bas/Haut
• Colonne inversée : bas/haut

  Figure 1. Directions des lignes et des colonnes Flexbox

  

• Justifier le contenu : définit l’alignement le long de l’axe principal. Les choix sont les suivants :
  • Flex-start : les éléments se trouvent au début de la direction du flex, comme le contenu justifié à gauche. Il s'agit du paramètre par défaut.
  • Extrémité flexible : les éléments sont à la fin de la direction flexible, comme le contenu justifié à droite.
  • Espace entre : les éléments sont répartis uniformément.
  • Espace autour : les éléments sont répartis uniformément avec un espace égal autour d’eux.
  • Uniformément dans l’espace : l’espacement entre les éléments est égal.
• Aligner les éléments : définit la façon dont vous souhaitez afficher votre contenu Flex le long de l’axe transversal. Les choix sont les suivants :
  • Étirer : étirez votre contenu pour remplir le conteneur. Il s’agit du paramètre par défaut
  • Flex-start : Placez votre contenu au début de l’axe croisé.
  • Flex-end : Placez votre contenu à l’extrémité de l’axe transversal.
  • Centre : Centrez votre contenu sur l’axe croisé.
  • Système de base : alignez votre contenu de la même manière que l’alignement de votre base de référence.
• Hauteur : Réglez la hauteur automatiquement ou manuellement.
• Largeur : Définissez la hauteur de vos éléments Flexbox automatiquement ou manuellement.
• Marge : définissez votre distance minimale entre les éléments Flexbox.
• Marge intérieure : définissez la marge intérieure de chaque côté de vos éléments de Flexbox.

Créer une mise en page Flexbox avec le nouveau système de mise en page

Créez une mise en page Générateur d'IU Flexbox pour créer des pages puissantes dans un environnement low-code.

Avant de commencer

Rôle requis : admin

Procédure

1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour y 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éer une page dans Générateur d'IU.
4. Sélectionnez le bouton + Ajouter du contenu dans l’étape Générateur d'IU .
5. Sélectionnez Flexbox dans l’onglet Mises en page.
   
6. Sélectionnez l’onglet Styles dans le panneau de configuration.
7. Dans la section Mise en page , vous devriez voir Flexbox en surbrillance.
   
8. Dans la section Mise en page de l’onglet Styles, vous pouvez modifier les éléments suivants :

   Direction

   Définissez la façon dont vous voulez que les composants s’empilent, horizontalement ou verticalement.

   Aligner les éléments

   Définissez comment les composants des conteneurs s’alignent en tant que groupe.

   Justifier le contenu

   Définissez la façon de condenser ou d’espacer les composants à l’intérieur du conteneur.

   Remarque :

   Sélectionnez Afficher les options avancées de mise en page pour afficher les deux options suivantes.

   Écart

   Définissez la taille de l’écart entre les lignes et les colonnes.

   Envelopper les éléments enfants sur plusieurs lignes

   Définissez si les composants sont forcés sur une ligne ou débordent sur plusieurs lignes.

   Visitez Mozilla pour en savoir plus sur les configurations de disposition Flexbox.

9. Facultatif : Vous pouvez modifier le code CSS en sélectionnant Afficher les options de configuration avancées en bas de l’onglet Styles , puis en sélectionnant l’option Afficher et modifier CSS .
10. Sélectionnez Enregistrer.
    Votre page s’actualise et affiche les modifications apportées à la mise en page.
11. Ajoutez des composants à votre page.
    Consultez Ajouter et configurer des composants pour plus d'informations.
12. Affichez et testez votre page en sélectionnant

Créer une mise en page Flexbox avec l’ancien système de mise en page

Créez une mise en page Flexbox pour Générateur d'IU créer des pages puissantes afin de pouvoir les personnaliser avec des feuilles de style en cascade (CSS) et d’améliorer vos performances.

Avant de commencer

Rôle requis : admin

Pourquoi et quand exécuter cette tâche

Dans la procédure suivante, vous apprendrez à utiliser Flexbox pour modifier le code CSS afin de personnaliser la mise en page de votre page.

Procédure

1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour y 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éer une page dans Générateur d'IU ou ouvrez une page.
4. Cliquez sur l’onglet Mise en page et choisissez la mise en page à deux colonnes.

   Figure 2. Mise en page standard à deux colonnes

   

5. Cliquez sur Modifier le code de mise en page.

   Figure 3. Modifier le code de mise en page

   

6. Développez l’éditeur de code afin de pouvoir afficher facilement le code CSS.

   Figure 4. Développer l’éditeur de code

   

7. Ajoutez un autre emplacement à la mise en page en copiant le code CSS d’un emplacement existant.

   Copier le code est plus facile que de le taper dans la mise en page.

   Figure 5. Copier le code CSS d’un emplacement

   

8. Sous le code que vous avez copié, placez une virgule, puis collez le code CSS suivant :
   1. Remplacez la "slotName" propriété par « Colonne 3 ».
   2. Remplacez la "flex" propriété par « 2 ».
   3. Ajouter « margin-left » : « 1rem ».

   Figure 6. Collez le code CSS

   

   La modification de la "flex" propriété augmente la taille de la colonne. En utilisant "margin-left", vous ajoutez un espace entre les colonnes précédentes.

9. Réduisez la vue développée, puis cliquez sur Appliquer.

   Figure 7. Appliquer un changement de mise en page

   

Résultats

La nouvelle mise en page Flexbox que vous avez créée affiche le nouvel emplacement que vous avez ajouté à la mise en page à deux colonnes d’origine.

Figure 8. Nouvelle mise en page personnalisée

Cliquez sur Rétablir l’original pour rétablir les modifications apportées à la mise en page d’origine.

Figure 9. Réinitialiser une mise en page

Tâches associées

• Créer une mise en page de grille CSS avec l’ancien système de mise en page