Predstavljamo Shoelace, od ogrodja neodvisno knjižnico UX, ki temelji na komponentah

To je objava o vezalk, knjižnica komponent avtorja Cory LaViska, vendar s pridihom. Definira vse vaše standardne komponente UX: zavihke, modale, harmonike, samodokončanja in veliko, veliko več. Izgledajo čudovito takoj po izdelavi, so dostopni in popolnoma prilagodljivi. Toda namesto da bi te komponente ustvaril v Reactu, Solidu ali Svelteju itd., jih ustvari z Spletne komponente; to pomeni, da jih lahko uporabljate z kaj okvir.

Nekaj ​​predhodnih stvari

Spletne komponente so odlične, vendar je trenutno treba upoštevati nekaj majhnih težav.

Reagirajo

Rekel sem, da delujejo v katerem koli ogrodju JavaScript, a kot sem že zapisal, je Reactova podpora za spletne komponente trenutno revni. Za obravnavo tega, Shoelace pravzaprav ustvarjeni ovoji samo za React.

Druga možnost, ki je meni osebno všeč, je ustvariti tanko komponento React, ki sprejme ime oznake spletne komponente ter vse njene atribute in lastnosti, nato pa opravi umazano delo obravnave Reactovih pomanjkljivosti. Govoril sem o tej možnosti v prejšnji objavi. Ta rešitev mi je všeč, ker je zasnovana za brisanje. Težava z interoperabilnostjo spletne komponente je trenutno odpravljena v Reactovi eksperimentalni veji, tako da, ko je poslana, lahko katero koli tanko komponento, ki je interoperabilna s spletno komponento, ki jo uporabljate, poiščete in odstranite, tako da imate neposredno uporabo spletne komponente, brez ovojov React.

Upodabljanje na strani strežnika (SSR)

Podpora za SSR je tudi v času tega pisanja slaba. V teoriji se nekaj imenuje Deklarativna senca DOM (DSD), ki bi omogočal SSR. Toda podpora brskalnika je minimalna in v vsakem primeru DSD dejansko zahteva podpora strežniku pravilno delati, kar pomeni Naslednji, Remix, ali karkoli že uporabljate na strežniku, bo moral postati sposoben posebnega ravnanja.

Kljub temu obstajajo drugi načini, kako spletne komponente doseči samo dela s spletno aplikacijo, ki je SSR opremljena z nečim, kot je Next. Kratka različica je, da se morajo skripti, ki registrirajo vaše spletne komponente, zagnati v blokirnem skriptu, preden je vaša oznaka razčlenjena. Ampak to je tema za drugo objavo.

Seveda, če gradite kakršen koli SPA, ki ga upodobi stranka, to ni problem. To je tisto, s čimer bomo delali v tej objavi.

Začnimo

Ker želim, da se ta objava osredotoči na vezalko in njeno naravo spletne komponente, bom uporabil Svetel za vse. Tudi jaz bom to uporabljal Projekt Stackblitz za demonstracijo. To predstavitev bomo zgradili skupaj, korak za korakom, vendar lahko ta REPL kadar koli odprete in si ogledate končni rezultat.

Pokazal vam bom, kako uporabljati vezalko, in kar je še pomembneje, kako jo prilagoditi. Pogovarjali se bomo o Senčni DOM-i in katere sloge blokirajo pred zunanjim svetom (pa tudi katere ne). Govorili bomo tudi o ::part Izbirnik CSS — ki je za vas morda popolnoma nov — in videli bomo celo, kako nam Shoelace omogoča preglasitev in prilagajanje njegovih različnih animacij.

Če po branju te objave ugotovite, da vam je Shoelace všeč in ga želite preizkusiti v projektu React, vam svetujem, da uporabite ovitek kot sem omenil v uvodu. To vam bo omogočilo uporabo katere koli komponente Shoelace in jo lahko v celoti odstranite, ko React pošlje popravke spletne komponente, ki jih že ima (poiščite to v različici 19).

Predstavljamo vam vezalke

Vezalke so dokaj podrobne navodila za namestitev. Najenostavneje lahko zavrnete in oznake v vaš dokument HTML in to je to. Za katero koli produkcijsko aplikacijo pa boste verjetno želeli selektivno uvoziti le tisto, kar želite, in tudi za to obstajajo navodila.

Ko je Shoelace nameščen, ustvarimo komponento Svelte za upodabljanje vsebine, nato pa pojdimo skozi korake, da jo popolnoma prilagodimo. Da bi izbral nekaj dokaj netrivialnega, sem uporabil komponente zavihkov in pogovornega okna (običajno imenovane modalne). Tukaj je nekaj oznak vzeto večinoma iz dokumentov:

  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!
  Close




Open Dialog

To upodobi nekaj lepih, oblikovanih zavihkov. Podčrtaj na aktivnem zavihku celo lepo animira in drsi z enega aktivnega zavihka na drugega.

