Styling
webforJ toimittaa kattavan suunnittelujärjestelmän nimeltä DWC. Se on enemmän kuin vain teema, se on rakenteellinen, laajennettavissa oleva järjestelmä, joka hallitsee sovelluksesi visuaalista kieltä. DWC on suunniteltu auttamaan kehittäjiä ja suunnittelijoita luomaan nopeasti ja varmasti johdonmukaisia, brändiin sidottuja käyttöliittymiä.
DWC:n ytimessä on joukko huolellisesti suunniteltuja CSS-muuttujia (suunnittelutokeneita), jotka kattavat keskeiset visuaaliset elementit, kuten värit, typografian, reunat ja välistykset. Nämä tokenit toimivat kaikille komponenttityyleille perustavanlaatuisina rakennuspalikoina ja mahdollistavat globaalin mukauttamisen vähällä vaivalla.
Tukeakseen edistyneempää tyylittelyä, webforJ hyödyntää CSS Shadow Parts -tekniikkaa, mikä mahdollistaa komponenttien sisäisten osien valikoivan tyylittelyn ilman kapseloinnin rikkomista. Tämä antaa tiimeille tarkkaa hallintaa siitä, miltä komponentit näyttävät, jopa suuremmissa sovelluksissa.
DWC sisältää myös mukautettavan väriportfolion ja perustuu puhtaaseen, vaaleaan visuaaliseen teemaan, mutta jokainen osa voidaan mukauttaa brändisi tai tuotteesi tyyliin.
Figma Design Kit
DWC Figma -kirjasto on virallinen suunnitteluresurssi nykyaikaisten, yritysluokan web-sovellusten luomiseen. Se sisältää kattavan joukon komponentteja, typografiastylejä ja väritokeneita, jotka ovat linjassa DWC-suunnittelujärjestelmän kanssa. Tämän kirjaston avulla suunnittelijat ja kehittäjät voivat rakentaa visuaalisesti johdonmukaisia, käyttäjäystävällisiä käyttöliittymiä, jotka tasapainottavat toiminnallisuuden hienostuneen käyttäjäkokemuksen kanssa.
Aihealueet
📄️ 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
webforJ sisältää kolme sisäänrakennettua sovellusteemaa ja tukee omien mukautettujen teemojen määrittämistä. Oletusteemat ovat:
📄️ Colors
webforJ tarjoaa värijärjestelmän, joka perustuu CSS:n mukautettuihin ominaisuuksiin. Nämä väri muuttujat säilyttävät johdonmukaisen visuaalisen tyylin sovelluksessasi samalla kun ne antavat sinulle täyden valvonnan mukauttaa palettia suunnittelutarpeidesi mukaan.
📄️ Typography
Typografia-tunnukset käytetään yhtenäisten fonttityylien ylläpitämiseen 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 reunustyylin ja leveyden hallintaan. Katso saatavilla olevat reunustyylit.
📄️ Shadows
Varjostusominaisuuksia käytetään varjostusvaikutusten lisäämiseen elementin reunoille. Voit asettaa useita vaikutuksia erottamalla ne pilkuilla. Useimmissa tapauksissa varjoja käytetään merkkaamaan elementtejä, jotka ovat päällekkäin käyttäjäliittymässä.
📄️ Surfaces
On kolme pinta-aluetta, joita käytetään käyttöliittymän hierarkian järjestämiseen, usein yhdistettynä varjoihin. Kaikki palettivärit on testattu tarjoamaan riittävää kontrastia näitä pintoja vastaan.
📄️ State
State tokens määrittelevät, miten komponentit visuaalisesti reagoivat käyttäjän vuorovaikutukseen—esimerkiksi kun ne ovat pois käytöstä tai fokusoituja. Nämä muuttujat auttavat varmistamaan johdonmukaisen käytöksen ja tyylittelyn kaikilla UI-elementeillä, ja ne ovat helposti mukautettavissa vastaamaan suunnittelujärjestelmääsi.
📄️ Transitions & Easing
Siirtymämuutujat käytetään tarjoamaan yhdenmukaisia animoituvia kestoja sovelluksessasi. Ne kontrolloivat, kuinka kauan animaatio kestää valmistuakseen.