Πώς να δημιουργήσετε ένα στοιχείο Ιστού χρησιμοποιώντας το Stencil.js

Τα στοιχεία Ιστού είναι ένα σύνολο τεχνολογιών που σας επιτρέπουν να δημιουργήσετε επαναχρησιμοποιήσιμα στοιχεία και να τα επαναχρησιμοποιήσετε σε διαφορετικές εφαρμογές Ιστού.

Το Stencil.js είναι ένας μεταγλωττιστής που δημιουργεί στοιχεία ιστού που είναι συμβατά με όλα τα σύγχρονα προγράμματα περιήγησης. Παρέχει εργαλεία και API που σας βοηθούν να δημιουργήσετε γρήγορα, αποτελεσματικά, επεκτάσιμα στοιχεία ιστού.

Ξεκινώντας με το Stencil.js

Για να ξεκινήσετε με το Stencil.js, πρέπει πρώτα να το αρχικοποιήσετε στον υπολογιστή σας.

Κάντε αυτό εκτελώντας την ακόλουθη εντολή στο τερματικό node.js:

στένσιλ init npm

Αφού εκτελέσετε την εντολή, θα εμφανιστεί ένα μήνυμα στην οθόνη σας για να επιλέξετε με ποιο έργο θέλετε να ξεκινήσετε:

Για να συνεχίσετε, επιλέξτε την επιλογή στοιχείου, εισαγάγετε το όνομα του έργου σας και επιβεβαιώστε την επιλογή σας:

Στη συνέχεια, μεταβείτε στον κατάλογο του έργου σας και εγκαταστήστε τις εξαρτήσεις σας εκτελώντας αυτές τις εντολές:

cd first-stencil-project
npm εγκατάσταση

Δημιουργία νέου στοιχείου Web

Για να δημιουργήσετε ένα νέο στοιχείο web στο Stencil.js, δημιουργήστε μια διαδρομή φακέλου όπως src/components. Ο φάκελος στοιχείων θα περιέχει ένα αρχείο TypeScript με το όνομα του στοιχείου σας, ως Stencil.js χρησιμοποιεί τη γλώσσα TypeScript και JSX για την ανάπτυξη στοιχείων. Ο φάκελος θα περιέχει επίσης ένα αρχείο CSS που περιέχει το στυλ του στοιχείου σας.

Για παράδειγμα, εάν θέλετε να δημιουργήσετε ένα στοιχείο που ονομάζεται "my-button", δημιουργήστε ένα αρχείο που ονομάζεται my-button.tsx και καλείται ένα αρχείο CSS my-button.css. Στο my-button.tsx αρχείο, ορίστε το στοιχείο σας χρησιμοποιώντας το Stencil.js API:

εισαγωγή { Component, h } από'@stencil/core';
@Συστατικό({
 ετικέτα: "κουμπί μου",
 styleUrl: "my-button.css",
 σκιά: αληθής,
})
εξαγωγήτάξηMyButton{
 render() {
ΕΠΙΣΤΡΟΦΗ (
Κάντε κλικ στο Me</button>
 );
 }
}

Αυτός ο κωδικός εισάγει το Συστατικό και η λειτουργίες από το Stencil.js. ο Συστατικό η συνάρτηση ορίζει το στοιχείο, ενώ το η λειτουργία δημιουργεί τη σήμανση χρησιμοποιώντας HTML.

Καθορίστε το στοιχείο σας χρησιμοποιώντας το @Συστατικό διακοσμητής, που παίρνει ένα αντικείμενο με τρεις ιδιότητες: ετικέτα, styleUrl, και σκιά.

ο ετικέτα Η ιδιότητα περιέχει το όνομα της ετικέτας του στοιχείου. ο styleUrl Η ιδιότητα καθορίζει το αρχείο CSS για το στυλ του προσαρμοσμένου στοιχείου. Τέλος, το σκιά Η ιδιότητα είναι μια τιμή boolean που υποδεικνύει εάν το στοιχείο θα χρησιμοποιήσει το Shadow DOM για να ενσωματώσει τα στυλ και τη συμπεριφορά του προσαρμοσμένου στοιχείου. Στη μέθοδο απόδοσης, δημιουργείτε ένα στοιχείο κουμπιού.

