Kuidas luua veebikomponenti kasutades Stencil.js

Veebikomponendid on tehnoloogiate kogum, mis võimaldab teil luua korduvkasutatavaid elemente ja kasutada neid erinevates veebirakendustes.

Stencil.js on kompilaator, mis genereerib veebikomponente, mis ühilduvad kõigi kaasaegsete brauseritega. See pakub tööriistu ja API-sid, mis aitavad teil luua kiireid, tõhusaid ja skaleeritavaid veebikomponente.

Stencil.js-iga alustamine

Stencil.js-iga alustamiseks peate selle esmalt oma arvutis lähtestama.

Selleks käivitage terminalis node.js järgmine käsk:

npm init šabloon

Pärast käsu käivitamist ilmub ekraanile viip, kus saate valida, millise projektiga soovite alustada:

Jätkamiseks valige komponendi valik, sisestage oma projekti nimi ja kinnitage oma valik:

Järgmisena minge oma projekti kataloogi ja installige oma sõltuvused, käivitades järgmised käsud:

cd esimene šabloonprojekt
npm installimine

Uue veebikomponendi loomine

Stencil.js-is uue veebikomponendi loomiseks looge kaustatee nagu

src/komponendid. Komponentide kaust sisaldab TypeScript-faili, mille nimi on teie komponendi järgi Stencil.js kasutab TypeScripti keelt ja JSX komponentide arendamiseks. Kaust sisaldab ka CSS-faili, mis sisaldab teie komponendi stiili.

Näiteks kui soovite luua komponendi nimega "minu-nupp", looge fail nimega my-button.tsx ja CSS-faili nimega minu-nupp.css. Aastal my-button.tsx faili, määrake oma komponent Stencil.js API abil:

importida { Komponent, h } alates"@šabloon/tuum";
@Component({
 silt: "minu nupp",
 styleUrl: "my-button.css",
 vari: tõsi,
})
eksportidaklassMinuButton{
 render() {
tagasi (
Klõpsake Mina</button>
 );
 }
}

See kood impordib Komponent ja h funktsioonid saidilt Stencil.js. The Komponent funktsioon määratleb komponendi, samas kui h funktsiooni loob oma märgistuse HTML-i abil.

Määrake oma komponent kasutades @Component dekoraator, mis võtab objekti, millel on kolm omadust: tag, styleUrl, ja vari.

The tag atribuut sisaldab komponendi sildi nime. The styleUrl atribuut määrab CSS-faili kohandatud elemendi stiili kujundamiseks. Lõpuks, vari atribuut on tõeväärtus, mis näitab, kas komponent kasutab Shadow DOM-i kohandatud elemendi stiilide ja käitumise kapseldamiseks. Renderdusmeetodi puhul loote nupuelemendi.

Lisaks styleUrl atribuut, saate oma komponendi stiilimiseks kasutada veel kahte atribuuti: stiilis ja stiili URL-id.

The stiilis atribuut määrab komponendi tekstisisesed stiilid. See võtab stringiväärtuse, mis tähistab komponendi CSS-i stiile:

importida { Komponent, h } alates"@šabloon/tuum";
@Component({
 silt: "minu nupp",
 stiil: `
 nupp {
 polsterdus: 1rem 0.5rem;
 piiri raadius: 12px;
 font-perekond: kursiiv;
 piir: puudub;
 värv: #e2e2e2;
 taustavärv: #333333;
 fondi kaal: paks;
 }
`,
 vari: tõsi,
})
eksportidaklassMinuButton{
 render() {
tagasi (
Klõpsake Mina</button>
 );
 }
}

The stiili URL-id atribuut määrab komponendi stiili kujundamiseks mitu välist CSS-faili. See võtab hulga stringiväärtusi, mis esindavad CSS-failide teid:

importida { Komponent, h } alates"@šabloon/tuum";
@Component({
 silt: "minu nupp",
 styleUrls: ["my-button.css", 'other-button.css'],
 vari: tõsi,
})
eksportidaklassMinuButton{
 render() {
tagasi (
Klõpsake Mina</button>
 );
 }
}

Veebikomponendi renderdamine

Kui olete veebikomponendi loonud, saate selle renderdada HTML-failina, lisades kohandatud elemendi märgendi. Minu-nupu komponendi saate kaasata järgmiselt.

html>
<htmlrež="ltr"lang="en">
<pea>
<metacharset="utf-8" />
<metanimi="vaateava"sisu="laius = seadme laius, algskaala = 1,0, minimaalne skaala = 1,0, maksimaalne skaala = 5,0" />
<linkhref=""rel="laadileht">
<pealkiri>Šabloonkomponentide starterpealkiri>
<stsenaariumtüüp="moodul"src="/build/first-stencil-project.esm.js">stsenaarium>
<stsenaariummoodul puudubsrc="/build/first-stencil-project.js">stsenaarium>
pea>
<keha>
<minu-nupp>minu-nupp>
keha>
html>

Nüüd saate luua veebikomponente kasutades Stencil.js

Stencil.js on võimas tööriist kiirete, tõhusate ja skaleeritavate veebikomponentide loomiseks. Selle API ja tööriistad muudavad veebikomponentide loomise ja haldamise lihtsaks ning selle ühilduvus kõigi kaasaegsete brauseritega tagab, et teie komponendid töötavad hästi erinevates veebirakendustes.

Kuna veebikomponendid muutuvad üha populaarsemaks, on Stencil.js raamistik, mida peaksite veebi korduvkasutatavate elementide loomisel arvesse võtma.