Ne bom izgubljal vašega časa s pregledovanjem vsakega centimetra API-jev, ki so že dobro dokumentirani na spletnem mestu Shoelace. Namesto tega si poglejmo, kako najbolje komunicirati s temi spletnimi komponentami in jih popolnoma prilagoditi.

Interakcija z API-jem: metode in dogodki

Metode klicanja in naročanja na dogodke v spletni komponenti so lahko nekoliko drugačne od tistih, ki ste jih vajeni pri svojem običajnem izbranem okviru, vendar niso preveč zapletene. Poglejmo, kako.

Zavihki

Komponenta zavihkov () ima show Metoda, ki ročno prikaže določen zavihek. Da bi to poklicali, moramo pridobiti dostop do osnovnega elementa DOM naših zavihkov. V jeziku Svelte to pomeni uporabo bind:this. V Reactu bi bilo to a ref. In tako naprej. Ker uporabljamo Svelte, deklarirajmo spremenljivko za naš tabs primer:

  let tabs;

... in ga zaveži:

Zdaj lahko dodamo gumb za klic:

 tabs.show("custom")}>Show custom

Ista ideja je za dogodke. Tam je sl-tab-show dogodek ki se sproži, ko je prikazan nov zavihek. Lahko bi uporabili addEventListener na našem tabs spremenljivko ali pa uporabimo Sveltejevo on:event-name bližnjico.

 console.log(e)}>

To deluje in beleži predmete dogodkov, ko prikazujete različne zavihke.

Običajno upodabljamo zavihke in pustimo uporabniku, da klika med njimi, tako da to delo običajno niti ni potrebno, vendar je tam, če ga potrebujete. Zdaj pa naredimo komponento pogovornega okna interaktivno.

Dialog

Komponenta pogovornega okna () vzame open prop, ki nadzoruje, ali je pogovorno okno ... odprto. Deklarirajmo ga v naši komponenti Svelte:

  let tabs;
  let open = false;

Prav tako ima sl-hide dogodek, ko je pogovorno okno skrito. Gremo mimo našega open opor in se vežejo na hide tako da ga lahko ponastavimo, ko uporabnik klikne zunaj vsebine pogovornega okna, da ga zapre. In temu gumbu za zapiranje dodamo upravljalnik klikov, da nastavimo našo open podpirati false, kar bi tudi zaprlo pogovorno okno.

 open = false}>
  Hello World!
   open = false}>Close

Nazadnje povežimo naš gumb za odprto pogovorno okno:

 (open = true)}>Open Dialog

In to je to. Interakcija z API-jem knjižnice komponent je bolj ali manj preprosta. Če bi bilo to vse, kar ta objava počne, bi bilo precej dolgočasno.

Toda Shoelace – izdelan s spletnimi komponentami – pomeni, da bodo nekatere stvari, zlasti slogi, delovale nekoliko drugače, kot smo morda vajeni.

Prilagodite vse sloge!

Od tega pisanja je Shoelace še vedno v beta različici in ustvarjalec razmišlja o spremembi nekaterih privzetih slogov, morda celo o odstranitvi nekaterih privzetih nastavitev, tako da ne bodo več preglasili slogov vaše gostiteljske aplikacije. Koncepti, ki jih bomo obravnavali, so pomembni v vsakem primeru, vendar ne bodite presenečeni, če bodo nekatere posebnosti vezalk, ki jih omenjam, drugačne, ko jih boste uporabili.

Ne glede na to, kako lepi so privzeti slogi Shoelace, imamo lahko v naši spletni aplikaciji lastne modele in želimo, da se naše komponente UX ujemajo. Poglejmo, kako bi se tega lotili v svetu spletnih komponent.

Pravzaprav ne bomo poskušali izboljšanje karkoli. Ustvarjalec Shoelace je veliko boljši oblikovalec, kot bom kdajkoli jaz. Namesto tega bomo samo pogledali, kako spremenite stvari, tako da se lahko prilagodite svojim spletnim aplikacijam.

Kratek ogled senčnih DOM-ov

Pokukajte v eno od teh glav zavihkov v orodjih za razvijalce; izgledati bi moralo nekako takole:

Naš element tab je ustvaril a div posoda z a .tab in .tab--active razred in a tabindex, hkrati pa prikaže besedilo, ki smo ga vnesli za ta zavihek. Toda opazite, da sedi znotraj a senčni koren. To omogoča avtorjem spletne komponente, da doda svojo lastno oznako spletni komponenti, hkrati pa zagotovi prostor za vsebino we zagotoviti. Upoštevajte element? To v bistvu pomeni »vstavite kakršno koli vsebino, ki jo je upodobil uporabnik med oznake spletne komponente tukaj«.

Torej komponenta ustvari senčni koren, mu doda nekaj vsebine, da upodobi lepo oblikovano glavo zavihka skupaj z ogrado (), ki upodablja našo vsebino v notranjosti.

