Tämä on postaus aiheesta Kengännauha, komponenttikirjasto, jonka tekijä on Cory LaViska, mutta käänteellä. Se määrittelee kaikki tavalliset UX-komponentit: välilehdet, modaalit, haitarit, automaattiset täydennykset ja paljon, paljon enemmän. Ne näyttävät kauniilta pakkauksesta otettuna, ovat saatavilla ja täysin muokattavissa. Mutta sen sijaan, että luotaisiin nämä komponentit Reactissa, Solidissa tai Sveltessä jne., se luo ne käyttämällä Web-komponentit; tämä tarkoittaa, että voit käyttää niitä Kaikki puitteissa.
Joitakin alustavia asioita
Verkkokomponentit ovat mahtavia, mutta tällä hetkellä on muutamia pieniä puutteita, jotka on huomioitava.
suhtautua
Sanoin, että ne toimivat missä tahansa JavaScript-kehyksessä, mutta kuten olen aiemmin kirjoittanut, Reactin verkkokomponenttien tuki on tällä hetkellä köyhä. Tämän ratkaisemiseksi kengännauha itse asiassa luotuja kääreitä vain Reactille.
Toinen vaihtoehto, josta pidän henkilökohtaisesti, on luoda ohut React-komponentti, joka hyväksyy verkkokomponentin tunnisteen nimen ja kaikki sen attribuutit ja ominaisuudet ja hoitaa sitten Reactin puutteet. Puhuin tästä vaihtoehdosta edellisessä virassa. Pidän tästä ratkaisusta, koska se on suunniteltu poistettavaksi. Verkkokomponenttien yhteentoimivuusongelma on tällä hetkellä korjattu Reactin kokeellisessa haarassa, joten kun se on toimitettu, kaikki käyttämäsi ohuet verkkokomponenttien yhteentoimivat komponentit voidaan etsiä ja poistaa, jolloin voit käyttää verkkokomponentteja suoraan ilman React-kääreitä.
Palvelinpuolen renderointi (SSR)
SSR:n tuki on myös heikkoa tätä kirjoitettaessa. Teoriassa on jotain ns Declarative Shadow DOM (DSD), joka mahdollistaisi SSR:n. Mutta selaimen tuki on minimaalista, ja joka tapauksessa DSD todella vaatii palvelimen tuki toimimaan oikein, mikä tarkoittaa seuraava, Remix, tai mitä tahansa, mitä satut käyttämään palvelimella, täytyy pystyä käsittelemään jotain erityistä.
On kuitenkin olemassa muita tapoja saada Web-komponentit vain työtä
verkkosovelluksella, joka on SSR-käsitelty jollakin tavalla, kuten Next. Lyhyt versio on, että Web-komponentteja rekisteröivien komentosarjojen on suoritettava estävä komentosarja ennen kuin merkintäsi jäsennetään. Mutta se on toisen postauksen aihe.
Tietenkin, jos rakennat minkäänlaista asiakkaan luomaa SPA:ta, tämä ei tietenkään ole ongelma. Tämän kanssa työskentelemme tässä viestissä.
Aloitetaan
Koska haluan tämän viestin keskittyvän kengännauhaan ja sen verkkokomponenttiluonteeseen, käytän sitä Hoikka kaikesta. Aion myös käyttää tätä Stackblitz projekti esittelyä varten. Rakennamme tämän demon yhdessä, vaihe vaiheelta, mutta voit vapaasti avata REPL:n milloin tahansa nähdäksesi lopputuloksen.
Näytän sinulle, kuinka kengännauhaa käytetään, ja mikä tärkeintä, kuinka sitä muokataan. Puhumme asiasta Shadow DOM:t ja mitkä tyylit ne estävät ulkomaailmasta (ja mitkä eivät). Puhumme myös mm ::part CSS-valitsin – joka voi olla sinulle täysin uusi – ja näemme jopa, kuinka Shoelace antaa meille mahdollisuuden ohittaa ja mukauttaa sen erilaisia animaatioita.
Jos huomaat, että pidät Shoelacesta tämän viestin luettuasi ja haluat kokeilla sitä React-projektissa, neuvoni on käyttää kääre kuten johdannossa mainitsin. Näin voit käyttää mitä tahansa Shoelacen osia, ja se voidaan poistaa kokonaan, kun React toimittaa jo olemassa olevat verkkokomponentin korjaukset (etsi versiosta 19).
Esittelyssä kengännauha
Kengännauha on melko yksityiskohtainen asennusohjeet. Yksinkertaisimmillaan voit tyhjentää ja tunnisteet HTML-dokumenttiisi, ja siinä se. Kaikille tuotantosovelluksille kannattaa kuitenkin todennäköisesti tuoda valikoivasti vain haluamasi, ja siihen on myös ohjeita.
Kun Shoelace on asennettu, luodaan Svelte-komponentti sisällön renderöimiseksi ja sen jälkeen mukautetaan se kokonaan. Valitakseni jotain melko ei-triviaalia, valitsin välilehdet ja valintaikkunan (jota kutsutaan yleisesti modaaliksi) komponenttien kanssa. Tässä vähän merkintää otettu suurelta osin asiakirjoista:
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!
Tämä tuottaa hienoja, tyylikkäitä välilehtiä. Aktiivisen välilehden alleviivaus jopa animoituu kauniisti ja liukuu aktiivisesta välilehdestä toiseen.
En tuhlaa aikaasi käymään läpi jokaisen tuuman API-liittymiä, jotka on jo hyvin dokumentoitu Shoelace-verkkosivustolla. Sen sijaan tarkastellaan, kuinka parhaiten vuorovaikuttaa näiden verkkokomponenttien kanssa, ja mukautetaan niitä täysin.
Vuorovaikutus API:n kanssa: menetelmät ja tapahtumat
Verkkokomponentin kutsumenetelmät ja tapahtumien tilaaminen voivat olla hieman erilaisia kuin mihin olet tottunut valitsemasi normaalin kehyksen kanssa, mutta se ei ole liian monimutkaista. Katsotaanpa miten.
Välilehdet
Välilehdet-komponentti () on show menetelmä, joka näyttää tietyn välilehden manuaalisesti. Jotta voimme kutsua tätä, meidän on päästävä käsiksi välilehtidemme taustalla olevaan DOM-elementtiin. Sveltessä se tarkoittaa käyttöä bind:this. Reactissa se olisi a ref. Ja niin edelleen. Koska käytämme Svelteä, ilmoitamme muuttujamme tabs ilmentymä:
let tabs;
…ja sitoa se:
Nyt voimme lisätä painikkeen kutsumaan sitä:
Se on sama idea tapahtumille. Siellä sl-tab-show tapahtumaa varten joka käynnistyy, kun uusi välilehti näytetään. Voisimme käyttää addEventListener meidän tabs muuttuja, tai voimme käyttää Svelten on:event-name pikakuvake.
console.log(e)}>Se toimii ja kirjaa tapahtumaobjektit lokiin, kun näytät eri välilehtiä.
Yleensä hahmonnamme välilehdet ja annamme käyttäjän klikata niiden välissä, joten tämä työ ei yleensä ole edes välttämätöntä, mutta se on olemassa, jos tarvitset sitä. Tehdään nyt dialogikomponentti interaktiiviseksi.
Yhteydenpito
Dialogikomponentti () vie open prop, joka ohjaa onko valintaikkuna… auki. Ilmoitetaan se Svelte-komponentissamme:
let tabs;
let open = false;
Siinä on myös sl-hide tapahtuma, kun valintaikkuna on piilotettu. Ohitetaan meidän open tuki ja sitoa hide tapahtuma, jotta voimme nollata sen, kun käyttäjä sulkee sen napsauttamalla valintaikkunan sisällön ulkopuolella. Ja lisätään napsautusten käsittelijä tuohon sulkemispainikkeeseen määrittääksemme open tukea false, joka myös sulkee valintaikkunan.
open = false}>
Hello World!
Lopuksi kytketään avoimen valintaikkunan painike:
Ja siinä se. Vuorovaikutus komponenttikirjaston API:n kanssa on enemmän tai vähemmän yksinkertaista. Jos kaikki tämä postaus tekisi, se olisi aika tylsää.
Mutta kengännauha – joka on rakennettu Web Componentsilla – tarkoittaa, että jotkin asiat, erityisesti tyylit, toimivat hieman eri tavalla kuin olemme tottuneet.
Mukauta kaikki tyylit!
Tätä kirjoitettaessa Shoelace on edelleen beta-vaiheessa, ja luoja harkitsee joidenkin oletustyylien muuttamista, mahdollisesti jopa joidenkin oletusasetusten poistamista kokonaan, jotta ne eivät enää ohita isäntäsovelluksesi tyylejä. Käsittelemämme käsitteet ovat olennaisia kummallakin tavalla, mutta älä ihmettele, jos jotkin mainitsemistani kengännauhan yksityiskohdista ovat erilaisia, kun käytät sitä.
Vaikka Shoelacen oletustyylit ovatkin mukavia, meillä saattaa olla omat mallimme verkkosovelluksessamme, ja haluamme, että UX-komponenttimme sopivat yhteen. Katsotaanpa, miten toimisimme Web Components -maailmassa.
Emme todellakaan yritä parantaa mitä tahansa. Kengännauhan luoja on paljon parempi suunnittelija kuin minä koskaan tulen olemaan. Sen sijaan katsomme vain, miten se tehdään muuttaa asioita, jotta voit mukautua omiin verkkosovelluksiisi.
Pikakierros Shadow DOM:eista
Kurkista yhteen näistä välilehtien otsikoista DevToolsissa. sen pitäisi näyttää jotakuinkin tältä:
Välilehtielementtimme on luonut a div säiliö, jossa on a .tab ja .tab--active luokka ja a tabindex, ja näyttää samalla välilehdelle kirjoittamamme tekstin. Mutta huomaa, että se istuu a:n sisällä varjojuuri. Tämän ansiosta Web-komponenttien tekijät voivat lisätä omia merkintöjä Web-komponenttiin ja tarjota samalla paikan sisällölle we tarjota. Huomaa, elementti? Tämä tarkoittaa pohjimmiltaan "laita mitä tahansa sisältöä, jonka käyttäjä tuottaa välillä Web Component -tunnisteet tätä"
Joten komponentti luo varjojuuren, lisää siihen sisältöä näyttääkseen kauniisti muotoillun välilehden otsikon sekä paikkamerkin (), joka tuo sisältömme sisälle.
Kapseloidut tyylit
Yksi klassisista, turhauttavimmista ongelmista verkkokehityksessä on aina ollut tyylit CSS paikkoihin, joihin emme halua niitä. Saatat olla huolissasi siitä, että kaikki sovelluksemme tyylisäännöt määrittelevät jotain vastaavaa div.tab häiritsisi näitä välilehtiä. Osoittautuu, että tämä ei ole ongelma; varjojuuret kapseloivat tyylejä. Varjojuuren ulkopuolelta tulevat tyylit eivät vaikuta varjojuuren sisäpuolelle (joitakin poikkeuksia lukuun ottamatta, joista puhumme) ja päinvastoin.
Poikkeuksena tähän ovat perinnölliset tyylit. Sinun ei tietenkään tarvitse hakea a font-family tyyli jokaiselle verkkosovelluksesi elementille. Sen sijaan voit määrittää omasi font-family kerran, päällä :root or html ja periä se kaikkialla sen alla. Tämä perintö itse asiassa lävistää myös varjojuuren.
CSS:n mukautetut ominaisuudet (kutsutaan usein "css-muuttujiksi") ovat asiaan liittyvä poikkeus. Varjojuuri voi ehdottomasti lukea CSS-ominaisuuden, joka on määritelty varjojuuren ulkopuolella; tästä tulee hetkessä ajankohtainen.
- ::part valitsin
Entäs ne tyylit älä periä. Entä jos haluamme mukauttaa jotain vastaavaa cursor, joka ei peri, johonkin varjojuuren sisällä. Onko meillä huono tuuri? Osoittautuu, että emme ole. Katso vielä kerran yllä olevaa välilehtielementin kuvaa ja sen varjojuurta. Huomaa, part attribuutti div? Tämän avulla voit kohdistaa ja tyylittää kyseisen elementin varjojuuren ulkopuolelta käyttämällä ::part valitsin. Käymme läpi esimerkki on hieman.
Ylivoimaiset kengännauhatyylit
Katsotaanpa jokainen näistä lähestymistavoista toiminnassa. Tästä lähtien, paljon kengännauhatyylit, mukaan lukien kirjasimet, saavat oletusarvot mukautetuista CSS-ominaisuuksista. Kohdista nämä fontit sovelluksesi tyylien kanssa ohittamalla kyseiset mukautetut rekvisiitta. Katso asiakirjat saadaksesi tietoa siitä, mitä CSS-muuttujia Shoelace käyttää, tai voit yksinkertaisesti tarkastella tyylejä missä tahansa DevToolsin elementissä.
Tyylien periminen varjojuuren kautta
Avaa app.css Tiedosto src hakemistosta StackBlitz-projekti. Vuonna :root alareunassa, sinun pitäisi nähdä a letter-spacing: normal; ilmoitus. Koska letter-spacing ominaisuus on periytyvä, yritä asettaa uusi arvo, esim 2px. Tallennettaessa kaikki sisältö, mukaan lukien varjojuuressa määritetyt välilehtien otsikot, mukautuu vastaavasti.
Kengännauhan CSS-muuttujien korvaaminen
- komponentti lukee an --indicator-color Muokattu CSS-ominaisuus aktiivisen välilehden alleviivaukselle. Voimme ohittaa tämän jollain perus-CSS:llä:
sl-tab-group {
--indicator-color: green;
}Ja juuri niin, meillä on nyt vihreä indikaattori!
Osien kyseleminen
Tällä hetkellä käyttämässäni Shoelace-versiossa (2.0.0-beta.83) kaikilla ei-käytöstä olevilla välilehdillä on pointer kohdistin. Muutetaan se aktiivisen (valitun) välilehden oletuskohdistimeksi. Näimme jo, että elementti lisää a part="base" attribuutti välilehden otsikon säilössä. Myös tällä hetkellä valittu välilehti vastaanottaa active attribuutti. Kohdistetaan aktiivinen välilehti näiden tietojen avulla ja vaihdetaan kohdistinta:
sl-tab[active]::part(base) {
cursor: default;
}Ja se on se!
Animaatioiden mukauttaminen
Kuvituksena metaforisen kakun päällä katsotaanpa, kuinka Shoelace antaa meille mahdollisuuden muokata animaatioita. Kengännauha käyttää Web Animations API, ja paljastaa a setDefaultAnimation API hallita, kuinka eri elementit animoivat eri vuorovaikutustaan. Katso tarkemmat tiedot asiakirjoista, mutta esimerkkinä tässä, kuinka voit muuttaa Shoelacen oletusvalintaikkunan animaatiota ulospäin laajenevasta ja sisäänpäin kutistuvasta animaatiosta sen sijaan, että se animoituu ylhäältä ja pudotetaan alas piilossa.
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)" },
});Se koodi on siinä App.svelte tiedosto. Kommentoi se nähdäksesi alkuperäisen oletusanimaation.
Käärimistä
Shoelace on uskomattoman kunnianhimoinen komponenttikirjasto, joka on rakennettu Web Componentsilla. Koska Web-komponentit ovat puitteista riippumattomia, niitä voidaan käyttää missä tahansa projektissa missä tahansa kehyksessä. Uusien kehysten alkaessa ilmestyä sekä uskomattomilla suorituskykyominaisuuksilla että helppokäyttöisyydellä, kyky käyttää laadukkaita käyttökokemuksen widgetejä, jotka eivät ole sidottu mihinkään kehyksiin, ei ole koskaan ollut houkuttelevampaa.
