Dans Qodly Studio, chaque widget peut être stylé directement à l’aide de ses propriétés. Toutefois, pour conserver une apparence cohérente dans l’ensemble de votre application et pour appliquer facilement des styles globaux (tels que la couleur de la police, la taille du texte ou l’apparence des sélections), les feuilles de style CSS sont votre meilleur allié.
Dans cet article, nous allons explorer les bases de l’utilisation de CSS dans Qodly Studio, avec des exemples tirés de l’application Performance Review.
Application Performance Review
Qu’est-ce que CSS ?
CSS (Cascading Style Sheets) est un langage de style permettant de contrôler l’apparence visuelle des éléments HTML sur une page web. Elles sont utilisées pour définir les couleurs, les polices, les marges, les animations et bien plus encore, afin de créer des interfaces cohérentes, esthétiques et adaptables.
Dans ce blog, nous allons simplement vous montrer comment utiliser et créer une classe CSS dans Qodly Studio, ainsi que quelques exemples simples. Si vous souhaitez apprendre à écrire du CSS, il existe de nombreuses sources de documentation, des formations et des vidéos sur le sujet.
Comment utiliser une classe CSS dans Qodly
Créer une classe CSS
Qodly vous permet d’ajouter des classes CSS directement dans votre projet. Voici comment procéder :
- Allez dans le menu Styling de Qodly Studio.
- Créez une classe CSS.
- Précisez si elle est locale ou partagée.
- Rédigez la définition CSS.
Types de CSS dans Qodly
Qodly propose trois types de CSS pour une flexibilité maximale :
- Local: S’applique uniquement à un composant ou à une page spécifique.
- Basé sur un thème: Partagé entre plusieurs composants pour maintenir la cohérence au sein d’une section de votre application.
- Partagé: Disponible globalement dans l’ensemble du projet.
Ces options vous offrent une grande flexibilité dans la structuration et la gestion de vos styles.
Appliquer une classe CSS
Une fois que vous avez créé votre CSS, vous pouvez appliquer une classe à différents widgets en quelques étapes seulement :
- Sélectionnez le widget dans Qodly Studio.
- Allez dans l’onglet Propriétés.
- Recherchez l’option Classe CSS et saisissez le nom de la classe définie dans votre fichier CSS.
Cas d’utilisation réels
Prenons l’exemple de la page de connexion de l’application Performance Review.
Exemple 1 : stylisation d’un bouton de connexion
Nous voulons styliser le bouton de connexion avec
- Texte blanc
- Arrière-plan rouge
- Coins arrondis
- Effet de survol avec un rouge plus foncé
Nous créons une classe « button-full ».
Nous entrons la description CSS suivante :
self {
border-radius : 4px ;
border : 1px solid #dd3c4c ;
couleur de fond : #dd3c4c ;
couleur : #FFFFFF ;
transition-duration : 0.4s ;
}
self:hover {
border : 1px solid #c32232 ;
background-color : #c32232 ;
color : #FFFFFF ;
}
Dans Qodly Studio, appliquez ce style en utilisant la classe « button-full » sur vos boutons.
Exemple 2 : boutons adaptatifs pour les modes clair et foncé
Avec les requêtes média, vous pouvez créer des styles adaptatifs qui s’ajustent automatiquement en fonction du thème clair ou foncé de l’utilisateur.
Pour le mode sombre, nous voulons un rouge plus foncé avec un effet de survol plus clair. Ceci est facilement réalisable en utilisant le sélecteur @media (prefers-color-scheme : dark):
self {
border-radius : 4px ;
border : 1px solid #dd3c4c ;
couleur de fond : #dd3c4c ;
couleur : #FFFFFF ;
transition-duration : 0.4s ;
}
self:hover {
border : 1px solid #c32232 ;
background-color : #c32232 ;
color : #ffffff ;
}
@media (prefers-color-scheme : dark) {
self {
border-radius : 4px ;
border : 1px solid #c32232 ;
couleur de fond : #c32232 ;
couleur : #ffffff ;
transition-duration : 0.4s ;
}
self:hover {
border : 1px solid #dd3c4c ;
background-color : #dd3c4c ;
color : #ffffff ;
}
}
Le résultat en images :
Thème clair
Thème sombre
Exemple 3 : utilisation de variables CSS
Les variables CSS permettent de définir des constantes réutilisables, ce qui rend la gestion des styles plus facile et plus dynamique.
Par exemple, vous pouvez centraliser la gestion des couleurs et les appliquer dynamiquement en fonction du mode clair ou foncé.
Étape 1 : Définir une feuille de style partagée
Créez une feuille de style partagée et définissez toutes vos constantes:
:root {
--main-bg-color : #FFFFFF ;
--main-fg-color : #000000 ;
--accent-color1 : #dd3c4c ;
--accent-color2 : #c32232 ;
@media (prefers-color-scheme : dark) {
--main-bg-color : #121212 ;
--main-fg-color : #E0E0E0 ;
--accent-color1 : #c32232 ;
--accent-color2 : #dd3c4c ;
}
}
Étape 2 : Appliquer la variable à la classe button-full.
Pour utiliser une variable dans une classe CSS, il suffit d’utiliser la fonction var() :
self {
border-radius : 4px ;
border : 1px solid var(--accent-color1) ;
background-color : var(--accent-color1) ;
color : var(--text-color1) ;
transition-duration : 0.4s ;
}
self:hover {
border : 1px solid var(--accent-color2) ;
background-color : var(--accent-color2) ;
color : var(--text-color1) ;
}
Désormais, chaque fois que vous mettrez à jour les variables de couleur, tous les éléments stylisés seront automatiquement mis à jour, ce qui garantira un thème cohérent dans toute l’application.
Exemple 4 : stylisation d’un composant réactif
L’exemple suivant montre comment créer un design réactif qui s’adapte à la largeur de l’écran.
Le panneau de connexion se compose de trois boîtes de style :
- Une boîte pour le titre de l’application.
- Une boîte pour les champs de connexion et de mot de passe.
- Un conteneur enveloppant les deux boîtes.
Le conteneur utilise display : flex ; et flex-wrap : wrap ; pour garantir la réactivité. Si les boîtes deviennent trop larges, elles s’empilent verticalement au lieu d’être côte à côte.
Ensuite, pour les deux autres boîtes, la largeur est modifiée entre 50 % et 100 % en fonction de la taille de l’écran. Pour des raisons esthétiques, la bordure est également modifiée.
Voici l’exemple CSS de la boîte positionnée à gauche ou en haut, selon l’écran :
self {
border-radius : 10px 0 0 10px ;
width : 50% ;
height : 100% ;
}
@media screen and (max-width : 800px) {
self {
border-radius : 10px 10px 0 0 ;
width : 100% ;
height : fit-content ;
}
}
Le résultat en images :
Une astuce pour commencer
Si vous ne savez pas comment structurer votre CSS, Qodly propose une fonction pratique. Vous pouvez définir des styles via les propriétés des widgets et les exporter en tant que CSS.
Cela vous permet de voir à quoi ressemble une règle CSS et de créer et modifier facilement vos propres classes CSS.
Aller plus loin
Nous espérons que ces exemples ont démontré la puissance et la flexibilité de CSS dans Qodly Studio. Pour aller plus loin, consultez ces ressources supplémentaires :
- Personnaliser le style des boutons
- Personnaliser le style des cases à cocher
- Personnalisation du style des tableaux de données
- Personnalisation des styles de matrice
- Personnalisation des styles de boîte de sélection
- Personnalisation des styles de radio
- Personnalisation des styles de saisie de texte
Avec CSS, vous pouvez transformer vos applications Qodly en expériences visuelles uniques et professionnelles, tout en simplifiant la gestion de vos styles. Commencez et partagez vos créations ou posez vos questions sur le 4D Forum !