Enkapsulirani slogi

Eden od klasičnih, bolj frustrirajočih problemov pri spletnem razvoju so bili vedno slogi kaskadno tja, kjer jih ne želimo. Morda vas skrbi, da kateri koli slog pravila v naši aplikaciji, ki določa nekaj podobnega div.tab bi motil te zavihke. Izkazalo se je, da to ni problem; senčne korenine zajemajo sloge. Slogi zunaj senčnega korena ne vplivajo na to, kar je znotraj senčnega korena (z nekaterimi izjemami, o katerih bomo govorili), in obratno.

Izjema so podedovani slogi. Seveda vam ni treba prijaviti a font-family slog za vsak element v vaši spletni aplikaciji. Namesto tega lahko določite svoje font-family enkrat, naprej :root or html in naj deduje povsod pod njim. Ta dediščina bo namreč prebodla tudi senčno korenino.

Lastnosti po meri CSS (pogosto imenovane »css spremenljivke«) so sorodna izjema. Senčni koren lahko absolutno prebere lastnost CSS, ki je definirana zunaj senčnega korena; to bo postalo relevantno v trenutku.

O ::part izbirnik

Kaj pa slogi, ki ne dedovati. Kaj pa, če želimo nekaj prilagoditi cursor, ki ne deduje, na nečem znotraj senčnega korena. Ali nimamo sreče? Izkazalo se je, da nismo. Ponovno si oglejte zgornjo sliko elementa zavihka in njegov senčni koren. Upoštevajte part atribut na div? To vam omogoča ciljanje in oblikovanje tega elementa zunaj senčnega korena z uporabo ::part izbirnik. Malo se bomo sprehodili skozi primer.

Prevladujoči slogi vezalk

Oglejmo si vsakega od teh pristopov v akciji. Od tega trenutka, veliko slogov vezalk, vključno s pisavami, prejmejo privzete vrednosti iz lastnosti po meri CSS. Če želite te pisave uskladiti s slogi vaše aplikacije, preglasite zadevne pripomočke po meri. glej dokumenti za informacije o tem, katere spremenljivke CSS uporablja Shoelace, lahko pa preprosto pregledate sloge v katerem koli danem elementu v DevTools.

Dedovanje slogov prek senčnega korena

odprite app.css datoteko v src imenik Projekt StackBlitz. v :root razdelku na dnu bi morali videti a letter-spacing: normal; izjava. Odkar je letter-spacing lastnost je podedljiva, poskusite nastaviti novo vrednost, npr 2px. Pri shranjevanju se bo vsa vsebina, vključno z glavami zavihkov, definiranimi v senčnem korenu, ustrezno prilagodila.

Prepisovanje spremenljivk CSS Shoelace

O komponenta se glasi an --indicator-color Lastnost po meri CSS za podčrtaj aktivnega zavihka. To lahko preglasimo z osnovnim CSS:

sl-tab-group {
  --indicator-color: green;
}

In ravno tako imamo zdaj zeleni indikator!

Poizvedovanje delov

V različici Shoelace, ki jo trenutno uporabljam (2.0.0-beta.83), ima vsak neonemogočen zavihek pointer kazalec. Spremenimo to v privzeti kazalec za aktivni (izbrani) zavihek. Videli smo že, da element doda a part="base" atribut na vsebniku za glavo zavihka. Prav tako trenutno izbrani zavihek prejme active atribut. Uporabimo ta dejstva, da ciljamo na aktivni zavihek in spremenimo kazalec:

sl-tab[active]::part(base) {
  cursor: default;
}

In to je to!

Prilagajanje animacij

Za nekaj metaforične torte si poglejmo, kako nam Shoelace omogoča prilagajanje animacij. Vezalka uporablja API za spletne animacije, in izpostavi a setDefaultAnimation API za nadzor nad tem, kako različni elementi animirajo svoje različne interakcije. Podrobnosti si oglejte v dokumentih, a kot primer lahko tukaj spremenite privzeto animacijo pogovornega okna Shoelace, da se ne razširi navzven in skrči navznoter, da se namesto tega animira z vrha in spušča navzdol, medtem ko se skriva.

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)" },
});

Ta koda je v App.svelte mapa. Komentirajte, če želite videti izvirno, privzeto animacijo.

Zavijanje

Shoelace je neverjetno ambiciozna knjižnica komponent, zgrajena s spletnimi komponentami. Ker so spletne komponente neodvisne od ogrodja, jih je mogoče uporabiti v katerem koli projektu s katerim koli ogrodjem. Ker so se začela pojavljati nova ogrodja z osupljivimi zmogljivostnimi lastnostmi in enostavnostjo uporabe, možnost uporabe kakovostnih gradnikov uporabniške izkušnje, ki niso vezani na nobeno ogrodje, še nikoli ni bila bolj prepričljiva.