Webkomponens készítése a Stencil.js használatával

A webes összetevők olyan technológiák összessége, amelyek segítségével újrafelhasználható elemeket hozhat létre, és azokat különböző webalkalmazásokban újra felhasználhatja.

A Stencil.js egy olyan fordító, amely minden modern böngészővel kompatibilis webes összetevőket hoz létre. Eszközöket és API-kat biztosít a gyors, hatékony, méretezhető webösszetevők létrehozásához.

A Stencil.js használatának megkezdése

A Stencil.js használatának megkezdéséhez először inicializálnia kell azt a számítógépén.

Ehhez futtassa a következő parancsot a node.js termináljában:

npm init stencil

A parancs futtatása után egy prompt jelenik meg a képernyőn, hogy kiválassza, melyik projekttel szeretne kezdeni:

A folytatáshoz válassza ki az összetevő opciót, írja be a projekt nevét, és erősítse meg a választást:

Ezután lépjen be a projekt könyvtárába, és telepítse a függőségeit a következő parancsok futtatásával:

cd első-stencil-projekt
npm telepítés

Új webkomponens létrehozása

Ha új webkomponenst szeretne létrehozni a Stencil.js-ben, hozzon létre egy mappa elérési utat, mint például src/components. Az összetevők mappa egy TypeScript-fájlt fog tartalmazni, amelyet az összetevőről neveztek el, mint Stencil.js TypeScript nyelvet használ és JSX a komponensfejlesztéshez. A mappa egy CSS-fájlt is tartalmaz, amely tartalmazza az összetevő stílusát.

Például, ha egy "my-button" nevű összetevőt szeretne létrehozni, hozzon létre egy fájlt my-button.tsx és egy CSS-fájlt my-button.css. Ban,-ben my-button.tsx fájlt, határozza meg az összetevőt a Stencil.js API segítségével:

import { Komponens, h } tól től"@stencil/core";
@Összetevő({
 címke: "az én gombom",
 styleUrl: "my-button.css",
 árnyék: igaz,
})
exportosztályMyButton{
 Vakol() {
Visszatérés (
Kattintson az Én< gombra/button>
 );
 }
}

Ez a kód importálja a Összetevő és h függvények a Stencil.js-ből. A Összetevő függvény határozza meg a komponenst, míg a h funkció HTML használatával hozza létre a jelölését.

Határozza meg az összetevőt a @Összetevő dekorátor, amely három tulajdonságú tárgyat vesz fel: címke, styleUrl, és árnyék.

A címke tulajdonság tartalmazza az összetevő címke nevét. A styleUrl tulajdonság határozza meg a CSS-fájlt az egyéni elem stílusához. Végül a árnyék A property egy logikai érték, amely jelzi, hogy az összetevő Shadow DOM-ot használ-e az egyéni elem stílusainak és viselkedésének beágyazására. A renderelési módszerben egy gombelemet hoz létre.

Amellett, hogy a styleUrl tulajdonságot, további két tulajdonságot használhat az összetevő stílusához: stílus és styleUrls.

A stílus tulajdonság meghatározza az összetevő belső stílusait. Egy karakterlánc értéket vesz igénybe, amely az összetevő CSS-stílusait képviseli:

import { Komponens, h } tól től"@stencil/core";
@Összetevő({
 címke: "az én gombom",
 stílus: `
 gomb {
 párnázás: 1rem 0.5rem;
 határsugár: 12px;
 font-family: cursive;
 határ: nincs;
 szín: #e2e2e2;
 háttérszín: #333333;
 betűsúly: félkövér;
 }
`,
 árnyék: igaz,
})
exportosztályMyButton{
 Vakol() {
Visszatérés (
Kattintson az Én< gombra/button>
 );
 }
}

A styleUrls tulajdonság több külső CSS-fájlt ad meg az összetevő stílusához. A CSS-fájlok elérési útját képviselő karakterlánc-értékek tömbje szükséges:

import { Komponens, h } tól től"@stencil/core";
@Összetevő({
 címke: "az én gombom",
 styleUrls: ["my-button.css", "egy másik gomb.css"],
 árnyék: igaz,
})
exportosztályMyButton{
 Vakol() {
Visszatérés (
Kattintson az Én< gombra/button>
 );
 }
}

A webkomponens renderelése

Miután létrehozta a webösszetevőt, egy egyéni elemcímke hozzáadásával HTML-fájlban jelenítheti meg. A következőképpen veheti fel a my-button összetevőt:

html>
<htmldir="ltr"lang="en">
<fej>
<metakarakterkészlet="utf-8" />
<metanév="nézőablak"tartalom="szélesség = eszköz szélessége, kezdeti skála = 1,0, minimális skála = 1,0, maximális skála = 5,0" />
<linkhref=""rel="stíluslap">
<cím>Stencil komponens indítócím>
<forgatókönyvtípus="modul"src="/build/first-stencil-project.esm.js">forgatókönyv>
<forgatókönyvnincs modulsrc="/build/first-stencil-project.js">forgatókönyv>
fej>
<test>
<my-gomb>my-gomb>
test>
html>

Mostantól webösszetevőket hozhat létre a Stencil.js használatával

A Stencil.js egy hatékony eszköz a gyors, hatékony és méretezhető webes összetevők létrehozásához. API-ja és eszközei megkönnyítik a webes összetevők létrehozását és kezelését, az összes modern böngészővel való kompatibilitása pedig biztosítja, hogy az összetevők jól működjenek a különböző webalkalmazásokban.

Ahogy a webes összetevők egyre népszerűbbek, a Stencil.js egy olyan keretrendszer, amelyet figyelembe kell vennie, amikor újrafelhasználható elemeket készít az internethez.