Stijlen
webforJ wordt geleverd met een uitgebreid ontwerpsysteem genaamd DWC. Het is meer dan alleen een thema: het is een gestructureerd, uitbreidbaar systeem dat de visuele taal van je app bepaalt. DWC is ontwikkeld om ontwikkelaars en ontwerpers te helpen snel en vol vertrouwen consistente interfaces te maken die aansluiten bij hun merk.
DWC biedt als basis een reeks zorgvuldig ontworpen CSS-variabelen (ontwerptokens) voor belangrijke visuele elementen, zoals kleuren, typografie, randen en tussenruimten. Deze tokens vormen de bouwstenen voor alle componentstijlen en maken het mogelijk om met minimale inspanning globale aanpassingen te doen.
Voor geavanceerdere stijlaanpassingen gebruikt webforJ CSS Shadow Parts, waarmee onderdelen binnen componenten gericht kunnen worden gestileerd zonder de inkapseling te doorbreken. Zo hebben teams nauwkeurige controle over de weergave van componenten, zelfs in grotere applicaties.
DWC bevat ook een aanpasbaar kleurenpalet en gebruikt standaard een helder, licht thema. Elk aspect kan echter worden aangepast aan de stijl van je merk of product.
The webforj-styling-apps skill can theme and style webforJ apps with DWC design tokens. After installing the webforJ AI plugin, ask your assistant:
- "Theme this app with a blue palette."
- "Style the dwc-button to match the brand guidelines."
- "Make this layout tighter - adjust spacing and typography."
Figma-ontwerpset
De DWC Design Kit is de officiële Figma-bron voor het ontwerpen van webforJ-apps. De kit bevat alle DWC-componenten met hun thema's, afmetingen en statussen, evenals de kleurenpaletten, typografie, tussenruimten en schaduwtokens van het ontwerpsysteem als Figma-variabelen en -stijlen in zowel de lichte als de donkere modus. Ontwerpers en ontwikkelaars kunnen de kit gebruiken om visueel consistente, gebruiksvriendelijke interfaces te maken met voorspelbaar componentgedrag, nauwkeurige tussenruimten en toegankelijke kleurcontrasten.
Onderwerpen
CSS-variabelen
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
Schaduwonderdelen
CSS Schaduw Onderdelen geven ontwikkelaars een manier om elementen binnen de schaduw DOM van een component van buitenaf te stylen, terwijl de encapsulatie behouden blijft.
Thema's
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
Kleuren
webforJ biedt een kleurensysteem dat is opgebouwd uit CSS aangepaste eigenschappen. Deze kleurvariabelen behouden een consistente visuele stijl in je app terwijl je volledige controle hebt om paletten aan te passen aan je ontwerpeisen.
Typografie
Typografie tokens worden gebruikt om een consistente set van letterstijlletjes door je app heen te handhaven.
Formaten en witruimte
Spacing en sizing tokens worden gebruikt om consistente spacing en sizing in je app te bieden. Alle sizing en spacing eigenschappen zijn gedefinieerd in rem.
Rand
De rand-eigenschappen worden gebruikt om de randstijl en -breedte van de component te beheersen. Zie beschikbare randstijlen.
Schaduwen
De schaduweigenschappen voegen schaduweffecten toe rond het frame van een element. Schaduwen duiden op items die in de gebruikersinterface bovenop elkaar zijn gestapeld.
Oppervlakken
DWC definieert drie niveaus van oppervlakken die worden gebruikt om de UI-hiërarchie te organiseren, gecombineerd met schaduwen. Alle paletkleuren zijn getest om voldoende contraste te hebben met deze oppervlakken.
Status
State tokens definiëren hoe componenten visueel reageren op gebruikersinteractie, zoals wanneer ze zijn uitgeschakeld of gefocust. Deze variabelen helpen ervoor te zorgen dat er consistent gedrag en styling is over alle UI-elementen, en kunnen gemakkelijk worden aangepast om overeen te komen met uw ontwerpsysteem.
Overgangen en easing
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
Styling-talen
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.
Blijf leren
ArtikelA Java design system built in: webforJ DWC tokens and themes
ArtikelDark mode in a Java web app: themes, toggle, saved choice
ArtikelwebforJ Components: What Ships With the Framework
ArtikelTransform Your webforJ App with Professional Theming
ArtikelBuilding Better CSS with webforJ's Styling System