Ako vytvoriť webový komponent pomocou Stencil.js

Webové komponenty sú množinou technológií, ktoré vám umožňujú vytvárať opakovane použiteľné prvky a opätovne ich používať v rôznych webových aplikáciách.

Stencil.js je kompilátor, ktorý generuje webové komponenty, ktoré sú kompatibilné so všetkými modernými prehliadačmi. Poskytuje nástroje a rozhrania API, ktoré vám pomôžu vytvoriť rýchle, efektívne a škálovateľné webové komponenty.

Začíname so Stencil.js

Ak chcete začať so Stencil.js, musíte ho najprv inicializovať v počítači.

Urobte to spustením nasledujúceho príkazu v termináli node.js:

npm init šablóna

Po spustení príkazu sa na obrazovke zobrazí výzva na výber projektu, s ktorým chcete začať:

Ak chcete pokračovať, vyberte možnosť komponentu, zadajte názov projektu a potvrďte svoj výber:

Potom prejdite do adresára svojho projektu a nainštalujte svoje závislosti spustením týchto príkazov:

cd first-stencil-project
inštalácia npm

Vytvorenie nového webového komponentu

Ak chcete vytvoriť nový webový komponent v Stencil.js, vytvorte cestu k priečinku ako src/komponenty. Priečinok komponentov bude obsahovať súbor TypeScript pomenovaný po vašom komponente, ako Stencil.js používa jazyk TypeScript a JSX pre vývoj komponentov. Priečinok bude obsahovať aj súbor CSS, ktorý obsahuje štýl vášho komponentu.

Napríklad, ak chcete vytvoriť komponent s názvom "my-button", vytvorte súbor s názvom moje-tlačidlo.tsx a súbor CSS s názvom moje-tlačidlo.css. V moje-tlačidlo.tsx definujte svoj komponent pomocou rozhrania Stencil.js API:

importovať { Komponent, h } od'@stencil/core';
@Component({
 značka: 'my-button',
 styleUrl: 'my-button.css',
 tieň: pravda,
})
exporttriedaMyButton{
 render() {
vrátiť (
Kliknite na Ja</button>
 );
 }
}

Tento kód importuje Komponent a h funkcie zo Stencil.js. The Komponent funkcia definuje komponent, zatiaľ čo h funkciu vytvorí svoje označenie pomocou HTML.

Definujte svoj komponent pomocou @Component dekoratér, ktorý berie objekt s tromi vlastnosťami: tag, styleUrl, a tieň.

The tag vlastnosť obsahuje názov tagu komponentu. The styleUrl vlastnosť určuje súbor CSS na úpravu štýlu vlastného prvku. Nakoniec, tieň vlastnosť je boolovská hodnota, ktorá označuje, či komponent použije Shadow DOM na zapuzdrenie štýlov a správania vlastného prvku. V metóde vykreslenia vytvoríte prvok tlačidla.

Navyše k styleUrl vlastnosť, môžete použiť ďalšie dve vlastnosti na úpravu štýlu komponentu: štýl a styleUrls.

The štýl vlastnosť definuje vložené štýly pre komponent. Vyžaduje hodnotu reťazca, ktorá predstavuje štýly CSS pre komponent:

importovať { Komponent, h } od'@stencil/core';
@Component({
 značka: 'my-button',
 štýl: `
 tlačidlo {
 vypchávka: 1rem 0.5rem;
 hraničný polomer: 12px;
 font-family: kurzíva;
 hranica: žiadna;
 farba: #e2e2e2;
 farba pozadia: #333333;
 font-weight: bold;
 }
`,
 tieň: pravda,
})
exporttriedaMyButton{
 render() {
vrátiť (
Kliknite na Ja</button>
 );
 }
}

The styleUrls vlastnosť určuje viacero externých súborov CSS na úpravu štýlu komponentu. Vyžaduje pole reťazcových hodnôt, ktoré predstavujú cesty k súborom CSS:

importovať { Komponent, h } od'@stencil/core';
@Component({
 značka: 'my-button',
 styleUrls: ['my-button.css', „ďalšie tlačidlo.css“],
 tieň: pravda,
})
exporttriedaMyButton{
 render() {
vrátiť (
Kliknite na Ja</button>
 );
 }
}

Vykresľovanie webového komponentu

Po vytvorení webového komponentu ho môžete vykresliť v súbore HTML pridaním vlastnej značky prvku. Komponent moje tlačidlo môžete zahrnúť takto:

html>
<htmlr="ltr"lang="sk">
<hlavu>
<metaznakovú sadu="utf-8" />
<metanázov="výrez"obsahu="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<odkazhref=""rel="štýlov">
<titul>Štartér komponentov šablónytitul>
<skripttypu="modul"src="/build/first-stencil-project.esm.js">skript>
<skriptnomodulesrc="/build/first-stencil-project.js">skript>
hlavu>
<telo>
<moje-tlačidlo>moje-tlačidlo>
telo>
html>

Teraz môžete vytvárať webové komponenty pomocou Stencil.js

Stencil.js je výkonný nástroj na vytváranie webových komponentov, ktoré sú rýchle, efektívne a škálovateľné. Jeho API a nástroje uľahčujú vytváranie a správu webových komponentov a jeho kompatibilita so všetkými modernými prehliadačmi zaisťuje, že vaše komponenty budú dobre fungovať v rôznych webových aplikáciách.

Keďže webové komponenty sú čoraz populárnejšie, Stencil.js je rámec, ktorý by ste mali zvážiť pri vytváraní opätovne použiteľných prvkov pre web.