Kako zgraditi spletno komponento z uporabo Stencil.js

Spletne komponente so nabor tehnologij, ki vam omogočajo ustvarjanje elementov za večkratno uporabo in njihovo ponovno uporabo v različnih spletnih aplikacijah.

Stencil.js je prevajalnik, ki generira spletne komponente, ki so združljive z vsemi sodobnimi brskalniki. Zagotavlja orodja in API-je, ki vam pomagajo zgraditi hitre, učinkovite in razširljive spletne komponente.

Kako začeti uporabljati Stencil.js

Če želite začeti uporabljati Stencil.js, ga morate najprej inicializirati v računalniku.

To naredite tako, da v terminalu node.js zaženete naslednji ukaz:

npm init šablona

Po zagonu ukaza se na zaslonu prikaže poziv, da izberete projekt, s katerim želite začeti:

Za nadaljevanje izberite možnost komponente, vnesite ime svojega projekta in potrdite izbiro:

Nato se pomaknite v imenik vašega projekta in namestite svoje odvisnosti tako, da zaženete te ukaze:

cd first-stencil-project
namestitev npm

Ustvarjanje nove spletne komponente

Če želite ustvariti novo spletno komponento v Stencil.js, ustvarite pot do mape, kot je src/komponente. Mapa komponent bo vsebovala datoteko TypeScript, poimenovano po vaši komponenti kot Stencil.js uporablja jezik TypeScript in JSX za razvoj komponent. Mapa bo vsebovala tudi datoteko CSS, ki vsebuje slog vaše komponente.

Na primer, če želite zgraditi komponento z imenom "my-button", ustvarite datoteko z imenom moj-gumb.tsx in imenovana datoteka CSS moj-gumb.css. V moj-gumb.tsx definirajte svojo komponento z API-jem Stencil.js:

uvoz { Komponenta, h } od'@stencil/core';
@Component({
 oznaka: 'moj-gumb',
 styleUrl: 'my-button.css',
 senca: prav,
})
izvozrazredMyButton{
 render() {
vrnitev (
Kliknite Me</button>
 );
 }
}

Ta koda uvozi Komponenta in h funkcije iz Stencil.js. The Komponenta funkcija definira komponento, medtem ko h funkcijo ustvari svojo oznako z uporabo HTML.

Določite svojo komponento z uporabo @Komponenta dekorater, ki prevzame objekt s tremi lastnostmi: oznaka, styleUrl, in senca.

The oznaka Lastnost vsebuje ime oznake komponente. The styleUrl Lastnost podaja datoteko CSS za oblikovanje elementa po meri. Nazadnje, senca lastnost je logična vrednost, ki označuje, ali bo komponenta uporabila Shadow DOM za enkapsulacijo slogov in vedenja elementa po meri. V metodi upodabljanja ustvarite element gumba.

Poleg tega styleUrl lastnosti, lahko uporabite še dve lastnosti za oblikovanje svoje komponente: stil in styleUrls.

The stil lastnost definira vgrajene sloge za komponento. Zavzame vrednost niza, ki predstavlja sloge CSS za komponento:

uvoz { Komponenta, h } od'@stencil/core';
@Component({
 oznaka: 'moj-gumb',
 slog: `
 gumb {
 oblazinjenje: 1rem 0.5rem;
 mejni polmer: 12px;
 družina pisav: kurziv;
 meja: brez;
 barva: #e2e2e2;
 Barva ozadja: #333333;
 teža pisave: krepko;
 }
`,
 senca: prav,
})
izvozrazredMyButton{
 render() {
vrnitev (
Kliknite Me</button>
 );
 }
}

The styleUrls Lastnost podaja več zunanjih datotek CSS za oblikovanje komponente. Potrebuje niz vrednosti nizov, ki predstavljajo poti do datotek CSS:

uvoz { Komponenta, h } od'@stencil/core';
@Component({
 oznaka: 'moj-gumb',
 styleUrls: ['my-button.css', 'drugi-gumb.css'],
 senca: prav,
})
izvozrazredMyButton{
 render() {
vrnitev (
Kliknite Me</button>
 );
 }
}

Upodabljanje spletne komponente

Ko ustvarite spletno komponento, jo lahko upodobite v datoteki HTML tako, da dodate oznako elementa po meri. Takole lahko vključite komponento my-button:

html>
<htmlrežija="ltr"jezik="en">
<glavo>
<metanabor znakov="utf-8" />
<metaime="viewport"vsebino="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<povezavahref=""rel="stylesheet">
<naslov>Začetna komponenta šablonenaslov>
<scenarijvrsta="modul"src="/build/first-stencil-project.esm.js">scenarij>
<scenarijnomodulsrc="/build/first-stencil-project.js">scenarij>
glavo>
<telo>
<moj-gumb>moj-gumb>
telo>
html>

Zdaj lahko ustvarite spletne komponente z uporabo Stencil.js

Stencil.js je zmogljivo orodje za izdelavo spletnih komponent, ki so hitre, učinkovite in razširljive. Njegov API in orodja olajšajo ustvarjanje in upravljanje spletnih komponent, njegova združljivost z vsemi sodobnimi brskalniki pa zagotavlja, da bodo vaše komponente dobro delovale v različnih spletnih aplikacijah.

Ker postajajo spletne komponente vedno bolj priljubljene, je Stencil.js ogrodje, ki bi ga morali upoštevati pri izdelavi elementov za ponovno uporabo za splet.