Styling languages
Tyylisi saapuvat sivulle CSS:nä, mutta sinun ei tarvitse kirjoittaa niitä CSS:nä. webforJ lataa sinun kirjoittamasi tyylitiedoston, kääntää sellaisen preprocessorin, kuten Sass tai Less, avulla tai generoi sen Tailwindista, ja tulos tyylittää näkymäsi samalla tavalla riippumatta siitä, mistä se tuli. DWC-tokenit, CSS-mukautetut ominaisuudet ja varjopartit, joita käsitellään tämän osion muissa kohdissa, pätevät mikä tahansa niistä.
Yksinkertainen CSS
Kirjoittamasi tyylitiedoston ei tarvitse olla rakennettu. Kiinnitä se komponenttiin tai sovellukseen @StyleSheet avulla. Kun käytät jo frontend-bundleria, voit sen sijaan sitoa .css-tiedoston luokkaan @BundleEntry, joka lataa sen tyyliksi sille näkymälle.
Sass ja Less
Kirjoittaaksesi tyylisi Sassissa tai Lessissä, käyttäen muuttujia, sisennystä ja funktioita, kirjoita lähde ja anna frontend-bundlerin kääntää se CSS:ksi. Kääntäjä on laajennus, joka aktivoituu, kun sen tyyppistä lähdettä on olemassa, joten .scss, .sass tai .less-tiedoston kirjoittaminen on ainoa signaali, jota se tarvitsee. Sido lähde luokkaan samalla tavalla kuin sidot tyylitiedoston:
@Route("/styled")
@BundleEntry("styles/view.scss")
public class StyledView extends Composite<FlexLayout> {
// rakenna näkymä
}
Laajennus kääntää view.scss-tiedoston CSS:ksi ja lataa sen näkymälle. Katso SCSS ja Sass ja Less tiedostojen rakenteesta, latauspoluista ja valinnoista, joita kukin hyväksyy.
Tailwind
Tailwind generoituu tyylitiedosto utiliteettijärjestelmän nimien perusteella, joita näkymäsi käyttävät, ei tiedostosta, jonka kirjoitat. Kytke laajennus päälle ja lisää työkaluja luokkina ilman tuontia. webforJ jättää Tailwindin perusresetoinnin pois, jotta se ei taistelisi tyylien kanssa, joita komponenttisi jo kantavat, ja utiliteetti saavuttaa sen elementin, johon sen laitat, ei komponentin sisään. Katso Tailwind-laajennus siitä, miten se generoi ja raja tekee tyylitiedostoa, ja missä utiliteettiluokat pätevät ja eivät päde.
Toinen kieli
Jokaisen kielen kääntäjä on bundler-laajennus, ja malli on avoin. Kirjoittaaksesi tyylisi kielellä, jota webforJ ei toimita kääntäjälle, kirjoita pieni laajennus, joka tarjoaa tuon kääntäjän, samalla sopimuksella, jota Sass ja Less käyttävät. Katso Oman laajennuksen kirjoittaminen.