Utiliser des 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 que vous pouvez personnaliser avec des feuilles de style en cascade (CSS) et 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 tirer pleinement parti de Flexbox afin que vous puissiez 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 des styles du panneau de configuration ou avec CSS. Rendez-vous sur Mozilla pour en savoir plus sur Flexbox.

Vous pouvez modifier la direction de votre contenu dans la mise en page des manières suivantes :

• 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 de ligne et de colonne 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 flexible, comme pour le contenu justifié à gauche. Il s'agit du paramètre par défaut.
  • Fin flexible : les éléments se trouvent à 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.
  • Espace uniformément : 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 transversal.
  • Flex-end : Placez votre contenu à l’extrémité de l’axe transversal.
  • Centrer : centrez votre contenu dans l’axe transversal.
  • Système de base : alignez votre contenu de la même manière que l’alignement de votre base de référence.
• Hauteur : Définissez 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 de la Flexbox.
• Remplissage : définissez le remplissage de chaque côté de vos éléments Flexbox.

Création d’une mise en page Flexbox avec le nouveau système de mise en page

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

Avant de commencer

Rôle requis : administrateur

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é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 souhaitez 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 de mise en page avancées 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.

   Rendez-vous sur 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 changements apportés à 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éation d’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 que vous pouvez personnaliser avec des feuilles de style en cascade (CSS) et améliorer vos performances.

Avant de commencer

Rôle requis : administrateur

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 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é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 en deux colonnes.

   Figure 2. Mise en page standard en 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 visualiser facilement le code CSS.

   Figure 4. Agrandir l’éditeur de code

   

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

   Il est plus facile de copier le code 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 changements de mise en page à l’original.

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