Les composants Web sont un ensemble de technologies qui vous permettent de créer des éléments réutilisables et de les réutiliser dans différentes applications Web.
Stencil.js est un compilateur qui génère des composants Web compatibles avec tous les navigateurs modernes. Il fournit des outils et des API pour vous aider à créer des composants Web rapides, efficaces et évolutifs.
Premiers pas avec Stencil.js
Pour démarrer avec Stencil.js, vous devez d’abord l’initialiser sur votre ordinateur.
UTILISEZ LA VIDÉO DU JOURFAITES DÉFILER POUR CONTINUER AVEC LE CONTENUPour ce faire, exécutez la commande suivante dans votre terminal node.js :
npm init stencil
Après avoir exécuté la commande, une invite apparaîtra sur votre écran pour vous permettre de sélectionner le projet par lequel vous souhaitez commencer :
Pour continuer, choisissez l’option de composant, saisissez le nom de votre projet et confirmez votre sélection :
Ensuite, allez dans le répertoire de votre projet et installez vos dépendances en exécutant ces commandes :
cd first-stencil-project
npm install
Création d’un nouveau composant Web
Pour créer un nouveau composant Web dans Stencil.js, créez un chemin de dossier comme src/composants. Le dossier des composants contiendra un fichier TypeScript nommé d’après votre composant, comme Stencil.js utilise le langage TypeScript et JSX pour le développement de composants. Le dossier contiendra également un fichier CSS contenant le style de votre composant.
Par exemple, si vous souhaitez construire un composant appelé “my-button”, créez un fichier appelé mon-bouton.tsx et un fichier CSS appelé mon-bouton.css. Dans le mon-bouton.tsx fichier, définissez votre composant à l’aide de l’API Stencil.js :
import { Component, h } from '@stencil/core';@Component({
tag: 'my-button',
styleUrl: 'my-button.css',
shadow: true,
})
export class MyButton {
render() {
return (
<button>Click Me</button>
);
}
}
Ce code importe le Composant et h fonctions de Stencil.js. Le Composant fonction définit le composant, tandis que la fonction h fonction crée son balisage en HTML.
Définissez votre composant à l’aide de la @Composant décorateur, qui prend un objet avec trois propriétés : étiqueter, styleUrlet ombre.
Le étiqueter propriété contient le nom de balise du composant. Le styleUrl La propriété spécifie le fichier CSS pour styliser l’élément personnalisé. Enfin, le ombre La propriété est une valeur booléenne qui indique si le composant utilisera Shadow DOM pour encapsuler les styles et le comportement de l’élément personnalisé. Dans la méthode de rendu, vous créez un élément de bouton.
En plus de styleUrl propriété, vous pouvez utiliser deux propriétés supplémentaires pour styliser votre composant : style et styleUrls.
Le style La propriété définit les styles en ligne pour le composant. Il prend une valeur de chaîne qui représente les styles CSS pour le composant :
import { Component, h } from '@stencil/core';@Component({
tag: 'my-button',
style: `
button {
padding: 1rem 0.5rem;
border-radius: 12px;
font-family: cursive;
border: none;
color: #e2e2e2;
background-color: #333333;
font-weight: bold;
}
`,
shadow: true,
})
export class MyButton {
render() {
return (
<button>Click Me</button>
);
}
}
Le styleUrls La propriété spécifie plusieurs fichiers CSS externes pour styliser le composant. Il prend un tableau de valeurs de chaîne représentant les chemins vers les fichiers CSS :
import { Component, h } from '@stencil/core';@Component({
tag: 'my-button',
styleUrls: ['my-button.css', 'another-button.css'],
shadow: true,
})
export class MyButton {
render() {
return (
<button>Click Me</button>
);
}
}
Rendu du composant Web
Une fois que vous avez créé votre composant Web, vous pouvez le rendre dans un fichier HTML en ajoutant une balise d’élément personnalisée. Voici comment vous pouvez inclure le composant my-button :
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<link href="<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>" rel="stylesheet">
<title>Stencil Component Starter</title>
<script type="module" src="/build/first-stencil-project.esm.js"></script>
<script nomodule src="/build/first-stencil-project.js"></script>
</head>
<body>
<my-button></my-button>
</body>
</html>
Vous pouvez maintenant créer des composants Web à l’aide de Stencil.js
Stencil.js est un outil puissant pour créer des composants Web rapides, efficaces et évolutifs. Son API et ses outils facilitent la création et la gestion de composants Web, et sa compatibilité avec tous les navigateurs modernes garantit que vos composants fonctionneront correctement sur différentes applications Web.
Alors que les composants Web deviennent de plus en plus populaires, Stencil.js est un framework que vous devriez considérer lors de la création d’éléments réutilisables pour le Web.
Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931