Styling
webforJ toimitetaan kattavan suunnittelujärjestelmän kanssa nimeltä DWC. Se on enemmän kuin vain teema, se on rakennettu, laajennettavissa oleva järjestelmä, joka hallitsee sovelluksesi visuaalista kieltä. DWC on suunniteltu auttamaan kehittäjiä ja suunnittelijoita luomaan johdonmukaisia, brändin mukaisia käyttöliittymiä nopeasti ja varmasti.
DWC:n ytimessä on joukko huolellisesti suunniteltuja CSS-muuttujia (suunnittelutunnisteita), jotka kattavat keskeiset visuaaliset elementit, kuten värit, typografian, reunat ja väliyhteydet. Nämä tunnisteet toimivat kaikkien komponenttityylien perustavanlaatuisina rakennuspalikoina ja mahdollistavat globaalin mukauttamisen vähällä vaivalla.
Edistyneemmän tyylittelyn tukemiseksi webforJ hyödyntää CSS Shadow Partsia, mikä mahdollistaa komponenttien sisäisten osien valikoidun tyylittelyn ilman kapseloinnin rikkomista. Tämä antaa tiimeille tarkkaa hallintaa siitä, kuinka komponentit näkyvät, jopa suuremmissa sovelluksissa.
DWC sisältää myös muokattavan väri-kartan ja oletuksena puhtaan, vaalean visuaalisen teeman, mutta jokaista aspektia voidaan mukauttaa brändisi tai tuotteesi 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 design kit
DWC Figma -kirjasto on virallinen suunnitteluresurssi modernien, yritystasojen verkkosovellusten luomiseen. Se sisältää kattavan joukon komponentteja, typografiatyylejä ja väritunnisteita, jotka ovat linjassa DWC:n suunnittelujärjestelmän kanssa. Suunnittelijat ja kehittäjät voivat käyttää tätä kirjastoa rakentaakseen visuaalisesti johdonmukaisia, käyttäjäystävällisiä käyttöliittymiä ennakoitavalla komponenttikäytöksellä, tarkalla väliyhteydellä ja saavutettavalla väri-eron kanssa.
Topics
📄️ CSS Variables
CSS-muuttujat ovat keskeisessä roolissa webforJ-komponenttien ulkoasun mukauttamisessa. Nämä muuttujat tallentavat uudelleenkäytettäviä arvoja, kuten värejä, fonttikokoja ja välejä, joita voidaan soveltaa johdonmukaisesti sovelluksessasi.
📄️ 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.