Implementacja szkieletu ładowania w Angular
Szkielety to elementy zastępcze, które są wyświetlane przed załadowaniem rzeczywistej zawartości na stronie internetowej. Szkielet to zwykle jasnoszara ramka lub okrąg, który widzisz na stronach takich jak Medium, YouTube itp. Szkielety przekazują wizualne wrażenie funkcji, co daje im przewagę nad spinnerami.
Istnieją dwa rodzaje szkieletów — wbudowane i samodzielne:
Stworzymy dyrektywę strukturalną, która pomoże utrzymać nasz kod w stanie suchym i umożliwi tworzenie szkieletów w trakcie loadingprocesu. Najpierw utwórzmy komponent szkieletu prostokąta:
Stworzyliśmy składnik prostokątny, który przyjmuje szerokość, wysokość i niestandardową nazwę klasy. Odrobina animacji CSS dodaje do tego ładny efekt pulsu.
Teraz możemy go użyć w dyrektywie strukturalnej i stworzyć tyle prostokątów, ile potrzebujemy:
Istnieje kilka danych wejściowych: loadingstan, liczba prostokątów do renderowania, szerokość i wysokość oraz klasa niestandardowa. Renderujemy komponenty prostokąta na podstawie danych wejściowych dostarczonych, gdy loadingwłaściwość jest true; w przeciwnym razie renderujemy szablon.
Teraz możemy go wykorzystać w naszych szablonach:
Co dalej
To była minimalna demonstracja tego, co możemy zrobić z dyrektywami strukturalnymi. Kilka innych pomysłów znajduje się poniżej:
Możemy dodać dane typewejściowe i renderować różne predefiniowane kształty, takie jak cardszkielet.
Możemy ulepszyć naszą dyrektywę również w celu wsparcia stanu błędu.
Śledź mnie na Medium lub Twitterze , aby dowiedzieć się więcej o Angularze i JS!
Suggested posts
Rewolucja bez kodu: wyzwalanie dobrobytu biznesowego dzięki Webflow, Framer, Bubble.io,
Wyrusz w ekscytującą podróż pełną innowacji i sukcesu, wykorzystując niewykorzystany potencjał tych zaskakujących platform bez kodu. Pozwólcie, że podzielę się z wami historią o Sapnie, niezwykłej kobiecie-przedsiębiorcy.
Moje najczęściej używane zasoby dotyczące kodowania
W tym tygodniu otrzymałem wiadomość e-mail od członka codziennej listy e-mailowej. Chcieli wiedzieć: Jakie zasoby odwiedzasz codziennie, co tydzień i co miesiąc? Świetne pytanie! Cieszę się, że mogę podzielić się spostrzeżeniami na temat mojego przepływu pracy i najlepszych zasobów, z których korzystam.
Related posts
„Odsłonięty Rów Mariański: Odsłonięcie przerażających ukrytych prawd otchłani”
Wprowadzenie:Witajcie, odważni czytelnicy, w podróży, która zabierze nas w najciemniejsze głębiny naszej planety. Na tym blogu zagłębiamy się w enigmatyczny świat Rowu Mariańskiego, odkrywając jego ukryte tajemnice i odkrywając mrożące krew w żyłach prawdy, które leżą pod jego powierzchnią.
Niebezpieczne rozmowy
Jeśli chcemy dalej prosperować na tej planecie, będziemy musieli prowadzić niebezpieczne rozmowy. Takie, które rzucają wyzwanie temu, co zrobiliśmy, co robimy i co obecnie zamierzamy robić (lub planujemy robić).
Nauka w tygodniu pracy ma większe znaczenie niż myślisz
Często mamy trudności z wdrożeniem tego, co wiemy, że jest dla nas dobre. Od mówienia drugiej osobie, że ją kochamy, po pamiętanie, by mówić jak pirat, zawsze znajdą się tacy, którzy twierdzą, że dzień, tydzień lub miesiąc wydarzeń nie jest potrzebny, ponieważ już to robią.