To jest post o sznurowadło, biblioteka komponentów autorstwa Cory LaViska, ale z niespodzianką. Definiuje wszystkie standardowe komponenty UX: tabulatory, modal, akordeony, autouzupełniania i o wiele wiele więcej. Wyglądają pięknie po wyjęciu z pudełka, są dostępne i w pełni konfigurowalne. Ale zamiast tworzyć te komponenty w React, Solid, Svelte itp., tworzy je za pomocą Komponenty sieciowe; oznacza to, że możesz ich używać z każdy Ramy.
Kilka wstępnych rzeczy
Komponenty sieciowe są świetne, ale obecnie jest kilka małych problemów, o których należy pamiętać.
React
Powiedziałem, że działają w dowolnym frameworku JavaScript, ale jak pisałem wcześniej, wsparcie Reacta dla Web Components jest obecnie biedny. Aby rozwiązać ten problem, Shoelace właściwie utworzone opakowania tylko dla Reacta.
Inną opcją, którą osobiście lubię, jest stworzenie cienkiego komponentu Reacta, który akceptuje nazwę znacznika komponentu sieciowego oraz wszystkie jego atrybuty i właściwości, a następnie wykonuje brudną robotę związaną z obsługą niedociągnięć Reacta. Mówiłem o tej opcji w poprzednim poście. Podoba mi się to rozwiązanie, ponieważ jest przeznaczone do usunięcia. Problem interoperacyjności Web Component jest obecnie rozwiązany w eksperymentalnej gałęzi Reacta, więc po dostarczeniu, każdy cienki interoperacyjny komponent Web Component, którego używasz, może zostać przeszukany i usunięty, pozostawiając Ci bezpośrednie użycie Web Component, bez żadnych opakowań Reacta.
Renderowanie po stronie serwera (SSR)
Wsparcie dla SSR jest również słabe w momencie pisania tego tekstu. Teoretycznie jest coś, co nazywa się Deklaratywny cień DOM (DSD), który umożliwiłby SSR. Ale obsługa przeglądarek jest minimalna, a w każdym razie DSD faktycznie wymaga obsługa serwera działać dobrze, co oznacza Następna, Remix, lub cokolwiek, czego akurat używasz na serwerze, będzie musiało być zdolne do specjalnej obsługi.
To powiedziawszy, istnieją inne sposoby, aby komponenty sieciowe do po prostu pracuj
z aplikacją internetową, która jest z SSR z czymś takim jak Dalej. Krótka wersja jest taka, że skrypty rejestrujące składniki sieci Web muszą być uruchamiane w skrypcie blokującym przed analizowaniem znaczników. Ale to już temat na inny post.
Oczywiście, jeśli budujesz jakikolwiek rodzaj SPA renderowanego przez klienta, nie jest to problemem. Z tym będziemy pracować w tym poście.
Zaczynajmy
Ponieważ chcę, aby ten post skupiał się na sznurowadle i jego naturze komponentów sieciowych, będę używał Smukły za wszystko. Ja też będę tego używał Projekt Stackblitz do demonstracji. Zbudujemy to demo razem, krok po kroku, ale możesz otworzyć tę REPL w dowolnym momencie, aby zobaczyć efekt końcowy.
Pokażę ci, jak używać sznurowadła, a co ważniejsze, jak go dostosować. Porozmawiamy o Domy cienia i które style blokują przed światem zewnętrznym (a także których nie). Porozmawiamy też o ::part Selektor CSS — który może być dla Ciebie zupełnie nowy — a nawet zobaczymy, jak Shoelace pozwala nam nadpisywać i dostosowywać różne animacje.
Jeśli po przeczytaniu tego posta stwierdzisz, że lubisz Shoelace i chcesz wypróbować to w projekcie React, radzę skorzystać opakowanie jak wspomniałem we wstępie. Umożliwi to korzystanie z dowolnego komponentu Shoelace i będzie można go całkowicie usunąć, gdy React dostarczy poprawki do komponentów sieciowych, które już mają (poszukaj tego w wersji 19).
Przedstawiamy sznurowadło
Sznurowadło ma dość szczegółowe Instrukcje Instalacji. W najprostszym przypadku możesz zrzucić i tagi do twojego dokumentu HTML i to wszystko. Jednak w przypadku każdej aplikacji produkcyjnej prawdopodobnie będziesz chciał selektywnie zaimportować tylko to, co chcesz, i są na to również instrukcje.
Po zainstalowaniu Shoelace utwórzmy składnik Svelte do renderowania niektórych treści, a następnie przejdźmy przez kroki, aby w pełni go dostosować. Aby wybrać coś dość nietrywialnego, skorzystałem z zakładek i okna dialogowego (powszechnie określanego jako modalne). Oto kilka znaczników zaczerpnięte głównie z dokumentów:
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!
To renderuje kilka ładnych, stylizowanych zakładek. Podkreślenie na aktywnej karcie jest nawet ładnie animowane i przesuwa się z jednej aktywnej karty do drugiej.
Nie będę marnował Twojego czasu na przeglądanie każdego centymetra interfejsów API, które są już dobrze udokumentowane na stronie Shoelace. Zamiast tego przyjrzyjmy się, jak najlepiej współdziałać i w pełni dostosowywać te składniki sieci Web.
Interakcja z API: metody i zdarzenia
Wywoływanie metod i subskrypcja zdarzeń w składniku sieciowym może się nieco różnić od tego, do czego przywykłeś w zwykłym, wybranym frameworku, ale nie jest to zbyt skomplikowane. Zobaczmy jak.
Tabs
Składnik kart () ma show metoda, który ręcznie pokazuje konkretną kartę. Aby to nazwać, musimy uzyskać dostęp do podstawowego elementu DOM naszych zakładek. W Svelte oznacza to używanie bind:this. W React byłoby to ref. I tak dalej. Ponieważ używamy Svelte, zadeklarujmy zmienną dla naszego tabs instancja:
let tabs;
…i zwiąż:
Teraz możemy dodać przycisk, aby to nazwać:
To ten sam pomysł na imprezy. Jest sl-tab-show wydarzenie uruchamia się, gdy pojawia się nowa karta. Moglibyśmy użyć addEventListener na nasze tabs zmienna lub możemy użyć Svelte's on:event-name skrót.
console.log(e)}>To działa i rejestruje obiekty zdarzeń podczas wyświetlania różnych kart.
Zazwyczaj renderujemy karty i pozwalamy użytkownikowi klikać między nimi, więc ta praca zwykle nie jest nawet konieczna, ale jest tam, jeśli jej potrzebujesz. Teraz przejdźmy do interaktywnego komponentu dialog.
dialog
Komponent okna dialogowego () przyjmuje plik open prop, który kontroluje, czy okno dialogowe jest… otwarte. Zadeklarujmy to w naszym komponencie Svelte:
let tabs;
let open = false;
Ma też sl-hide zdarzenie, gdy okno dialogowe jest ukryte. Pomińmy nasze open podeprzeć i powiązać z hide zdarzenie, dzięki czemu możemy je zresetować, gdy użytkownik kliknie poza zawartością okna dialogowego, aby je zamknąć. Dodajmy obsługę kliknięć do tego przycisku zamykania, aby ustawić nasz open rekwizyt do false, co również zamknie okno dialogowe.
open = false}>
Hello World!
Na koniec połączmy nasz przycisk otwartego okna dialogowego:
I to jest to. Interakcja z API biblioteki komponentów jest mniej lub bardziej prosta. Jeśli to wszystko, co zrobił ten post, byłoby dość nudne.
Ale Shoelace — zbudowane z Web Components — oznacza, że niektóre rzeczy, w szczególności style, będą działać nieco inaczej niż moglibyśmy być przyzwyczajeni.
Dostosuj wszystkie style!
W chwili pisania tego tekstu Shoelace jest nadal w wersji beta, a twórca rozważa zmianę niektórych domyślnych stylów, być może nawet całkowite usunięcie niektórych domyślnych, aby nie zastępowały one już stylów aplikacji hosta. Koncepcje, które omówimy, są istotne tak czy inaczej, ale nie zdziw się, jeśli niektóre ze specyfików sznurowadeł, o których wspominam, różnią się, gdy zaczniesz go używać.
Choć domyślne style Shoelace są ładne, możemy mieć własne projekty w naszej aplikacji internetowej i chcemy, aby nasze komponenty UX pasowały do siebie. Zobaczmy, jak podeszlibyśmy do tego w świecie komponentów sieciowych.
Właściwie nie będziemy próbować podnieść byle co. Twórca Shoelace jest znacznie lepszym projektantem niż ja kiedykolwiek będę. Zamiast tego przyjrzymy się, jak: zmiana rzeczy, dzięki czemu możesz dostosować się do własnych aplikacji internetowych.
Szybka prezentacja Shadow DOMs
Rzuć okiem na jeden z tych nagłówków zakładek w DevTools; powinno wyglądać mniej więcej tak:
Nasz element tab utworzył div pojemnik z .tab i .tab--active klasa i tabindex, wyświetlając jednocześnie tekst, który wprowadziliśmy dla tej karty. Ale zauważ, że siedzi wewnątrz korzeń cienia. Pozwala to autorom komponentów sieciowych na dodawanie własnych znaczników do komponentu sieciowego, zapewniając jednocześnie miejsce na treść we dostarczać. Zwróć uwagę na element? Zasadniczo oznacza to „umieść dowolną treść wyrenderowaną przez użytkownika pomiędzy tagi komponentów sieciowych tutaj".
Więc komponent tworzy cień główny, dodaje do niego trochę zawartości, aby renderować ładnie stylizowany nagłówek karty wraz z symbolem zastępczym (), który renderuje naszą zawartość w środku.
Zamknięte style
Jednym z klasycznych, bardziej frustrujących problemów w tworzeniu stron internetowych zawsze były style kaskadowy do miejsc, w których ich nie chcemy. Możesz się obawiać, że w naszej aplikacji reguły stylu, które określają coś takiego jak div.tab kolidowałby z tymi zakładkami. Okazuje się, że to nie problem; korzenie cienia hermetyzują style. Style spoza korzenia cienia nie wpływają na to, co znajduje się wewnątrz korzenia cienia (z pewnymi wyjątkami, o których będziemy mówić) i na odwrót.
Wyjątkiem są style dziedziczne. Oczywiście nie musisz składać wniosku font-family styl dla każdego elementu w Twojej aplikacji internetowej. Zamiast tego możesz określić swój font-family raz, w dniu :root or html i niech dziedziczy wszędzie pod nim. W rzeczywistości to dziedzictwo przebije również korzeń cienia.
Niestandardowe właściwości CSS (często nazywane „zmiennymi css”) są powiązanym wyjątkiem. Shadow root może bezwzględnie odczytać właściwość CSS zdefiniowaną poza Shadow root; za chwilę stanie się to istotne.
Połączenia ::part selektor
A co ze stylami, które? nie dziedziczyć. Co jeśli chcemy dostosować coś takiego? cursor, który nie dziedziczy, na czymś wewnątrz korzenia cienia. Czy nie mamy szczęścia? Okazuje się, że nie. Jeszcze raz spójrz na powyższy obraz elementu tab i jego główny element cienia. Zwróć uwagę na part atrybut na div? To pozwala na celowanie i stylizowanie tego elementu spoza korzenia cienia za pomocą ::part selektor. Przejdziemy trochę przez przykład.
Nadrzędne style sznurowadeł
Zobaczmy każde z tych podejść w akcji. Od teraz dużo stylów Shoelace, w tym czcionek, otrzymuje wartości domyślne z niestandardowych właściwości CSS. Aby dopasować te czcionki do stylów aplikacji, zastąp odpowiednie właściwości niestandardowe. Widzieć dokumenty aby dowiedzieć się, jakich zmiennych CSS używa Shoelace, lub możesz po prostu sprawdzić style w dowolnym elemencie w DevTools.
Dziedziczenie stylów poprzez korzeń cienia
Otwórz app.css Plik w src katalog Projekt StackBlitz, w :root na dole, powinieneś zobaczyć letter-spacing: normal; deklaracja. Ponieważ letter-spacing właściwość jest dziedziczna, spróbuj ustawić nową wartość, na przykład 2px. Podczas zapisywania cała zawartość, w tym nagłówki kart zdefiniowane w katalogu głównym cienia, zostaną odpowiednio dostosowane.
Nadpisywanie zmiennych CSS Shoelace
Połączenia komponent czyta --indicator-color Niestandardowa właściwość CSS dla podkreślenia aktywnej karty. Możemy to zmienić za pomocą podstawowego kodu CSS:
sl-tab-group {
--indicator-color: green;
}I tak po prostu mamy teraz zielony wskaźnik!
Odpytywanie części
W wersji Shoelace, której obecnie używam (2.0.0-beta.83), każda niewyłączona karta ma pointer kursor. Zmieńmy to na domyślny kursor dla aktywnej (wybranej) karty. Widzieliśmy już, że element dodaje a part="base" atrybut w kontenerze dla nagłówka karty. Ponadto aktualnie wybrana zakładka otrzymuje active atrybut. Wykorzystajmy te fakty, aby wskazać aktywną kartę i zmienić kursor:
sl-tab[active]::part(base) {
cursor: default;
}I to jest to!
Dostosowywanie animacji
Dla wisienki na metaforycznym torcie zobaczmy, jak Shoelace pozwala nam dostosować animacje. Sznurowadło wykorzystuje Interfejs API animacji internetowychi eksponuje a setDefaultAnimation API do kontrolowania sposobu, w jaki różne elementy animują ich różne interakcje. Szczegółowe informacje znajdziesz w dokumentacji, ale jako przykład możesz zmienić domyślną animację okna dialogowego Shoelace z rozwijania na zewnątrz i zmniejszania do wewnątrz na animację od góry i rozwijanie podczas ukrywania.
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)" },
});Ten kod jest w App.svelte plik. Dodaj komentarz, aby zobaczyć oryginalną, domyślną animację.
Zamykając
Shoelace to niezwykle ambitna biblioteka komponentów zbudowana za pomocą komponentów internetowych. Ponieważ Web Components są niezależne od frameworka, mogą być używane w dowolnym projekcie, z dowolnym frameworkiem. Wraz z pojawieniem się nowych frameworków, które mają niesamowitą wydajność, a także łatwość użycia, możliwość korzystania z wysokiej jakości widżetów, które nie są powiązane z żadną jedną platformą, nigdy nie była bardziej przekonująca.