Επιπρόσθετα με styleUrl ιδιότητα, μπορείτε να χρησιμοποιήσετε δύο ακόμη ιδιότητες για το στυλ του στοιχείου σας: στυλ και styleUrls.

ο στυλ Η ιδιότητα ορίζει ενσωματωμένα στυλ για το στοιχείο. Παίρνει μια τιμή συμβολοσειράς που αντιπροσωπεύει τα στυλ CSS για το στοιχείο:

εισαγωγή { Component, h } από'@stencil/core';
@Συστατικό({
 ετικέτα: "κουμπί μου",
 στυλ: `
 κουμπί {
 υλικό παραγεμίσματος: 1rem 0.5rem;
 ακτίνα συνόρων: 12px;
 γραμματοσειρά-οικογένεια: cursive;
 σύνορο: κανένα;
 χρώμα: #e2e2e2;
 χρώμα του φόντου: #333333;
 βάρος γραμματοσειράς: έντονη;
 }
`,
 σκιά: αληθής,
})
εξαγωγήτάξηMyButton{
 render() {
ΕΠΙΣΤΡΟΦΗ (
Κάντε κλικ στο Me</button>
 );
 }
}

ο styleUrls Η ιδιότητα καθορίζει πολλά εξωτερικά αρχεία CSS για το στυλ του στοιχείου. Παίρνει μια σειρά από τιμές συμβολοσειράς που αντιπροσωπεύουν τις διαδρομές προς τα αρχεία CSS:

εισαγωγή { Component, h } από'@stencil/core';
@Συστατικό({
 ετικέτα: "κουμπί μου",
 styleUrls: ["my-button.css", 'another-button.css'],
 σκιά: αληθής,
})
εξαγωγήτάξηMyButton{
 render() {
ΕΠΙΣΤΡΟΦΗ (
Κάντε κλικ στο Me</button>
 );
 }
}

Απόδοση του στοιχείου Web

Αφού δημιουργήσετε το στοιχείο ιστού σας, μπορείτε να το αποδώσετε σε ένα αρχείο HTML προσθέτοντας μια προσαρμοσμένη ετικέτα στοιχείου. Δείτε πώς μπορείτε να συμπεριλάβετε το στοιχείο my-button:

html>
<htmlσκην="ltr"lang="en">
<κεφάλι>
<μετασύνολο χαρακτήρων="utf-8" />
<μεταόνομα="Θύρα προβολής"περιεχόμενο="πλάτος=πλάτος συσκευής, αρχική κλίμακα=1,0, ελάχιστη κλίμακα=1,0, μέγιστη κλίμακα=5,0" />
<Σύνδεσμοςhref=""σχετ="φύλλο στυλ">
<τίτλος>Stencil Component Starterτίτλος>
<γραφήτύπος="μονάδα μέτρησης"src="/build/first-stencil-project.esm.js">γραφή>
<γραφήνομοστοιχείοsrc="/build/first-stencil-project.js">γραφή>
κεφάλι>
<σώμα>
<το κουμπί μου>το κουμπί μου>
σώμα>
html>

Τώρα μπορείτε να δημιουργήσετε στοιχεία Ιστού χρησιμοποιώντας το Stencil.js

Το Stencil.js είναι ένα ισχυρό εργαλείο για τη δημιουργία στοιχείων ιστού που είναι γρήγορα, αποτελεσματικά και επεκτάσιμα. Το API και τα εργαλεία του διευκολύνουν τη δημιουργία και τη διαχείριση στοιχείων ιστού και η συμβατότητά του με όλα τα σύγχρονα προγράμματα περιήγησης διασφαλίζει ότι τα στοιχεία σας θα λειτουργούν καλά σε διαφορετικές εφαρμογές Ιστού.

Καθώς τα στοιχεία ιστού γίνονται όλο και πιο δημοφιλή, το Stencil.js είναι ένα πλαίσιο που πρέπει να λάβετε υπόψη κατά τη δημιουργία επαναχρησιμοποιήσιμων στοιχείων για τον ιστό.