Maison >interface Web >tutoriel CSS >Présentation de Shoelace, une bibliothèque UX basée sur des composants indépendante du cadre
Présentation de Shoelace, une bibliothèque UX basée sur des composants indépendante du cadre
- 尊渡假赌尊渡假赌尊渡假赌original
- 2025-03-10 10:46:10746parcourir
Cet article présente Shoelace, une bibliothèque de composants créée par Cory Laviska, mais elle est unique. Il définit tous les composants UX standard: étiquettes, boîtes modales, accordéon, assortiment automatique, etc. Ces composants sont hors de la boîte, beaux, faciles à utiliser et entièrement personnalisables. Mais il ne crée pas ces composants à l'aide de frameworks comme React, Solid ou Svelte, mais utilise des composants Web; PRÉPARATION
Les composants Web sont excellents, mais il y a encore des problèmes mineurs à qui prêter attention en ce moment.
react
J'ai déjà dit qu'ils pouvaient être utilisés dans n'importe quel cadre JavaScript, mais j'ai également écrit auparavant la prise en charge de React pour les composants Web est actuellement médiocre. Pour résoudre ce problème, Shoelace a créé des wrappers spécifiquement pour React.
Une autre option que je préfère personnellement consiste à créer un composant React léger qui accepte le nom de balise du composant Web et toutes ses propriétés, puis gérer les lacunes de React. J'ai discuté de cette option dans un post précédent. J'aime ce schéma car il est conçu pour être supprimé. La branche expérimentale de React a résolu le problème de l'interopérabilité des composants Web, donc une fois publié, tout composant d'interopérabilité de composant Web léger utilisé peut être recherché et supprimé, laissant derrière l'utilisation directe des composants Web sans aucun emballage React.
rendu côté serveur (SSR)
à ce jour, le soutien à la SSR est également médiocre. En théorie, il existe une technique appelée Shadow Dom (DSD) déclarative qui peut implémenter SSR. Mais la prise en charge du navigateur est limitée, et DSD nécessite en fait la prise en charge du serveur
pour fonctionner correctement, ce qui signifie que Next, Remix ou tout autre outil que vous utilisez sur le serveur aura besoin d'une puissance de traitement spéciale.c'est-à-dire qu'il existe d'autres moyens de faire en sorte que les composants Web "fonctionnent correctement" avec des applications Web qui utilisent des outils tels que Next pour SSR. En bref, un script qui enregistre les composants Web doit être exécuté dans un script de blocage avant d'analyser la balise. Mais ce sera le sujet d'un autre poste.
Bien sûr, si vous construisez un type de spa de rendu client, ce n'est pas un problème. C'est ce que nous utiliserons dans ce post.Démarrer
Comme je veux que ce post se concentre sur Shoelace et ses fonctionnalités de composant Web, j'utiliserai Svelte pour tout. J'utiliserai également ce projet Stackblitz pour la démonstration. Nous allons construire cette démo étape par étape ensemble, mais vous pouvez ouvrir REP à tout moment pour voir le résultat final.
Je vais vous montrer comment utiliser Shoelace et, plus important encore, comment le personnaliser. Nous discuterons de Shadow Dom et des styles externes qu'ils bloquent (et quels styles ne sont pas bloqués). Nous discuterons également du sélecteur CSS
CSS - qui peut être nouveau pour vous - nous verrons même comment Shoelace nous permet d'écraser et de personnaliser ses différentes animations.
Si vous vous retrouvez à profiter du lacet après avoir lu cet article et que vous souhaitez l'essayer dans votre projet React, ma suggestion est d'utiliser l'emballage mentionné dans mon introduction. Cela vous permettra d'utiliser n'importe quel composant de Shoelace et vous pouvez le supprimer complètement une fois que React libère la correction du composant Web qu'ils ont déjà (trouver dans la version 19).
Introduction du shoelace
Shoelace a des instructions d'installation assez détaillées. Le moyen le plus simple est d'ajouter les balises