Tyylittely
webforJ sisältää kattavan DWC-nimisen suunnittelujärjestelmän. Se on paljon enemmän kuin pelkkä teema: se on jäsennelty ja laajennettava järjestelmä, joka määrittää sovelluksesi visuaalisen ilmeen. DWC auttaa kehittäjiä ja suunnittelijoita luomaan yhtenäisiä ja brändin mukaisia käyttöliittymiä nopeasti ja luottavaisin mielin.
DWC tarjoaa perustana huolellisesti suunniteltuja CSS-muuttujia (suunnittelutunnisteita), jotka kattavat keskeiset visuaaliset elementit, kuten värit, typografian, reunukset ja välit. Nämä tunnisteet toimivat kaikkien komponenttityylien perusrakennuspalikoina ja mahdollistavat koko järjestelmän mukauttamisen vähällä vaivalla.
Edistyneempien tyylien tueksi webforJ käyttää CSS Shadow Parts -ominaisuuksia, joiden avulla komponenttien sisäisiä osia voi tyylitellä valikoivasti kapselointia rikkomatta. Näin tiimit voivat hallita komponenttien ulkoasua yksityiskohtaisesti myös suurissa sovelluksissa.
DWC sisältää myös mukautettavan väripaletin, ja sen oletusteema on selkeä ja vaalea. Kaikkia sen ominaisuuksia voi kuitenkin mukauttaa brändiisi tai tuotteesi tyyliin sopiviksi.
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."
Figman suunnittelupaketti
DWC Design Kit on virallinen Figma-resurssi webforJ-sovellusten suunnitteluun. Se kattaa kaikki DWC-komponentit teemoineen, kokoineen ja tiloineen sekä suunnittelujärjestelmän väripaletit, typografian, välit ja varjotunnisteet Figma-muuttujina ja -tyyleinä sekä vaaleassa että tummassa tilassa. Suunnittelijat ja kehittäjät voivat paketin avulla luoda visuaalisesti yhtenäisiä ja käyttäjäystävällisiä käyttöliittymiä, joiden komponenttien toiminta on ennakoitavaa, välit täsmällisiä ja värikontrasti saavutettava.
Aiheet
CSS-muuttujat
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
Varjo-osat
CSS Varjostin osat antavat kehittäjille keinon tyylitellä elementtejä komponentin varjostin DOM:issa ulkopuolelta, samalla säilyttäen kapseloinnin.
Teemat
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
Värit
webforJ tarjoaa värijärjestelmän, joka perustuu CSS:n mukautettaviin ominaisuuksiin. Nämä väri muuttujat säilyttävät johdonmukaisen visuaalisen tyylin sovelluksessasi, samalla kun annat täyden hallinnan mukauttaa väripaletteja suunnittelutarpeidesi mukaan.
Typografia
Typografia-tokeneita käytetään säilyttämään johdonmukainen fontti-estetiikka sovelluksessasi.
Koot ja välit
Spacing and sizing tokens are used to provide consistent spacing and sizing in your app. All sizing and spacing properties are defined in rem.
Reuna
Reunusomina käytetään komponentin reunuksen tyylin ja leveyden hallitsemiseen. Katso saatavilla olevat reunustyylit.
Varjot
Varjostusominaisuudet lisäävät varjotehosteita elementin kehän ympärille. Varjostukset merkitsevät käyttöliittymässä päällekkäin olevia kohteita.
Pinnat
DWC määrittelee kolme tasoa pintoja, joita käytetään käyttöliittymän hierarkian järjestämiseen yhdessä varjojen kanssa. Kaikki väripaletin värit on testattu siten, että niiden ja näiden pintojen välillä on tarpeeksi kontrastia.
Tila
State tokens määrittävät, kuinka komponentit visuaalisesti reagoivat käyttäjän vuorovaikutukseen, esimerkiksi kun ne ovat poistettu käytöstä tai fokusoitu. Nämä muuttujat auttavat varmistamaan johdonmukaisen käyttäytymisen ja tyylin kaikissa käyttöliittymäelementeissä, ja niitä voidaan helposti mukauttaa vastaamaan suunnittelujärjestelmääsi.
Siirtymät ja easing
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
Tyylikielet
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.
Jatka oppimista
ArtikkeliA Java design system built in: webforJ DWC tokens and themes
ArtikkeliDark mode in a Java web app: themes, toggle, saved choice
ArtikkeliwebforJ Components: What Ships With the Framework
ArtikkeliTransform Your webforJ App with Professional Theming
ArtikkeliBuilding Better CSS with webforJ's Styling System