Aceasta este o postare despre șiret de pantofi, o bibliotecă de componente de Cory LaViska, dar cu o întorsătură. Acesta definește toate componentele UX standard: tab-uri, modale, acordeoane, auto-completare și mult, mult mai mult. Arată frumos din cutie, sunt accesibile și complet personalizabile. Dar, în loc să creeze aceste componente în React, sau Solid, sau Svelte, etc., le creează cu Componente web; asta înseamnă că le poți folosi cu Orice cadru.
Câteva lucruri preliminare
Componentele web sunt grozave, dar în prezent există câteva mici probleme de care trebuie să fii conștient.
Reacţiona
Am spus că funcționează în orice cadru JavaScript, dar, așa cum am mai scris, suportul React pentru componentele web este în prezent săraci. Pentru a rezolva acest lucru, șiretul pantofilor de fapt au creat ambalaje doar pentru React.
O altă opțiune, care îmi place personal, este să creez o componentă React subțire care acceptă numele etichetei unei componente web și toate atributele și proprietățile sale, apoi face treaba murdară de a gestiona deficiențele React. Am vorbit despre aceasta varianta într-un post anterior. Îmi place această soluție pentru că este concepută pentru a fi ștearsă. Problema de interoperabilitate a componentelor web este rezolvată în prezent în ramura experimentală a lui React, așa că, odată ce aceasta este livrată, orice componentă interoperabilă subțire a componentelor web pe care o utilizați ar putea fi căutată și eliminată, lăsându-vă cu utilizări directe ale componentei web, fără niciun wrapper React.
Redare pe partea serverului (SSR)
Suportul pentru SSR este, de asemenea, slab la momentul scrierii acestui articol. În teorie, există ceva numit Declarative Shadow DOM (DSD) care ar permite SSR. Dar suportul pentru browser este minim și, în orice caz, DSD necesită de fapt suport pentru server a lucra corect, ceea ce înseamnă Pagina Următoare →, Remix, sau orice se întâmplă să utilizați pe server va trebui să devină capabil de o manipulare specială.
Acestea fiind spuse, există și alte modalități de a obține componente web doar munca
cu o aplicație web care este SSR cu ceva de genul Next. Versiunea scurtă este că scripturile care înregistrează componentele dvs. web trebuie să ruleze într-un script de blocare înainte ca marcajul dvs. să fie analizat. Dar acesta este un subiect pentru o altă postare.
Desigur, dacă construiți orice fel de SPA oferit de client, aceasta nu este o problemă. Cu asta vom lucra în această postare.
Să începem
Deoarece vreau ca această postare să se concentreze pe șiretul pantofilor și pe natura sa componente web, o voi folosi Svelt pentru tot. Voi folosi și asta Proiectul Stackblitz pentru demonstrație. Vom construi împreună această demonstrație, pas cu pas, dar nu ezitați să deschideți acel REPL oricând pentru a vedea rezultatul final.
Vă voi arăta cum să utilizați șiretul și, mai important, cum să o personalizați. Vom vorbi despre DOM-uri în umbră și ce stiluri blochează din lumea exterioară (precum și pe care nu le blochează). Vom vorbi și despre ::part Selector CSS - care poate fi complet nou pentru dvs. - și vom vedea chiar cum șiretul pantofilor ne permite să suprascriem și să personalizăm diferitele animații ale acestuia.
Dacă îți place șiretul după ce ai citit această postare și vrei să o încerci într-un proiect React, sfatul meu este să folosești un înveliș asa cum am mentionat in introducere. Acest lucru vă va permite să utilizați oricare dintre componentele Shoelace și poate fi eliminată complet odată ce React trimite remedierea componentelor web pe care le au deja (căutați-l în versiunea 19).
Vă prezentăm șiretul pantofilor
Șiretul pantofilor este destul de detaliat instructiuni de instalare. În cel mai simplu mod, puteți arunca și etichete în documentul dvs. HTML și asta este. Cu toate acestea, pentru orice aplicație de producție, probabil că veți dori să importați selectiv doar ceea ce doriți și există instrucțiuni și pentru asta.
Cu Shoelace instalat, să creăm o componentă Svelte pentru a reda un anumit conținut, apoi să parcurgem pașii pentru a-l personaliza complet. Pentru a alege ceva destul de non-trivial, am folosit filele și componentele de dialog (denumite în mod obișnuit ca modal). Iată câteva markupuri luate în mare parte din documente:
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!
Acest lucru redă niște file frumoase, cu stil. Sublinierea de pe fila activă chiar se animezează frumos și glisează de la o filă activă la alta.
Nu vă voi pierde timpul trecând prin fiecare centimetru din API-urile care sunt deja bine documentate pe site-ul Shoelace. În schimb, să vedem cum să interacționăm cel mai bine cu aceste componente web și să le personalizăm complet.
Interacțiunea cu API-ul: metode și evenimente
Metodele de apelare și abonarea la evenimente pe o componentă web ar putea fi ușor diferite de ceea ce v-ați obișnuit cu cadrul obișnuit de alegere, dar nu este prea complicat. Să vedem cum.
Semne de carte
Componenta file () are o show metodă, care afișează manual o anumită filă. Pentru a numi acest lucru, trebuie să obținem acces la elementul DOM subiacent al filelor noastre. În Svelte, asta înseamnă folosirea bind:this. În React, ar fi un ref. Și așa mai departe. Deoarece folosim Svelte, să declarăm o variabilă pentru nostru tabs instanță:
let tabs;
... și leagă-l:
Acum putem adăuga un buton pentru a-l apela:
Este aceeași idee pentru evenimente. Există o sl-tab-show eveniment care se declanșează când este afișată o filă nouă. Ne-am putea folosi addEventListener pe noastre tabs variabilă sau putem folosi cea a lui Svelte on:event-name comenzi rapide.
console.log(e)}>Acesta funcționează și înregistrează obiectele eveniment pe măsură ce afișați diferite file.
În mod obișnuit, redăm file și lăsăm utilizatorul să facă clic între ele, astfel încât această activitate nu este de obicei necesară, dar este acolo dacă aveți nevoie de ea. Acum să facem interactiv componenta de dialog.
dialog
Componenta de dialog () ia o open prop care controlează dacă dialogul este... deschis. Să o declarăm în componenta noastră Svelte:
let tabs;
let open = false;
De asemenea, are un sl-hide eveniment pentru când dialogul este ascuns. Să trecem de la noi open prop și se leagă de hide eveniment, astfel încât să-l putem reseta atunci când utilizatorul face clic în afara conținutului dialogului pentru a-l închide. Și să adăugăm un handler de clic la acel buton de închidere pentru a seta open prop la false, care ar închide și dialogul.
open = false}>
Hello World!
În cele din urmă, să conectăm butonul nostru de dialog deschis:
Și asta este. Interacțiunea cu API-ul unei biblioteci de componente este mai mult sau mai puțin simplă. Dacă asta ar fi tot ce a făcut această postare, ar fi destul de plictisitor.
Dar șiretul de pantofi - fiind construit cu componente web - înseamnă că unele lucruri, în special stilurile, vor funcționa puțin diferit decât am fi obișnuiți.
Personalizează toate stilurile!
În momentul scrierii acestui articol, Shoelace este încă în versiune beta, iar creatorul ia în considerare modificarea unor stiluri implicite, eventual chiar eliminarea totală a unor setări implicite, astfel încât acestea să nu mai depășească stilurile aplicației dvs. gazdă. Conceptele pe care le vom acoperi sunt relevante în orice caz, dar nu fi surprins dacă unele dintre specificațiile șiretului pe care le menționez sunt diferite când mergi să-l folosești.
Oricât de drăguțe sunt stilurile implicite pentru șiretul pantofilor, este posibil să avem propriile noastre modele în aplicația noastră web și vom dori ca componentele noastre UX să se potrivească. Să vedem cum am proceda în acest sens într-o lume a componentelor web.
De fapt, nu vom încerca îmbunătăţi orice. Creatorul șiretului este un designer mult mai bun decât voi fi eu vreodată. În schimb, ne vom uita doar la cum Schimbare lucruri, astfel încât să vă puteți adapta la propriile aplicații web.
Un tur rapid al Shadow DOM
Aruncă o privire la unul dintre aceste antete de file din DevTools; ar trebui sa arate cam asa:
Elementul nostru filă a creat un div recipient cu a .tab și .tab--active clasa, și a tabindex, afișând, de asemenea, textul pe care l-am introdus pentru acea filă. Dar observați că stă în interiorul unui rădăcină de umbră. Acest lucru permite autorilor componentelor web să adauge propriul lor marcaj la componenta web, oferind în același timp un loc pentru conținut we oferi. Observați element? Asta înseamnă practic „pune orice conținut pe care l-a redat utilizatorul între etichetele componentei web aici. "
Asa ca componenta creează o rădăcină umbră, îi adaugă conținut pentru a reda antetul filei frumos stilat împreună cu un substituent () care redă conținutul nostru în interior.
Stiluri încapsulate
Una dintre problemele clasice și mai frustrante în dezvoltarea web a fost întotdeauna stilurile cascadă în locuri unde nu le dorim. S-ar putea să vă faceți griji că orice reguli de stil din aplicația noastră care specifică ceva de genul div.tab ar interfera cu aceste file. Se pare că aceasta nu este o problemă; rădăcinile de umbră încapsulează stiluri. Stilurile din afara rădăcinii umbră nu afectează ceea ce este în interiorul rădăcinii umbră (cu unele excepții despre care vom vorbi) și invers.
Excepțiile de la aceasta sunt stilurile moștenite. Desigur, nu trebuie să aplicați un font-family stil pentru fiecare element din aplicația dvs. web. În schimb, puteți specifica dvs font-family o dată, pe :root or html și să-l moștenească peste tot sub el. Această moștenire va străpunge, de fapt, și rădăcina umbră.
Proprietăți personalizate CSS (numite adesea „variabile css”) sunt o excepție asociată. O rădăcină umbră poate citi absolut o proprietate CSS care este definită în afara rădăcinii umbră; acest lucru va deveni relevant într-o clipă.
::part selector
Dar stilurile care nu moşteni. Dacă vrem să personalizăm ceva de genul cursor, care nu moștenește, pe ceva din interiorul rădăcinii umbră. Avem ghinion? Se pare că nu suntem. Aruncă o altă privire la imaginea elementului filă de mai sus și la rădăcina sa umbră. Observați part atribut pe div? Acest lucru vă permite să vizați și să stilați acel element din afara rădăcinii umbră folosind ::part selector. Vom trece printr-un exemplu este un pic.
Depășirea stilurilor de șireturi
Să vedem fiecare dintre aceste abordări în acțiune. De acum, mult dintre stilurile de șireturi, inclusiv fonturile, primesc valori implicite de la proprietățile personalizate CSS. Pentru a alinia acele fonturi cu stilurile aplicației dvs., înlocuiți elementele de recuzită personalizate în cauză. Vedea documentele pentru informații despre ce variabile CSS folosește Shoelace, sau pur și simplu puteți inspecta stilurile din orice element dat în DevTools.
Moștenind stiluri prin rădăcina umbră
Deschideți app.css de fișier în src directorul de Proiectul StackBlitz. În :root secțiunea din partea de jos, ar trebui să vedeți a letter-spacing: normal; declaraţie. De când letter-spacing proprietatea este moștenită, încercați să setați o nouă valoare, cum ar fi 2px. La salvare, tot conținutul, inclusiv anteturile filelor definite în rădăcina umbră, se va ajusta în consecință.
Suprascrierea variabilelor CSS pentru șiretul pantofilor
componenta citeste an --indicator-color Proprietate personalizată CSS pentru sublinierea filei active. Putem suprascrie acest lucru cu niște CSS de bază:
sl-tab-group {
--indicator-color: green;
}Și chiar așa, acum avem un indicator verde!
Interogarea pieselor
În versiunea de șiretul pantofilor pe care o folosesc chiar acum (2.0.0-beta.83), orice filă nedezactivată are o pointer cursor. Să schimbăm asta la un cursor implicit pentru fila activă (selectată). Am văzut deja că elementul adaugă a part="base" atribut pe container pentru antetul filei. De asemenea, fila selectată în prezent primește un active atribut. Să folosim aceste fapte pentru a viza fila activă și pentru a schimba cursorul:
sl-tab[active]::part(base) {
cursor: default;
}Și asta este!
Personalizarea animațiilor
Pentru cireașa de pe tortul metaforic, să vedem cum șiretul ne permite să personalizăm animațiile. Șiretul folosește API-ul Web Animations, și expune a setDefaultAnimation API pentru a controla modul în care diferitele elemente își animă diferitele interacțiuni. Consultați documentele pentru detalii, dar, de exemplu, iată cum ați putea schimba animația de dialog implicită a șiretului de pantofi, de la extinderea spre exterior și micșorarea spre interior, pentru a anima în loc de sus și menține în jos în timp ce vă ascundeți.
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)" },
});Codul este în App.svelte fişier. Comentează-l pentru a vedea animația originală, implicită.
La finalul
Shoelace este o bibliotecă de componente incredibil de ambițioasă, care este construită cu componente web. Deoarece Componentele Web sunt independente de cadru, ele pot fi utilizate în orice proiect, cu orice cadru. Cu noile cadre care au început să apară atât cu caracteristici de performanță uimitoare, cât și cu ușurință în utilizare, capacitatea de a utiliza widget-uri de calitate pentru experiența utilizatorului care nu sunt legate de niciun cadru nu a fost niciodată mai convingătoare.
