Kaip sukurti žiniatinklio komponentą naudojant Stencil.js

Žiniatinklio komponentai – tai technologijų rinkinys, leidžiantis kurti daugkartinio naudojimo elementus ir pakartotinai juos naudoti įvairiose žiniatinklio programose.

Stencil.js yra kompiliatorius, generuojantis žiniatinklio komponentus, suderinamus su visomis šiuolaikinėmis naršyklėmis. Jame pateikiami įrankiai ir API, padedantys kurti greitus, efektyvius, keičiamo dydžio žiniatinklio komponentus.

Darbo su Stencil.js pradžia

Norėdami pradėti naudoti Stencil.js, pirmiausia turite jį inicijuoti savo kompiuteryje.

Atlikite tai paleisdami šią komandą savo node.js terminale:

npm init trafaretas

Paleidus komandą, ekrane pasirodys raginimas pasirinkti, nuo kurio projekto norite pradėti:

Norėdami tęsti, pasirinkite komponento parinktį, įveskite projekto pavadinimą ir patvirtinkite pasirinkimą:

Tada pakeiskite savo projekto katalogą ir įdiekite priklausomybes vykdydami šias komandas:

cd pirmasis trafareto projektas
npm diegimas

Naujo žiniatinklio komponento kūrimas

Norėdami sukurti naują žiniatinklio komponentą Stencil.js, sukurkite aplanko kelią kaip src/components. Komponentų aplanke bus TypeScript failas, pavadintas jūsų komponento vardu Stencil.js naudoja TypeScript kalbą ir JSX komponentų kūrimui. Aplanke taip pat bus CSS failas, kuriame yra jūsų komponento stilius.

Pavyzdžiui, jei norite sukurti komponentą pavadinimu „mano mygtukas“, sukurkite failą pavadinimu my-button.tsx ir CSS failas vadinamas my-button.css. Viduje my-button.tsx failą, apibrėžkite savo komponentą naudodami Stencil.js API:

importuoti { Komponentas, h } iš„@trafaretas/šerdis“;
@Komponentas({
 žyma: "mano mygtukas",
 styleUrl: „my-button.css“,
 šešėlis: tiesa,
})
eksportuotiklasėMyButton{
 render() {
grąžinti (
Spustelėkite Aš</button>
 );
 }
}

Šis kodas importuoja Komponentas ir h funkcijos iš Stencil.js. The Komponentas funkcija apibrėžia komponentą, o h funkcija sukuria savo žymėjimą naudodamas HTML.

Apibrėžkite savo komponentą naudodami @Komponentas dekoratorius, kuris paima objektą, turintį tris savybes: žyma, stiliausUrl, ir šešėlis.

The žyma savybėje yra komponento žymos pavadinimas. The stiliausUrl ypatybė nurodo CSS failą, skirtą pasirinktinio elemento stiliui formuoti. Galiausiai, šešėlis ypatybė yra loginė reikšmė, nurodanti, ar komponentas naudos šešėlinį DOM tinkintų elementų stiliams ir elgesiui įterpti. Atvaizdavimo metodu sukuriate mygtuko elementą.

Be to, stiliausUrl ypatybę, galite naudoti dar dvi ypatybes, kad sukurtumėte savo komponento stilių: stilius ir stiliaus URL.

The stilius ypatybė apibrėžia komponento eilutinius stilius. Tam reikia eilutės reikšmės, kuri atspindi komponento CSS stilius:

importuoti { Komponentas, h } iš„@trafaretas/šerdis“;
@Komponentas({
 žyma: "mano mygtukas",
 stilius: `
 mygtukas {
 pamušalas: 1rem 0.5rem;
 sienos spindulys: 12px;
 šriftų šeima: kursyvus;
 kraštinė: nėra;
 spalva: #e2e2e2;
 fono spalva: #333333;
 šrifto svoris: paryškintas;
 }
`,
 šešėlis: tiesa,
})
eksportuotiklasėMyButton{
 render() {
grąžinti (
Spustelėkite Aš</button>
 );
 }
}

The stiliaus URL ypatybė nurodo kelis išorinius CSS failus, skirtus komponento stiliui sukurti. Tam reikia eilučių reikšmių, nurodančių kelius į CSS failus:

importuoti { Komponentas, h } iš„@trafaretas/šerdis“;
@Komponentas({
 žyma: "mano mygtukas",
 styleUrls: [„my-button.css“, „kitas mygtukas.css“],
 šešėlis: tiesa,
})
eksportuotiklasėMyButton{
 render() {
grąžinti (
Spustelėkite Aš</button>
 );
 }
}

Web komponento atvaizdavimas

Sukūrę žiniatinklio komponentą, galite pateikti jį HTML faile pridėdami tinkintą elemento žymą. Štai kaip galite įtraukti mano mygtuko komponentą:

html>
<htmlrež="ltr"lang="en">
<galva>
<metasimbolių rinkinys="utf-8" />
<metavardas="žiūros sritis"turinys="plotis = įrenginio plotis, pradinė skalė = 1,0, mažiausia skalė = 1,0, didžiausia skalė = 5,0" />
<nuorodahref=""rel="stiliaus lapas">
<titulą>Trafareto komponentų starteristitulą>
<scenarijustipo="modulis"src="/build/first-stencil-project.esm.js">scenarijus>
<scenarijusjokio moduliosrc="/build/first-stencil-project.js">scenarijus>
galva>
<kūnas>
<mano mygtukas>mano mygtukas>
kūnas>
html>

Dabar galite kurti žiniatinklio komponentus naudodami Stencil.js

Stencil.js yra galingas įrankis, skirtas greitai, efektyviai ir keičiamo dydžio žiniatinklio komponentams kurti. Jo API ir įrankiai leidžia lengvai kurti ir valdyti žiniatinklio komponentus, o suderinamumas su visomis šiuolaikinėmis naršyklėmis užtikrina, kad jūsų komponentai gerai veiks įvairiose žiniatinklio programose.

Žiniatinklio komponentams vis labiau populiarėjant, Stencil.js yra sistema, į kurią turėtumėte atsižvelgti kurdami daugkartinius žiniatinklio elementus.