See on postitus sellest Kingapael, komponentide teek, mille autoriks on Cory LaViska, kuid keerdkäiguga. See määratleb kõik teie standardsed UX-i komponendid: sakid, modaalid, akordionid, automaatsed täited ja palju, palju muud. Need näevad karbist välja võttes ilusad välja, on ligipääsetavad ja täielikult kohandatavad. Kuid selle asemel, et luua neid komponente Reactis, Solidis või Svelte'is jne, loob see need koos Veebikomponendid; see tähendab, et saate neid kasutada mistahes raamistik.
Mõned esialgsed asjad
Veebikomponendid on suurepärased, kuid praegu tuleb meeles pidada mõningaid väikesi tõrkeid.
Reageerima
Ütlesin, et need töötavad mis tahes JavaScripti raamistikus, kuid nagu ma olen varem kirjutanud, on Reacti veebikomponentide tugi praegu vaene. Selle lahendamiseks Kingapael tegelikult loodud ümbrised just Reacti jaoks.
Teine võimalus, mis mulle isiklikult meeldib, on luua õhuke Reacti komponent, mis aktsepteerib veebikomponendi sildinime ja kõiki selle atribuute ja omadusi ning teeb seejärel musta töö Reacti puuduste käsitlemisel. Rääkisin sellest variandist eelmises postituses. Mulle meeldib see lahendus, sest see on mõeldud kustutamiseks. Veebikomponendi koostalitlusvõime probleem on praegu parandatud Reacti eksperimentaalses harus, nii et kui see on tarnitud, saab teie kasutatavat õhukest veebikomponendi koostalitlusvõimelist komponenti otsida ja eemaldada, jättes teile veebikomponentide otsese kasutamise ilma Reacti ümbristeta.
Serveripoolne renderdus (SSR)
Ka SSR-i toetus on selle kirjutamise ajal kehv. Teoreetiliselt on midagi nn Deklaratiivne vari-DOM (DSD), mis võimaldaks SSR-i. Kuid brauseri tugi on minimaalne ja DSD seda tegelikult nõuab serveri tugi õigesti töötama, mis tähendab järgmine, Remix, või mida iganes sa serveris kasutad, peab saama mõneks erikäsitluseks.
Sellegipoolest on veebikomponentide hankimiseks muid viise lihtsalt töötage
veebirakendusega, mis on SSR-iga varustatud järgmisega. Lühiversioon on see, et teie veebikomponente registreerivad skriptid peavad enne märgistuse sõelumist töötama blokeerivas skriptis. Aga see on juba teise postituse teema.
Muidugi, kui ehitate mis tahes kliendi pakutavat SPA-d, pole see probleem. Sellega me selles postituses töötame.
Alustame
Kuna ma tahan, et see postitus keskenduks kingapaelale ja selle veebikomponendi olemusele, kasutan seda Sihvakas kõige jaoks. Ma hakkan ka seda kasutama Stackblitzi projekt demonstreerimiseks. Ehitame selle demo koos, samm-sammult, kuid avage see REPL igal ajal, et näha lõpptulemust.
Näitan teile, kuidas kasutada kingapaelu ja mis veelgi olulisem, kuidas seda kohandada. Me räägime Vari DOM-id ja milliseid stiile nad välismaailma eest blokeerivad (nagu ka milliseid mitte). Räägime ka sellest ::part CSS-i valija – mis võib olla teile täiesti uus – ja me isegi näeme, kuidas Shoelace võimaldab meil selle erinevaid animatsioone alistada ja kohandada.
Kui pärast selle postituse lugemist leiate, et kingapael meeldib teile ja soovite seda Reacti projektis proovida, on minu nõuanne kasutada ümbris nagu sissejuhatuses mainisin. See võimaldab teil kasutada mis tahes Shoelace'i komponente ja selle saab täielikult eemaldada, kui React saadab juba olemasolevad veebikomponendi parandused (otsige seda versioonist 19).
Kingapaela tutvustamine
Kingapael on üsna üksikasjalik paigaldusjuhised. Kõige lihtsamal juhul saate prügikasti visata ja sildid oma HTML-dokumendisse ja ongi kõik. Tõenäoliselt soovite iga tootmisrakenduse puhul importida valikuliselt ainult seda, mida soovite, ja selle kohta on ka juhiseid.
Kui Shoelace on installitud, loome osa sisu renderdamiseks Svelte'i komponendi ja seejärel läbime selle täielikuks kohandamiseks vajalikud toimingud. Et valida midagi üsna mittetriviaalset, kasutasin vahekaarte ja dialoogi (mida tavaliselt nimetatakse modaalseks) komponentidega. Siin on mõned märgid võetud suures osas dokumentidest:
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!
See annab kenad stiiliga vahelehed. Aktiivse vahekaardi allakriipsutus animeerib isegi kenasti ja libiseb ühelt aktiivselt vahelehelt teisele.
Ma ei raiska teie aega jooksmisele iga tolli API-de kaudu, mis on Shoelace'i veebisaidil juba hästi dokumenteeritud. Selle asemel uurime, kuidas nende veebikomponentidega kõige paremini suhelda ja neid täielikult kohandada.
API-ga suhtlemine: meetodid ja sündmused
Veebikomponendi helistamismeetodid ja sündmuste tellimine võivad veidi erineda tavapärasest valitud raamistikust, kuid see pole liiga keeruline. Vaatame, kuidas.
Tabs
Vahelehtede komponent () on show meetod, mis näitab käsitsi konkreetset vahekaarti. Selle kutsumiseks peame saama juurdepääsu oma vahekaartide aluseks olevale DOM-i elemendile. Sveltes tähendab see kasutamist bind:this. Reactis oleks see a ref. Ja nii edasi. Kuna me kasutame Svelte'i, siis deklareerime meie jaoks muutuja tabs näide:
let tabs;
… ja siduge see:
Nüüd saame sellele helistamiseks lisada nupu:
See on sama idee ürituste jaoks. Seal on sl-tab-show sündmus mis käivitub uue vahekaardi kuvamisel. Me võiksime kasutada addEventListener meie tabs muutuja või saame kasutada Svelte'i on:event-name otsetee.
console.log(e)}>See töötab ja logib sündmuste objektid erinevate vahekaartide kuvamisel.
Tavaliselt renderdame vahekaardid ja laseme kasutajal nende vahel klõpsata, nii et see töö pole tavaliselt isegi vajalik, kuid see on olemas, kui seda vajate. Nüüd muudame dialoogikomponendi interaktiivseks.
dialoog
Dialoogi komponent () võtab an open prop, mis kontrollib, kas dialoog on… avatud. Deklareerime seda meie Svelte'i komponendis:
let tabs;
let open = false;
Samuti on sellel sl-hide sündmus, kui dialoog on peidetud. Lähme omast mööda open toetada ja siduda hide sündmus, et saaksime selle lähtestada, kui kasutaja klõpsab dialoogi sulgemiseks väljaspool dialoogi sisu. Ja lisame sellele sulgemisnupule klikitöötleja, et määrata meie open toetada false, mis sulgeks ka dialoogi.
open = false}>
Hello World!
Lõpuks ühendame avatud dialoogi nupu:
Ja see ongi. Komponentide teegi API-ga suhtlemine on enam-vähem lihtne. Kui see postitus oleks kõik, oleks see üsna igav.
Kuid kingapael, mis on ehitatud veebikomponentidega, tähendab, et mõned asjad, eriti stiilid, töötavad veidi teisiti, kui oleme harjunud.
Kohandage kõiki stiile!
Selle kirjutamise seisuga on Shoelace endiselt beetaversioonis ja looja kaalub mõne vaikestiili muutmist, võib-olla isegi mõne vaikelaadi täielikku eemaldamist, et need ei alistaks enam teie hostrakenduse stiile. Käsitlused, mida me käsitleme, on asjakohased mõlemal juhul, kuid ärge olge üllatunud, kui mõned kingapaela eripärad, mida mainin, on selle kasutamisel erinevad.
Nii kenad kui ka Shoelace'i vaikestiilid on, võib meie veebirakenduses olla oma kujundus ja me tahame, et meie UX-i komponendid sobiksid. Vaatame, kuidas me seda veebikomponentide maailmas teeksime.
Tegelikult me ei proovigi parandama midagi. Kingapaela looja on palju parem disainer, kui ma kunagi olla saan. Selle asemel vaatame lihtsalt, kuidas seda teha muutma asju, et saaksite kohaneda oma veebirakendustega.
Shadow DOMide kiire tutvustus
Heitke pilk ühele nendest vahelehtede päistest oma DevToolsis; see peaks välja nägema umbes selline:
Meie vahekaardi element on loonud a div konteiner a .tab ja .tab--active klass ja a tabindex, kuvades samal ajal ka sellele vahelehele sisestatud teksti. Kuid pange tähele, et see asub a sees varjujuur. See võimaldab veebikomponentide autoritel lisada veebikomponendile oma märgistuse, pakkudes samal ajal ka sisu jaoks kohta we pakkuda. Pange tähele element? Põhimõtteliselt tähendab see "pange kasutaja esitatud sisu vahel veebikomponendi sildid siin. "
Seega komponent loob varjujuure, lisab sellele sisu, et renderdaks kenasti kujundatud vahelehe päis koos kohahoidjaga (), mis muudab meie sisu sisse.
Kapseldatud stiilid
Üks klassikalisi, masendavamaid probleeme veebiarenduses on alati olnud stiilid CSS kohtadesse, kuhu me neid ei taha. Võite muretseda, et meie rakenduse mis tahes stiilireeglid, mis täpsustavad midagi sarnast div.tab segaks neid vahekaarte. Selgub, et see pole probleem; varjujuured kapseldavad stiile. Väljastpoolt varjujuurt pärit stiilid ei mõjuta varjujuure sisemust (mõnede eranditega, millest me räägime) ja vastupidi.
Erandiks on päritavad stiilid. Loomulikult ei pea te taotlema a font-family stiil teie veebirakenduse iga elemendi jaoks. Selle asemel saate määrata oma font-family üks kord, edasi :root or html ja las see pärida kõikjal selle all. See pärand läbistab tegelikult ka varjujuure.
CSS-i kohandatud atribuudid (mida sageli nimetatakse "css-muutujateks") on seotud erand. Varjujuur suudab absoluutselt lugeda CSS-i atribuuti, mis on määratletud väljaspool varjujuurt; see muutub hetkega aktuaalseks.
. ::part valija
Kuidas on lood selle stiiliga ei pärida. Mis siis, kui tahame midagi sarnast kohandada cursor, mis ei päri, millelegi varjujuure sees. Kas meil ei vea? Tuleb välja, et me ei ole. Vaadake veel kord ülaltoodud tabelduselemendi pilti ja selle varjujuurt. Pange tähele part atribuut peal div? See võimaldab teil seda elementi sihtida ja stiilida väljastpoolt varjujuurt, kasutades ::part valija. Vaatame veidi näidet.
Kingapaelte stiilide ülekaal
Vaatame kõiki neid lähenemisviise tegevuses. Praeguse seisuga, palju kingapaela stiilid, sealhulgas fondid, saavad vaikeväärtused CSS-i kohandatud atribuutidest. Nende fontide joondamiseks oma rakenduse stiilidega alistage kõnealused kohandatud rekvisiidid. Vaata dokumendid Teabe saamiseks selle kohta, milliseid CSS-i muutujaid Shoelace kasutab, või saate lihtsalt vaadata DevToolsi mis tahes elemendi stiile.
Stiilide pärimine varjujuure kaudu
avage app.css failil src kataloogi StackBlitzi projekt. Aasta :root allosas, peaksite nägema a letter-spacing: normal; deklaratsiooni. Alates letter-spacing atribuut on päritav, proovige määrata uus väärtus, näiteks 2px. Salvestamisel kohandatakse kogu sisu, sealhulgas varjujuures määratletud vahelehe päised, vastavalt.
Kingapaela CSS-i muutujate ülekirjutamine
. komponent loeb an --indicator-color CSS-i kohandatud atribuut aktiivse vahekaardi allajoonimiseks. Saame selle mõne põhilise CSS-i abil alistada:
sl-tab-group {
--indicator-color: green;
}Ja nii on meil nüüd roheline indikaator!
Osade küsimine
Praegu kasutatavas Kingapaela versioonis (2.0.0-beta.83) on igal mittekeelatud vahekaardil pointer kursor. Muudame selle aktiivse (valitud) vahekaardi vaikekursoriks. Me juba nägime, et element lisab a part="base" atribuut vahekaardi päise konteineris. Samuti saab praegu valitud vahekaart active atribuut. Kasutame aktiivse vahekaardi sihtimiseks ja kursori muutmiseks neid fakte.
sl-tab[active]::part(base) {
cursor: default;
}Ja see ongi!
Animatsioonide kohandamine
Kirsiks metafoorilisel tordil vaatame, kuidas Shoelace võimaldab meil animatsioone kohandada. Kingapael kasutab Veebianimatsioonide APIja paljastab a setDefaultAnimation API, et juhtida, kuidas erinevad elemendid oma erinevaid interaktsioone animeerivad. Täpsemat teavet vaadake dokumentidest, kuid näiteks siin on see, kuidas saate muuta Shoelace'i dialoogi vaikeanimatsiooni väljapoole laienevast ja sissepoole kahanevast, et animeerida selle asemel ülevalt sisse ja peitmise ajal rippmenüüsse.
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)" },
});See kood on selles App.svelte faili. Kommenteerige seda, et näha originaalset vaikeanimatsiooni.
Pakke kuni
Shoelace on uskumatult ambitsioonikas komponentide kogu, mis on üles ehitatud veebikomponentidega. Kuna veebikomponendid on raamistikust sõltumatud, saab neid kasutada mis tahes projektis, mis tahes raamistikuga. Kuna uued raamistikud on hakanud välja tulema nii hämmastavate jõudlusomaduste kui ka kasutuslihtsusega, pole kunagi olnud nii veenvam võimalus kasutada kvaliteetseid kasutajakogemuse vidinaid, mis ei ole seotud ühegi raamistikuga.
