Styling
webforJ toimittaa kattavan suunnittelujärjestelmän nimeltä DWC. Se on enemmän kuin pelkkä teema, se on rakenteellinen, laajennettavissa oleva järjestelmä, joka säätelee sovelluksesi visuaalista kieltä. DWC on rakennettu auttamaan kehittäjiä ja suunnittelijoita luomaan johdonmukaisia, brändin mukaisia käyttöliittymiä nopeasti ja vahvasti.
Perusperiaatteeltaan DWC tarjoaa joukon tarkasti suunniteltuja CSS-muuttujia (suunnittelutokeneita), jotka kattavat keskeiset visuaaliset elementit, kuten värit, typografian, reunat ja välistykset. Nämä tokenit toimivat kaikkien komponenttityylien perustavanlaatuisina rakennuspalikoina ja mahdollistavat globaaliin mukauttamiseen minimaalista vaivannäköä.
Edistyneemmän tyylittelyn tukemiseksi webforJ hyödyntää CSS Shadow Parts -tekniikkaa, joka mahdollistaa komponenttien sisäisten osien valikoivan tyylittelyn ilman kapseloinnin murtumista. Tämä antaa tiimeille tarkkaa hallintaa siitä, miltä komponentit näyttävät, jopa suurissa sovelluksissa.
DWC sisältää myös räätälöitävän väriasteikon ja oletuksena puhtaan, vaalean visuaalisen teeman, mutta jokainen osa voidaan mukauttaa brändisi tai tuotteen tyyliin.
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-suunnittelupaketti
DWC Figma -kirjasto on virallinen suunnitteluresurssi modernien, yritysluokan verkkosovellusten luomiseen. Se sisält ää kattavan joukon komponentteja, typografiastylejä ja väritokeneita, jotka vastaavat DWC-suunnittelujärjestelmää. Suunnittelijat ja kehittäjät voivat käyttää tätä kirjastoa visuaalisesti johdonmukaisten, käyttäjäystävällisten käyttöliittymien rakentamiseen, joissa komponenttien käyttäytyminen on ennustettavaa, välistykset tarkkoja ja värikontrasti saavutettavaa.
Aiheita
CSS Variables
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
Shadow Parts
CSS Varjostin osat antavat kehittäjille keinon tyylitellä elementtejä komponentin varjostin DOM:issa ulkopuolelta, samalla säilyttäen kapseloinnin.
Themes
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
Colors
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.
Typography
Typografia-tokeneita käytetään säilyttämään johdonmukainen fontti-estetiikka sovelluksessasi.
Sizing and Spacing
Spacing and sizing tokens are used to provide consistent spacing and sizing in your app. All sizing and spacing properties are defined in rem.
Border
Reunusomina käytetään komponentin reunuksen tyylin ja leveyden hallitsemiseen. Katso saatavilla olevat reunustyylit.
Shadows
Varjostusominaisuudet lisäävät varjotehosteita elementin kehän ympärille. Varjostukset merkitsevät käyttöliittymässä päällekkäin olevia kohteita.
Surfaces
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.
State
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.
Transitions & Easing
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
Styling languages
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.