Ez egy bejegyzés arról szól Cipőfűző, egy komponenskönyvtár által Cory LaViska, de egy csavarral. Meghatározza az összes szabványos UX összetevőt: tabulátorok, modálok, harmonikák, automatikus kiegészítések és sokkal, még sok más. Gyönyörűen néznek ki a dobozból, hozzáférhetőek és teljesen személyre szabhatók. De ahelyett, hogy ezeket az összetevőket React, Solid vagy Svelte stb. programban hozná létre, ezzel hozza létre őket Web összetevők; ez azt jelenti, hogy használhatja őket bármilyen keretet.
Néhány előzetes dolog
A webes összetevők nagyszerűek, de jelenleg van néhány apró hiányosság, amelyekkel tisztában kell lenni.
Reagál
Azt mondtam, hogy bármilyen JavaScript-keretrendszerben működnek, de ahogy korábban írtam, a React webes összetevők támogatása jelenleg szegény. Ennek megoldására Cipőfűző tulajdonképpen létrehozott burkolókat csak a React miatt.
Egy másik lehetőség, amit személy szerint szeretek, egy vékony React komponens létrehozása, amely elfogadja egy webkomponens címkenevét és annak összes attribútumait és tulajdonságait, majd elvégzi a React hiányosságainak kezelését. Erről a lehetőségről beszéltem egy korábbi bejegyzésben. Tetszik ez a megoldás, mert törlésre tervezték. A webkomponensek együttműködési problémája jelenleg a React kísérleti ágában van javítva, így a szállítás után bármely vékony, webkomponensekkel együttműködő komponens megkereshető és eltávolítható, így Ön közvetlenül használhatja a webkomponenseket, minden React burkoló nélkül.
Szerveroldali renderelés (SSR)
Az írás idején az SSR támogatottsága szintén gyenge. Elméletileg van valami ún Deklaratív árnyék DOM (DSD), amely lehetővé tenné az SSR-t. De a böngésző támogatása minimális, és mindenesetre a DSD-hez valóban szüksége van szerver támogatás helyesen dolgozni, ami azt jelenti Következő, Remix, vagy bármit, amit a szerveren használ, képessé kell válnia valamilyen speciális kezelésre.
Ennek ellenére vannak más módok is a webkomponensek eléréséhez csak munka
egy olyan webalkalmazással, amely SSR-el van ellátva olyasmivel, mint a Next. A rövid verzió az, hogy a webösszetevőket regisztráló szkripteknek egy blokkoló szkriptben kell futniuk a jelölés elemzése előtt. De ez egy másik bejegyzés témája.
Természetesen, ha bármilyen ügyfél által készített SPA-t épít, ez nem probléma. Ebben a bejegyzésben ezzel fogunk dolgozni.
Kezdjük
Mivel azt szeretném, hogy ez a bejegyzés a cipőfűzőre és annak webkomponens jellegére összpontosítson, használni fogom Karcsú mindenért. Én is ezt fogom használni Stackblitz projekt bemutatóra. Ezt a demót együtt, lépésről lépésre készítjük el, de nyugodtan nyissa meg a REPL-t bármikor, hogy megtekinthesse a végeredményt.
Megmutatom, hogyan kell használni a cipőfűzőt, és ami még fontosabb, hogyan szabhatod testre. Majd megbeszéljük Árnyék DOM-ok és mely stílusokat zárják el a külvilág elől (és melyeket nem). Beszélni fogunk arról is ::part CSS-választó – ami teljesen új lehet az Ön számára – és még azt is látni fogjuk, hogy a Shoeelace hogyan teszi lehetővé a különféle animációk felülbírálását és testreszabását.
Ha úgy találja, hogy tetszik a cipőfűző, miután elolvasta ezt a bejegyzést, és szeretné kipróbálni egy React projektben, azt tanácsolom, hogy egy csomagolóanyag ahogy a bevezetőben említettem. Ez lehetővé teszi a Shoelace bármely összetevőjének használatát, és teljesen eltávolítható, amint a React elküldi a már meglévő webkomponens-javításokat (keresse ezt a 19-es verzióban).
Bemutatkozik a cipőfűző
A cipőfűző meglehetősen részletes Telepítési útmutató. A legegyszerűbb esetben kidobhatod és a címkéket a HTML-dokumentumába, és ennyi. Valószínűleg azonban minden éles alkalmazáshoz csak azt szeretné szelektíven importálni, amit szeretne, és erre is vannak utasítások.
A cipőfűző telepítése után hozzunk létre egy Svelte komponenst bizonyos tartalom megjelenítéséhez, majd végezzük el a lépéseket a teljes testreszabáshoz. Ahhoz, hogy valami nem triviálist válasszak, a lapokat és a párbeszédablakot (amelyet általában modálisnak neveznek) használtam. Itt van egy kis jelölés nagyrészt a dokumentumokból vették át:
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!
Ez szép, stílusos lapokat eredményez. Az aktív lapon az aláhúzás is szépen animál, és egyik aktív lapról a másikra csúszik.
Nem vesztegetem az idejét a Shoelace webhelyen már jól dokumentált API-k minden hüvelyknyi átfutásával. Ehelyett nézzük meg, hogyan lehet a legjobban együttműködni ezekkel a webes összetevőkkel, és teljes mértékben testreszabni.
Interakció az API-val: módszerek és események
A webösszetevők hívási módszerei és az eseményekre való feliratkozás némileg eltérhet a szokásos keretrendszertől megszokottól, de nem túl bonyolult. Lássuk hogyan.
Lapok
A lapok összetevő () van egy show módszer, amely manuálisan jelenít meg egy adott lapot. Ennek meghívásához hozzá kell férnünk lapjaink mögöttes DOM-eleméhez. Svelte-ben ez azt jelenti, hogy használ bind:this. A Reactben ez lenne a ref. Stb. Mivel a Svelte-t használjuk, deklaráljunk egy változót a sajátunk számára tabs példa:
let tabs;
…és bekötni:
Most hozzáadhatunk egy gombot a híváshoz:
Ugyanez az ötlet a rendezvényekre. Van egy sl-tab-show esemény amely akkor aktiválódik, ha új lap jelenik meg. Használhatnánk addEventListener miénken tabs változót, vagy használhatjuk a Svelte-t on:event-name parancsikon.
console.log(e)}>Ez működik, és naplózza az eseményobjektumokat, amikor különböző lapokat jelenít meg.
Általában a tabulátorokat rendereljük, és hagyjuk, hogy a felhasználó kattintgasson közöttük, így általában nincs is szükség erre a munkára, de ott van, ha szüksége van rá. Most tegyük interaktívvá a párbeszédablakot.
párbeszéd
A párbeszéd komponens () vesz egy open prop, amely szabályozza, hogy a párbeszédpanel… nyitva legyen. Deklaráljuk a Svelte komponensünkben:
let tabs;
let open = false;
Van is egy sl-hide esemény, amikor a párbeszédpanel el van rejtve. Adjuk át a miénket open támasztja és köti a hide eseményt, így visszaállíthatjuk, amikor a felhasználó a párbeszédpanel tartalmán kívülre kattint a bezáráshoz. És adjunk hozzá egy kattintáskezelőt a bezárás gombhoz, hogy beállíthassuk open támaszt false, amely szintén bezárja a párbeszédpanelt.
open = false}>
Hello World!
Végül kapcsoljuk be a párbeszédpanel megnyitó gombját:
És ez az. A komponenskönyvtár API-jával való interakció többé-kevésbé egyszerű. Ha ez a bejegyzés csak ennyit tartalmazna, akkor elég unalmas lenne.
De a cipőfűző – amelyet webkomponensekkel építenek – azt jelenti, hogy bizonyos dolgok, különösen a stílusok, kicsit másképp fognak működni, mint azt megszokhattuk.
Szabja testre az összes stílust!
Jelen pillanatban a cipőfűző még béta állapotban van, és az alkotó néhány alapértelmezett stílus megváltoztatását fontolgatja, esetleg egyes alapértelmezett stílusok teljes eltávolítását, hogy azok többé ne írják felül a gazdagép alkalmazás stílusait. Az általunk tárgyalt fogalmak mindkét esetben relevánsak, de ne lepődj meg, ha a cipőfűző egyes jellemzői, amelyeket említettem, eltérnek a használat során.
Bármilyen szépek is a Shoelace alapértelmezett stílusai, előfordulhat, hogy a webalkalmazásunkban saját dizájnunk van, és szeretnénk, hogy az UX összetevőink illeszkedjenek egymáshoz. Lássuk, hogyan csinálnánk ezt a webkomponensek világában.
Valójában meg sem próbáljuk javul bármi. A cipőfűző alkotója sokkal jobb tervező, mint én valaha is leszek. Ehelyett csak azt nézzük meg, hogyan kell változik dolgokat, így alkalmazkodhat saját webalkalmazásaihoz.
Egy gyors bemutató a Shadow DOM-okról
Vessen egy pillantást a DevTools egyik lapfejlécére; valahogy így kell kinéznie:
Tabulátor elemünk létrehozta a div tartály a .tab és a .tab--active osztály, és a tabindex, miközben megjeleníti az adott laphoz megadott szöveget is. De vedd észre, hogy az a belsejében ül árnyékgyökér. Ez lehetővé teszi a webkomponensek szerzői számára, hogy saját jelöléseiket adják hozzá a webkomponenshez, miközben helyet biztosítanak a tartalomnak we biztosítani. Vedd észre a elem? Ez alapvetően azt jelenti, hogy „a felhasználó által megjelenített tartalmat helyezze el között a webkomponens címkéket itt. "
Így a komponens létrehoz egy árnyékgyökeret, és hozzáad némi tartalmat ahhoz, hogy a szép stílusú lapfejlécet helyőrzővel együtt megjelenítse (), amely a tartalom belsejében jeleníti meg.
Kapszulázott stílusok
A webfejlesztés egyik klasszikus, frusztrálóbb problémája mindig is a stílusok voltak lépcsőzetes olyan helyekre, ahol nem akarjuk őket. Aggódhat, hogy az alkalmazásunkban található stílusszabályok valami ilyesmit írnak elő div.tab zavarná ezeket a lapokat. Kiderült, hogy ez nem probléma; az árnyékgyökerek stílusokat foglalnak magukba. Az árnyékgyökön kívülről származó stílusok nem befolyásolják az árnyékgyökér belsejét (néhány kivételtől eltekintve, amelyekről beszélni fogunk), és fordítva.
Ez alól kivételt képeznek az öröklődő stílusok. Természetesen nem kell jelentkeznie a font-family stílust a webalkalmazás minden eleméhez. Ehelyett megadhatja a sajátját font-family egyszer, be :root or html és örökölje mindenhol alatta. Ez az öröklődés valójában az árnyékgyökeret is átüti.
Egyéni CSS-tulajdonságok (gyakran „css-változóknak” nevezik) egy kapcsolódó kivétel. Az árnyékgyökér abszolút be tud olvasni egy olyan CSS-tulajdonságot, amely az árnyékgyökön kívül van definiálva; ez egy pillanat alatt aktuális lesz.
A ::part választó
Mi a helyzet a stílusokkal nem örököl. Mi van, ha valami hasonlót szeretnénk testre szabni cursor, amely nem öröklődik, valamin az árnyékgyökér belsejében. Nincs szerencsénk? Kiderült, hogy nem. Vessen egy pillantást a fenti tabulátor elem képére és annak árnyékgyökére. Vedd észre a part attribútum a div? Ez lehetővé teszi az elem megcélzását és stílusát az árnyékgyökön kívülről a segítségével ::part választó. Egy kicsit végigmegyünk egy példán.
A cipőfűző stílusok felülbírálása
Lássuk mindegyik megközelítést működés közben. Jelenleg nagyon A cipőfűző stílusok, beleértve a betűtípusokat is, alapértelmezett értékeket kapnak az egyéni CSS-tulajdonságokból. Ha ezeket a betűtípusokat az alkalmazás stílusaihoz szeretné igazítani, írja felül a kérdéses egyéni kellékeket. Lát a dokik Információért arról, hogy a Shoelace mely CSS-változókat használja, vagy egyszerűen megtekintheti a stílusokat a DevTools bármely adott elemében.
Stílusok öröklése az árnyékgyökön keresztül
Nyissa meg a app.css fájl a src könyvtára a StackBlitz projekt. Az :root szakasz alján, látnia kell a letter-spacing: normal; nyilatkozat. Mivel a letter-spacing tulajdonság örökölhető, próbáljon meg új értéket beállítani, pl 2px. Mentéskor az összes tartalom, beleértve az árnyékgyökérben meghatározott lapfejléceket is, ennek megfelelően módosul.
Cipőfűző CSS-változók felülírása
A komponens olvas egy --indicator-color Egyéni CSS-tulajdonság az aktív lap aláhúzásához. Ezt felülírhatjuk néhány alapvető CSS-sel:
sl-tab-group {
--indicator-color: green;
}És most már van egy zöld jelzőnk is!
A részek lekérdezése
A cipőfűző jelenleg használt verziójában (2.0.0-beta.83) minden nem letiltott lap rendelkezik pointer kurzor. Változtassuk meg ezt az aktív (kiválasztott) lap alapértelmezett kurzorára. Már láttuk, hogy a elem hozzáadja a part="base" attribútumot a tárolóban a lapfejléchez. Ezenkívül az aktuálisan kiválasztott lap kap egy active tulajdonság. Használja ezeket a tényeket az aktív lap megcélzásához, és változtassa meg a kurzort:
sl-tab[active]::part(base) {
cursor: default;
}És ez az!
Animációk testreszabása
Hab a metaforikus tortán, nézzük meg, hogyan teszi lehetővé a cipőfűző az animációk testreszabását. Cipőfűző használja a Web Animations API, és kiteszi a setDefaultAnimation API annak szabályozására, hogy a különböző elemek hogyan animálják különböző interakcióikat. Tekintse meg a dokumentumokat a részletekért, de példaként íme, hogyan változtathatja meg a Cipőfűző alapértelmezett párbeszédpanel-animációját a kifelé bővülő és befelé zsugorodó párbeszédpanelről, hogy ehelyett felülről animáljon, és elrejtés közben legördüljön.
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)" },
});Ez a kód a App.svelte fájlt. Írja megjegyzésbe az eredeti, alapértelmezett animáció megtekintéséhez.
Csomagolta
A Shoelace egy hihetetlenül ambiciózus komponenskönyvtár, amely webes összetevőkkel készült. Mivel a webes összetevők keretfüggetlenek, bármilyen projektben, bármilyen keretrendszerrel használhatók. Az új keretrendszerek elképesztő teljesítményjellemzőkkel és könnyű kezelhetőségükkel is megjelennek, a minőségi felhasználói élményt nyújtó widgetek használatának lehetősége, amelyek egyetlen keretrendszerhez sem kötődnek, még soha nem volt ennyire vonzó.
