Test de faisabilité des web components

Salut, je t'ai fait cette page pour tester les web components Les Web Component sont un standard HTML qui permet de définir des balises spécifiques avec du code associé. Le principe, c'est que je crée des composants Angular puis les exporte au travers du fichier bfm-web-components.js. Une fois que tu l'importes, tu peux utiliser les composants qui sont dedans même en dehors d'un contexte Angular Par exemple, cette page n'est PAS une application Angular, c'est juste une page HTML qui embarque les web component que je te mets à disposition pour la démo.

Préparation

Le principe en très gros, c'est que tu récupères :

bfm-web-components.js
styles.css
le contenu des répertoire bfm-ds (icônes, favicon, logo)
Le contenu du répertoire media (fonts)

et que tu les rendes dispo à côté de ton fichier HTML en suivant cette structure :

.
├── assets
├── index.html
├── bfm-web-components.js
├── media
└── styles.css

Voici le code minimal pour afficher le bouton :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
</head>
<body>
  <lib-button>Test</lib-button>
  <script src="bfm-web-components.js" type="module"></script>
</body>
</html>

Aussi, tu peux inspecter le code de cette page pour voir comment ça fonctionne

Le bouton

Le bouton contient un texte et peut également contenir une icône, ce qui fournit 2 cas de tests

Le bouton simple

<lib-button>Test</lib-button>

Test

Le bouton avec icône

<lib-button right-icon="arrow-right">Test</lib-button>

Test

L'alerte

Information

Avertissement

Message d'erreur

Alert box

Error

Warning

Le slider

Ce composant accepte des données en input, ce qui permet de tester la possibilité de passer une information à un composant

<lib-slider min="100" max="1000" step="100"></lib-slider>