Personnalisez vos interfaces Qodly avec CSS
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.
Requête média CSS pour une interface utilisateur sombre ou claire
Le mode sombre a gagné beaucoup de terrain récemment. C’est pourquoi nous l’avons ajouté à la version 19 de 4D et avons mentionné quelques moyens de l’adapter à vos besoins dans l’annonce correspondante.
Dans ce billet de blog, nous allons nous concentrer sur le CSS et expliquer en détail comment définir les styles CSS pour les modes clair et foncé à l’aide des requêtes média CSS.
La prise en charge du mode sombre sur macOS est arrivée.
Le Dark Mode est génial et crée une expérience utilisateur passionnante. C’est pourquoi, à partir de 4D v19, 4D prend en charge le Dark Mode, qui s’active automatiquement si le Dark Mode est activé au niveau de macOS.
Ce n’est qu’un début, et d’autres nouveautés sont à venir dans les prochaines versions, comme la prise en charge du Dark Mode pour tous les composants (par exemple, le widget 4D Write Pro) et le Design Mode.
Vous voulez voir comment le mode sombre transforme l’apparence des éléments 4D ? Continuez à lire !
Prévisualisez votre CSS directement dans l’éditeur de formulaire !
Dans 4D v18 R5, vous pouvez prévisualiser le rendu CSS final dans l’éditeur de formulaire SANS exécuter votre dialogue. Oui, vous avez bien entendu. Il n’a jamais été aussi facile de normaliser et de revitaliser vos formulaires !
Si vous n’avez pas encore entendu parler de CSS dans 4D, c’est le moment idéal pour en savoir plus ! Introduit dans 4D v18 pour les applications de projet, ce concept comprend des feuilles de style améliorées et rapides basées sur CSS. Je vous recommande de jeter un coup d’œil à cet article de blog.
Bases de données du projet : embellissez vos formulaires avec des feuilles de style
Les structures binaires 4D classiques vous permettent de définir des feuilles de style pour spécifier la police, la taille de la police et le style de texte à utiliser dans vos formulaires pour les plateformes macOS et Windows. Les bases de données de projet vous permettent d’aller encore plus loin en vous permettant de définir les propriétés d’un bouton à 4 états ou de spécifier la couleur et la bordure de tous les objets ligne ou même de définir la hauteur de l’en-tête de toutes les boîtes de liste d’une application ! Inspiré par la grammaire et la syntaxe de CSS, 4D l’a adapté pour répondre aux besoins spécifiques des formulaires des bases de données des projets 4D. Grâce aux feuilles de style, vous pouvez configurer toutes les propriétés pour créer des formulaires vraiment attrayants visuellement. Ce billet de blog vous montre comment !