Utiliser des mises en page de grille CSS 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 afin de pouvoir les personnaliser avec des feuilles de style en cascade (CSS) et d’améliorer vos performances.
CSS Grid est le système de mise en page le plus puissant en CSS. La grille CSS est construite au-dessus d’une grille bidimensionnelle. La grille CSS vous donne le contrôle sur 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. Rendez-vous sur 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 de Générateur d’IU.
Pour en savoir plus sur les mises en page CSS dans 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 : admin
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 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 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 la slotName valeur 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 colonne et la nouvelle zone de modèle, comme suit :
-
Supprimez la
ligne « Grid-template-columns » : « 1fr 1fr». - Ajoutez une deuxième cellule1 après cellule1, puis ajoutez cellule5 après cellule4.
Figure 7. Modifier les règles de mise en page Vous pouvez définir de nombreuses configurations différentes. Dans cet exemple, il existe 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èles de grille -
Supprimez la
-
Réduisez la vue développée, puis cliquez sur Appliquer.
Figure 9. Appliquer un changement de mise en page