Utiliser des mises en page CSS Grid pour créer une page
Créez une mise en page de grille CSS 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.
CSS Grid est le système de mise en page le plus puissant de CSS. La grille CSS est construite au-dessus d’une grille bidimensionnelle. La grille CSS vous permet de contrôler la façon dont vous créez vos pages. Permet Générateur d'IU d’implémenter une mise en page de grille CSS à l’aide des propriétés de configuration de mise en page low-code. Pour les mises en page avancées, vous pouvez afficher et modifier le code CSS pour personnaliser vos mises en page. Visitez Mozilla pour en savoir plus sur CSS Grid.
Par exemple, vous pouvez avoir une grille avec trois colonnes et trois lignes pour faire une grille de neuf cellules. Vous pouvez placer des composants à l’intérieur de ces cellules ou faire en sorte que le composant s’étende sur plusieurs cellules.
La personnalisation de la mise en page de votre page vous permet de tirer pleinement parti de la grille CSS 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.
Pour en savoir plus sur les mises en page CSS au sein de votre Générateur d'IU instance, consultez la table [sys_uib_template].
Créer une mise en page de grille CSS avec le nouveau système de mise en page
Créez une mise en page de grille CSS 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
-
Sélectionnez Grille dans l’onglet Mises en page.
-
Dans la section Mise en page , vous devriez voir la grille en surbrillance.
-
Affichez et testez votre page en sélectionnant
Créer une mise en page de grille CSS avec l’ancien système de mise en page
Créez une mise en page de grille CSS 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 allez apprendre à utiliser la grille CSS pour modifier votre CSS afin de personnaliser la mise en page de votre page.
Procédure
-
Cliquez sur l’onglet Mise en page et choisissez la mise en page à deux lignes par deux colonnes.
Figure 2. Mise en page standard à deux lignes et deux colonnes -
Cliquez sur Modifier le code de mise en page.
Figure 3. Modifier le code de mise en page -
Développez l’éditeur de code afin de pouvoir visualiser facilement le code CSS.
Figure 4. Agrandir l’éditeur de code -
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 CSS que de le taper dans la mise en page.
Figure 5. Copier le code CSS d’un emplacement -
Collez le code CSS sous le code que vous avez copié et remplacez le slotName et grid-area par une valeur unique.
Figure 6. Collez le code CSS -
Modifiez les règles de mise en page pour inclure la nouvelle zone de colonne et de modèle, comme suit :
-
Supprimer la ligne
« Grid-template-columns » : « 1fr 1fr». - Ajoutez une deuxième cell1 après cell1, puis ajoutez cell5 après cell4.
Figure 7. Modifier les règles de mise en page Vous pouvez définir de nombreuses configurations différentes. Dans cet exemple, il y a les deux grilles résultantes de deux zones de modèle de grille différentes. La "grid-template-areas" propriété en cours de modification définit la propriété CSS du même nom. Pour plus d’informations, consultez MDN grid-templates-areas.
Figure 8. Zones de modèle de grille -
Supprimer la ligne
-
Réduisez la vue développée, puis cliquez sur Appliquer.
Figure 9. Appliquer un changement de mise en page