Ceci est un article sur Lacet, une bibliothèque de composants par Cory La Viska, mais avec une torsion. Il définit tous vos composants UX standard : onglets, modaux, accordéons, saisies semi-automatiques et beaucoup plus. Ils sont beaux dès leur sortie de l'emballage, sont accessibles et entièrement personnalisables. Mais plutôt que de créer ces composants dans React, ou Solid, ou Svelte, etc., il les crée avec Composants Web; cela signifie que vous pouvez les utiliser avec tous cadre.
Quelques éléments préliminaires
Les composants Web sont excellents, mais il y a actuellement quelques petits problèmes à prendre en compte.
Réagir
J'ai dit qu'ils fonctionnent dans n'importe quel framework JavaScript, mais comme je l'ai déjà écrit, le support de React pour les composants Web est actuellement pauvre. Pour résoudre ce problème, Shoelace en fait wrappers créés juste pour réagir.
Une autre option, que j'aime personnellement, consiste à créer un composant React fin qui accepte le nom de balise d'un composant Web et tous ses attributs et propriétés, puis fait le sale boulot de gérer les lacunes de React. J'ai parlé de cette option dans un post précédent. J'aime cette solution car elle est conçue pour être supprimée. Le problème d'interopérabilité des composants Web est actuellement résolu dans la branche expérimentale de React. Ainsi, une fois celle-ci expédiée, tout composant mince interopérable avec les composants Web que vous utilisez peut être recherché et supprimé, vous laissant ainsi des utilisations directes des composants Web, sans aucun wrapper React.
Rendu côté serveur (SSR)
La prise en charge de la RSS est également médiocre au moment d'écrire ces lignes. En théorie, il y a quelque chose qui s'appelle Shadow DOM déclaratif (DSD) qui permettrait la SSR. Mais la prise en charge du navigateur est minimale et, dans tous les cas, DSD nécessite en fait prise en charge du serveur travailler correctement, ce qui signifie Suivant, Remix, ou tout ce que vous utilisez sur le serveur devra devenir capable d'une manipulation spéciale.
Cela dit, il existe d'autres moyens d'obtenir des composants Web pour juste travailler
avec une application Web qui est SSR avec quelque chose comme Next. La version courte est que les scripts enregistrant vos composants Web doivent s'exécuter dans un script de blocage avant que votre balisage ne soit analysé. Mais c'est un sujet pour un autre post.
Bien sûr, si vous construisez n'importe quel type de SPA rendu par le client, ce n'est pas un problème. C'est ce avec quoi nous allons travailler dans cet article.
Commençons
Étant donné que je souhaite que ce message se concentre sur Shoelace et sur sa nature de composant Web, j'utiliserai svelte pour tout. je vais aussi utiliser ça Projet Stackblitz pour démonstration. Nous allons construire cette démo ensemble, étape par étape, mais n'hésitez pas à ouvrir ce REPL à tout moment pour voir le résultat final.
Je vais vous montrer comment utiliser Shoelace et, plus important encore, comment le personnaliser. Nous parlerons de DOM fantômes et quels styles ils bloquent du monde extérieur (ainsi que ceux qu'ils ne bloquent pas). Nous parlerons également de la ::part Sélecteur CSS - qui peut être entièrement nouveau pour vous - et nous verrons même comment Shoelace nous permet de remplacer et de personnaliser ses différentes animations.
Si vous trouvez que vous aimez Shoelace après avoir lu ce post et que vous voulez l'essayer dans un projet React, mon conseil est d'utiliser un emballage comme je l'ai dit dans l'introduction. Cela vous permettra d'utiliser n'importe lequel des composants de Shoelace, et il pourra être complètement supprimé une fois que React aura livré les correctifs du composant Web qu'ils ont déjà (recherchez-le dans la version 19).
Présentation de Shoelace
Lacet a assez détaillé instructions d'installation. Dans sa forme la plus simple, vous pouvez vider ainsi que les balises dans votre document HTML, et c'est tout. Cependant, pour toute application de production, vous souhaiterez probablement importer de manière sélective uniquement ce que vous voulez, et il existe également des instructions pour cela.
Avec Shoelace installé, créons un composant Svelte pour restituer du contenu, puis suivons les étapes pour le personnaliser entièrement. Pour choisir quelque chose d'assez non trivial, je suis allé avec les onglets et une boîte de dialogue (communément appelée modale). Voici un balisage tiré en grande partie des docs:
General
Custom
Advanced
Disabled
This is the general tab panel.
This is the custom tab panel.
This is the advanced tab panel.
This is a disabled tab panel.
Hello World!
Cela rend quelques onglets agréables et stylés. Le soulignement de l'onglet actif s'anime même bien et glisse d'un onglet actif à l'autre.
Je ne vais pas perdre votre temps à parcourir chaque pouce des API qui sont déjà bien documentées sur le site Web de Shoelace. Au lieu de cela, examinons la meilleure façon d'interagir avec ces composants Web et de les personnaliser entièrement.
Interagir avec l'API : méthodes et événements
L'appel de méthodes et l'abonnement à des événements sur un composant Web peuvent être légèrement différents de ce à quoi vous êtes habitué avec votre framework normal de choix, mais ce n'est pas trop compliqué. Voyons comment.
Tabs
Le composant onglets () a un show méthode, qui affiche manuellement un onglet particulier. Pour appeler cela, nous devons avoir accès à l'élément DOM sous-jacent de nos onglets. Dans Svelte, cela signifie utiliser bind:this. Dans React, ce serait un ref. Et ainsi de suite. Puisque nous utilisons Svelte, déclarons une variable pour notre tabs exemple:
let tabs;
… et liez-le :
Maintenant, nous pouvons ajouter un bouton pour l'appeler :
C'est la même idée pour les événements. Il y a un sl-tab-show un événement qui se déclenche lorsqu'un nouvel onglet est affiché. Nous pourrions utiliser addEventListener sur notre tabs variable, ou nous pouvons utiliser Svelte on:event-name raccourci.
console.log(e)}>Cela fonctionne et enregistre les objets d'événement lorsque vous affichez différents onglets.
Généralement, nous rendons les onglets et laissons l'utilisateur cliquer entre eux, donc ce travail n'est généralement même pas nécessaire, mais il est là si vous en avez besoin. Maintenant, rendons le composant de dialogue interactif.
Dialogue
Le composant de dialogue () prend un open prop qui contrôle si la boîte de dialogue est… ouverte. Déclarons-le dans notre composant Svelte :
let tabs;
let open = false;
Il a aussi un sl-hide événement lorsque la boîte de dialogue est masquée. Passons notre open soutenir et lier à la hide afin que nous puissions le réinitialiser lorsque l'utilisateur clique en dehors du contenu de la boîte de dialogue pour le fermer. Et ajoutons un gestionnaire de clic à ce bouton de fermeture pour définir notre open soutenir à false, ce qui fermerait également la boîte de dialogue.
open = false}>
Hello World!
Enfin, connectons notre bouton de dialogue ouvert :
Et c'est ça. Interagir avec l'API d'une bibliothèque de composants est plus ou moins simple. Si c'est tout ce que ce post a fait, ce serait assez ennuyeux.
Mais Shoelace - étant construit avec des composants Web - signifie que certaines choses, en particulier les styles, fonctionneront un peu différemment de ce à quoi nous pourrions être habitués.
Personnalisez tous les styles !
Au moment d'écrire ces lignes, Shoelace est toujours en version bêta et le créateur envisage de modifier certains styles par défaut, voire de supprimer complètement certains paramètres par défaut afin qu'ils ne remplacent plus les styles de votre application hôte. Les concepts que nous couvrirons sont pertinents dans les deux sens, mais ne soyez pas surpris si certaines des spécificités de Shoelace que je mentionne sont différentes lorsque vous allez l'utiliser.
Aussi agréables que soient les styles par défaut de Shoelace, nous pourrions avoir nos propres conceptions dans notre application Web et nous voudrons que nos composants UX correspondent. Voyons comment nous nous y prendrions dans un monde de composants Web.
Nous n'essaierons pas en fait améliorer quoi que ce soit. Le créateur de Shoelace est un bien meilleur designer que je ne le serai jamais. Au lieu de cela, nous allons juste regarder comment Change choses, afin que vous puissiez vous adapter à vos propres applications Web.
Un tour rapide des Shadow DOM
Jetez un coup d'œil à l'un de ces en-têtes d'onglet dans vos DevTools ; Ça devrait ressembler a quelque chose comme ca:
Notre élément tab a créé un div conteneur avec un .tab ainsi que les .tab--active classe, et un tabindex, tout en affichant le texte que nous avons saisi pour cet onglet. Mais remarquez qu'il est assis à l'intérieur d'un racine de l'ombre. Cela permet aux auteurs de composants Web d'ajouter leur propre balisage au composant Web tout en fournissant un emplacement pour le contenu. we fournir. Remarquez le élément? Cela signifie essentiellement "mettre le contenu que l'utilisateur a rendu jusqu'à XNUMX fois les balises du composant Web ici. »
Alors le Le composant crée une racine fantôme, y ajoute du contenu pour rendre l'en-tête d'onglet joliment stylé avec un espace réservé () qui rend notre contenu à l'intérieur.
Styles encapsulés
L'un des problèmes classiques et les plus frustrants du développement Web a toujours été les styles en cascade dans des endroits où nous n'en voulons pas. Vous pourriez craindre que toutes les règles de style de notre application qui spécifient quelque chose comme div.tab interférerait avec ces onglets. Il s'avère que ce n'est pas un problème; les racines d'ombre encapsulent les styles. Les styles extérieurs à la racine fantôme n'affectent pas ce qui se trouve à l'intérieur de la racine fantôme (à quelques exceptions près dont nous parlerons), et vice versa.
Les exceptions à cela sont les styles héritables. Bien sûr, vous n'avez pas besoin d'appliquer un font-family style pour chaque élément de votre application Web. Au lieu de cela, vous pouvez spécifier votre font-family une fois, sur :root or html et le faire hériter partout en dessous. Cet héritage va, en fait, percer également la racine de l'ombre.
Propriétés personnalisées CSS (souvent appelées "variables css") sont une exception connexe. Une racine fantôme peut absolument lire une propriété CSS qui est définie en dehors de la racine fantôme ; cela deviendra pertinent dans un instant.
Les ::part sélecteur
Qu'en est-il des styles qui ne voulez pas hériter. Et si nous voulons personnaliser quelque chose comme cursor, qui n'hérite pas, sur quelque chose à l'intérieur de la racine fantôme. N'avons-nous pas de chance? Il s'avère que nous ne le sommes pas. Jetez un autre coup d'œil à l'image de l'élément d'onglet ci-dessus et à sa racine fantôme. Remarquez le part attribut sur le div? Cela vous permet de cibler et de styliser cet élément depuis l'extérieur de la racine fantôme à l'aide de la ::part sélecteur. Nous allons parcourir un exemple un peu.
Remplacer les styles de lacets
Voyons chacune de ces approches en action. A partir de maintenant, beaucoup des styles Shoelace, y compris les polices, reçoivent les valeurs par défaut des propriétés personnalisées CSS. Pour aligner ces polices avec les styles de votre application, remplacez les accessoires personnalisés en question. Voir les docs pour plus d'informations sur les variables CSS que Shoelace utilise, ou vous pouvez simplement inspecter les styles dans n'importe quel élément donné dans DevTools.
Héritage des styles via la racine fantôme
Ouvrez le app.css déposer dans le src répertoire du Projet StackBlitz. Dans le :root section en bas, vous devriez voir un letter-spacing: normal; déclaration. Depuis le letter-spacing propriété peut être héritée, essayez de définir une nouvelle valeur, comme 2px. Lors de l'enregistrement, tout le contenu, y compris les en-têtes d'onglet définis dans la racine fantôme, s'ajustera en conséquence.
Écraser les variables CSS Shoelace
Les composant lit un --indicator-color Propriété personnalisée CSS pour le soulignement de l'onglet actif. Nous pouvons remplacer cela avec quelques CSS de base :
sl-tab-group {
--indicator-color: green;
}Et juste comme ça, nous avons maintenant un indicateur vert !
Interroger des pièces
Dans la version de Shoelace que j'utilise actuellement (2.0.0-beta.83), tout onglet non désactivé a un pointer le curseur. Changeons cela en un curseur par défaut pour l'onglet actif (sélectionné). Nous avons déjà vu que le l'élément ajoute un part="base" attribut sur le conteneur pour l'en-tête de l'onglet. De plus, l'onglet actuellement sélectionné reçoit un active attribut. Utilisons ces faits pour cibler l'onglet actif et changeons le curseur :
sl-tab[active]::part(base) {
cursor: default;
}Et c'est ça!
Personnaliser les animations
Pour la cerise sur le gâteau métaphorique, voyons comment Shoelace nous permet de personnaliser les animations. Lacet utilise le API d'animations Web, et expose un setDefaultAnimation API pour contrôler la façon dont différents éléments animent leurs diverses interactions. Consultez la documentation pour plus de détails, mais à titre d'exemple, voici comment vous pouvez modifier l'animation de la boîte de dialogue par défaut de Shoelace pour qu'elle s'étende vers l'extérieur et se rétrécisse vers l'intérieur, pour s'animer à partir du haut et se dérouler tout en se cachant.
import { setDefaultAnimation } from "@shoelace-style/shoelace/dist/utilities/animation-registry";
setDefaultAnimation("dialog.show", {
keyframes: [
{ opacity: 0, transform: "translate3d(0px, -20px, 0px)" },
{ opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
],
options: { duration: 250, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});
setDefaultAnimation("dialog.hide", {
keyframes: [
{ opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
{ opacity: 0, transform: "translate3d(0px, 20px, 0px)" },
],
options: { duration: 200, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});Ce code est dans le App.svelte déposer. Commentez-le pour voir l'animation originale par défaut.
Emballage en place
Shoelace est une bibliothèque de composants incroyablement ambitieuse construite avec des composants Web. Étant donné que les composants Web sont indépendants du framework, ils peuvent être utilisés dans n'importe quel projet, avec n'importe quel framework. Avec de nouveaux frameworks qui commencent à apparaître avec à la fois des caractéristiques de performances étonnantes et une facilité d'utilisation, la possibilité d'utiliser des widgets d'expérience utilisateur de qualité qui ne sont liés à aucun framework n'a jamais été aussi convaincante.
