Styling languages
Vos styles atteignent la page sous forme de CSS, mais vous n'avez pas à les écrire comme du CSS. webforJ charge une feuille de style que vous rédigez, compile une à partir d'un préprocesseur tel que Sass ou Less, ou en génère une à partir de Tailwind, et le résultat stylise vos vues de la même manière, peu importe la provenance. Les tokens DWC, propriétés CSS personnalisées, et parties d'ombre couvertes dans le reste de cette section s'appliquent à l'intérieur de chacun d'eux.
CSS pur
Une feuille de style que vous écrivez n'a pas besoin de compilation. Attachez-la à un composant ou à l'application avec @StyleSheet. Lorsque vous exécutez déjà le bundler frontend, vous pouvez plutôt lier un fichier .css à une classe avec @BundleEntry, ce qui le charge comme styles pour cette vue.
Sass et Less
Pour écrire vos styles en Sass ou Less, avec des variables, du nesting, et des fonctions, rédigez la source et laissez le bundler frontend le compiler en CSS. Le compilateur est une extension qui s'active lorsque source de son type est présente, donc rédiger un fichier .scss, .sass, ou .less est le seul signal dont il a besoin. Liez la source à une classe de la même manière que vous liez une feuille de style :
@Route("/styled")
@BundleEntry("styles/view.scss")
public class StyledView extends Composite<FlexLayout> {
// construire la vue
}
L'extension compile view.scss en CSS et le charge pour la vue. Voir SCSS et Sass et Less pour la structure des fichiers, les chemins de chargement, et les options que chacune accepte.
Tailwind
Tailwind génère une feuille de style à partir des noms de classes utilitaires que vos vues utilisent, plutôt qu'à partir d'un fichier que vous rédigez. Activez l'extension, puis ajoutez des utilitaires en tant que noms de classes sans rien importer. webforJ omet la réinitialisation de base de Tailwind pour ne pas contrecarrer le style que vos composants portent déjà, et un utilitaire atteint l'élément sur lequel vous l'appliquez, pas l'intérieur d'un composant. Voir Extension Tailwind pour savoir comment elle génère et scope sa feuille de style, et où les classes utilitaires s'appliquent ou non.
Une autre langue
Le compilateur pour chaque langue est une extension de bundler, et le modèle est ouvert. Pour rédiger vos styles dans une langue pour laquelle webforJ n'expédie pas de compilateur, écrivez une petite extension qui contribue ce compilateur, selon le même contrat que Sass et Less utilisent. Voir Écriture de votre propre extension.