Questo è un post su laccio, una libreria di componenti di Cory La Viska, ma con una svolta. Definisce tutti i tuoi componenti UX standard: schede, modali, fisarmoniche, completamenti automatici e molto, molto di più. Hanno un bell'aspetto fuori dagli schemi, sono accessibili e completamente personalizzabili. Ma invece di creare questi componenti in React, o Solid, o Svelte, ecc., li crea con Componenti Web; questo significa che puoi usarli con in qualsiasi struttura.
Alcune cose preliminari
I componenti Web sono fantastici, ma al momento ci sono alcuni piccoli intoppi di cui essere a conoscenza.
Reagire
Ho detto che funzionano in qualsiasi framework JavaScript, ma come ho scritto prima, il supporto di React per i componenti Web lo è attualmente povero. Per risolvere questo problema, Shoelace in realtà involucri creati solo per Reagire.
Un'altra opzione, che personalmente mi piace, è creare un componente React sottile che accetti il nome del tag di un componente Web e tutti i suoi attributi e proprietà, quindi faccia il lavoro sporco di gestire le carenze di React. Ho parlato di questa opzione in un post precedente. Mi piace questa soluzione perché è progettata per essere eliminata. Il problema di interoperabilità del componente Web è attualmente risolto nel ramo sperimentale di React, quindi una volta spedito, qualsiasi componente interoperabile del componente Web sottile che stai utilizzando può essere cercato e rimosso, lasciandoti con utilizzi diretti del componente Web, senza alcun wrapper di React.
Rendering lato server (SSR)
Anche il supporto per SSR è scarso al momento della stesura di questo articolo. In teoria, c'è qualcosa chiamato Ombra dichiarativa DOM (DSD) che abiliterebbe SSR. Ma il supporto del browser è minimo e, in ogni caso, DSD richiede effettivamente supporto del server lavorare bene, il che significa Avanti, Remix, o qualunque cosa tu usi sul server dovrà diventare capace di una gestione speciale.
Detto questo, ci sono altri modi per ottenere Web Components solo lavoro
con un'app Web con SSR con qualcosa come Next. La versione breve prevede che gli script che registrano i componenti Web devono essere eseguiti in uno script di blocco prima che il markup venga analizzato. Ma questo è un argomento per un altro post.
Ovviamente, se stai costruendo qualsiasi tipo di SPA resa dal cliente, questo non è un problema. Questo è ciò con cui lavoreremo in questo post.
Iniziamo
Dal momento che voglio che questo post si concentri su Shoelace e sulla sua natura di componente Web, lo userò snello per tutto. Userò anche questo Progetto StackBlitz per dimostrazione. Costruiremo questa demo insieme, passo dopo passo, ma sentiti libero di aprire quel REPL in qualsiasi momento per vedere il risultato finale.
Ti mostrerò come usare Shoelace e, soprattutto, come personalizzarlo. Parleremo DOM ombra e quali stili bloccano dal mondo esterno (oltre a quali no). Parleremo anche del ::part Selettore CSS, che potrebbe essere del tutto nuovo per te, e vedremo anche come Shoelace ci consente di sovrascrivere e personalizzare le sue varie animazioni.
Se dopo aver letto questo post trovi che ti piace Shoelace e vuoi provarlo in un progetto React, il mio consiglio è di usare un involucro come ho detto nell'introduzione. Ciò ti consentirà di utilizzare qualsiasi componente di Shoelace e può essere rimosso del tutto una volta che React invia le correzioni del componente Web che già hanno (cercalo nella versione 19).
Presentazione del laccio delle scarpe
Shoelace è abbastanza dettagliato Istruzioni di installazione. Nella sua forma più semplice, puoi scaricare ed tag nel tuo documento HTML, e basta. Per qualsiasi app di produzione, tuttavia, probabilmente vorrai importare selettivamente solo ciò che desideri e ci sono anche istruzioni per questo.
Con Shoelace installato, creiamo un componente Svelte per eseguire il rendering di alcuni contenuti, quindi seguiamo i passaggi per personalizzarlo completamente. Per scegliere qualcosa di abbastanza non banale, sono andato con le schede e i componenti di una finestra di dialogo (comunemente denominata modale). Ecco un po' di markup preso in gran parte dai documenti:
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!
Questo rende alcune schede belle e in stile. La sottolineatura sulla scheda attiva si anima anche bene e scorre da una scheda attiva all'altra.
Non perderò tempo a scorrere ogni centimetro delle API che sono già ben documentate sul sito Web di Shoelace. Invece, esaminiamo il modo migliore per interagire e personalizzare completamente questi componenti Web.
Interagire con le API: metodi ed eventi
Chiamare metodi e sottoscrivere eventi su un componente Web potrebbe essere leggermente diverso da quello a cui sei abituato con il tuo normale framework di scelta, ma non è troppo complicato. Vediamo come.
Tabs
Il componente schede () ha un show metodo, che mostra manualmente una scheda particolare. Per chiamare questo, dobbiamo ottenere l'accesso all'elemento DOM sottostante delle nostre schede. In Svelte, questo significa usare bind:this. In React, sarebbe un ref. E così via. Dato che stiamo usando Svelte, dichiariamo una variabile per il nostro tabs esempio:
let tabs;
…e legarlo:
Ora possiamo aggiungere un pulsante per chiamarlo:
È la stessa idea per gli eventi. C'è un sl-tab-show evento che si attiva quando viene mostrata una nuova scheda. Potremmo usare addEventListener sulla nostra tabs variabile, oppure possiamo usare Svelte on:event-name scorciatoia.
console.log(e)}>Funziona e registra gli oggetti evento mentre mostri diverse schede.
In genere eseguiamo il rendering delle schede e consentiamo all'utente di fare clic tra di esse, quindi questo lavoro di solito non è nemmeno necessario, ma è lì se ne hai bisogno. Ora rendiamo interattivo il componente dialog.
Dialogo
Il componente di dialogo () prende un file open prop che controlla se la finestra di dialogo è... aperta. Dichiariamolo nel nostro componente Svelte:
let tabs;
let open = false;
Ha anche un sl-hide evento per quando la finestra di dialogo è nascosta. Passiamo il nostro open prop e vincolare al hide evento in modo da poterlo reimpostare quando l'utente fa clic al di fuori del contenuto della finestra di dialogo per chiuderlo. E aggiungiamo un gestore di clic a quel pulsante di chiusura per impostare il nostro open prop a false, che chiuderebbe anche la finestra di dialogo.
open = false}>
Hello World!
Infine, colleghiamo il nostro pulsante di dialogo aperto:
E questo è tutto. L'interazione con l'API di una libreria di componenti è più o meno semplice. Se questo è tutto ciò che questo post ha fatto, sarebbe piuttosto noioso.
Ma Shoelace, essendo costruito con componenti Web, significa che alcune cose, in particolare gli stili, funzioneranno in modo leggermente diverso da come potremmo essere abituati.
Personalizza tutti gli stili!
Al momento della stesura di questo articolo, Shoelace è ancora in versione beta e il creatore sta valutando la possibilità di modificare alcuni stili predefiniti, possibilmente anche rimuovere del tutto alcuni valori predefiniti in modo che non sovrascrivano più gli stili dell'applicazione host. I concetti che tratteremo sono rilevanti in entrambi i casi, ma non sorprenderti se alcune delle specifiche di Shoelace che menziono sono diverse quando lo usi.
Per quanto belli siano gli stili predefiniti di Shoelace, potremmo avere i nostri design nella nostra app Web e vorremmo che i nostri componenti UX corrispondano. Vediamo come lo faremmo in un mondo di componenti Web.
Non proveremo a farlo davvero competenze qualsiasi cosa. Il creatore di Shoelace è un designer di gran lunga migliore di quanto lo sarò mai io. Invece, vedremo solo come farlo il cambiamento cose, così puoi adattarti alle tue app web.
Un rapido tour dei DOM Shadow
Dai un'occhiata a una di quelle intestazioni di schede nei tuoi DevTools; Dovrebbe assomigliare a qualcosa di simile a questo:
Il nostro elemento tab ha creato un div contenitore con a .tab ed .tab--active classe, e a tabindex, visualizzando anche il testo che abbiamo inserito per quella scheda. Ma nota che è seduto all'interno di a radice d'ombra. Ciò consente agli autori di componenti Web di aggiungere il proprio markup al componente Web fornendo allo stesso tempo una posizione per il contenuto we fornire. Notare il elemento? Ciò significa fondamentalmente "metti qualsiasi contenuto visualizzato dall'utente fra i tag del componente Web qui. "
Di conseguenza, il componente crea una radice ombra, aggiunge del contenuto ad essa per rendere l'intestazione della scheda ben disegnata insieme a un segnaposto () che rende il nostro contenuto all'interno.
Stili incapsulati
Uno dei problemi classici e più frustranti nello sviluppo web sono sempre stati gli stili cascata in posti dove non li vogliamo. Potresti preoccuparti che qualsiasi regola di stile nella nostra applicazione specifichi qualcosa di simile div.tab interferirebbe con queste schede. Si scopre che questo non è un problema; le radici dell'ombra racchiudono gli stili. Gli stili dall'esterno della radice dell'ombra non influiscono su ciò che si trova all'interno della radice dell'ombra (con alcune eccezioni di cui parleremo) e viceversa.
Le eccezioni sono gli stili ereditabili. Ovviamente non è necessario applicare a font-family stile per ogni elemento della tua app web. Invece, puoi specificare il tuo font-family una volta, su :root or html e farlo ereditare ovunque sotto di esso. Questa eredità, infatti, trafiggerà anche la radice dell'ombra.
Proprietà personalizzate CSS (spesso chiamate "variabili CSS") sono un'eccezione correlata. Una radice ombra può assolutamente leggere una proprietà CSS definita al di fuori della radice ombra; questo diventerà rilevante in un momento.
I ::part selettore
Che dire degli stili che non ereditare. E se volessimo personalizzare qualcosa di simile cursor, che non eredita, su qualcosa all'interno della radice dell'ombra. Siamo sfortunati? Si scopre che non lo siamo. Dai un'altra occhiata all'immagine dell'elemento della scheda sopra e alla sua radice ombra. Notare il part attributo sul div? Ciò ti consente di indirizzare e definire lo stile di quell'elemento dall'esterno della radice dell'ombra usando il ::part selettore. Passeremo attraverso un esempio è un po'.
Sovrascrivere gli stili di lacci delle scarpe
Vediamo ciascuno di questi approcci in azione. Al momento, Un sacco degli stili Shoelace, inclusi i caratteri, ricevono valori predefiniti dalle proprietà personalizzate CSS. Per allineare quei caratteri con gli stili della tua applicazione, sovrascrivi gli oggetti di scena personalizzati in questione. Vedere i documenti per informazioni su quali variabili CSS sta utilizzando Shoelace, oppure puoi semplicemente ispezionare gli stili in un dato elemento in DevTools.
Ereditare gli stili attraverso la radice dell'ombra
Aprire il app.css file nella src directory del Progetto StackBlitz. Nel :root sezione in basso, dovresti vedere a letter-spacing: normal; dichiarazione. Dal momento che il letter-spacing proprietà è ereditabile, prova a impostare un nuovo valore, ad esempio 2px. Al salvataggio, tutto il contenuto, comprese le intestazioni delle schede definite nella radice shadow, si regolerà di conseguenza.
Sovrascrittura delle variabili CSS di Shoelace
I componente legge un --indicator-color Proprietà personalizzata CSS per la sottolineatura della scheda attiva. Possiamo sovrascriverlo con alcuni CSS di base:
sl-tab-group {
--indicator-color: green;
}E proprio così, ora abbiamo un indicatore verde!
Interrogazione di parti
Nella versione di Shoelace che sto usando in questo momento (2.0.0-beta.83), qualsiasi scheda non disabilitata ha un pointer cursore. Cambiamolo in un cursore predefinito per la scheda attiva (selezionata). Abbiamo già visto che il l'elemento aggiunge a part="base" attributo sul contenitore per l'intestazione della scheda. Inoltre, la scheda attualmente selezionata riceve un active attributo. Usiamo questi fatti per scegliere come target la scheda attiva e cambiamo il cursore:
sl-tab[active]::part(base) {
cursor: default;
}E questo è tutto!
Personalizzazione delle animazioni
Per qualche ciliegina sulla torta metaforica, vediamo come Shoelace ci permette di personalizzare le animazioni. Shoelace utilizza il API Animazioni Web, ed espone a setDefaultAnimation API per controllare il modo in cui i diversi elementi animano le loro varie interazioni. Vedi i documenti per i dettagli, ma come esempio, ecco come potresti modificare l'animazione della finestra di dialogo predefinita di Shoelace dall'espansione verso l'esterno e dal restringimento verso l'interno, per animare invece dall'alto e scendere mentre ti nascondi.
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)" },
});Quel codice è nel App.svelte file. Commentalo per vedere l'animazione originale predefinita.
Concludendo
Shoelace è una libreria di componenti incredibilmente ambiziosa creata con Web Components. Poiché i componenti Web sono indipendenti dal framework, possono essere utilizzati in qualsiasi progetto, con qualsiasi framework. Con i nuovi framework che iniziano a uscire con caratteristiche prestazionali sorprendenti e anche facilità d'uso, la possibilità di utilizzare widget di esperienza utente di qualità che non sono legati a nessun framework non è mai stata così avvincente.
