Twórz ultranowoczesne aplikacje internetowe za pomocą materiałów Angular
Opublikowany: 2022-03-11Na konferencji Google I/O w 2014 roku Google ogłosił Material Design, nowy język projektowania. Od tego czasu przekonwertowali wiele swoich popularnych aplikacji, aby były zgodne z tą nową specyfikacją, starając się zapewnić spójne działanie. Teraz próbują przekonać Cię również do pójścia dalej.
Co to jest projektowanie materiałów?
Po wizycie w oficjalnej specyfikacji Material Design od razu poczujesz ultranowoczesny minimalizm. Motywem przewodnim są tu podstawowe kształty i płaskie kolory. Przeglądanie dokumentacji to spore doświadczenie. Polecam zajrzeć samemu, ale tutaj podsumuję.
Bramka
Celem jest stworzenie języka wizualnego, który łączy klasyczne zasady dobrego projektowania z innowacyjnością i możliwościami technologii i nauki. Ponadto, aby opracować jeden podstawowy system, który pozwoli na ujednolicone działanie na różnych platformach i rozmiarach urządzeń.
Zasady
Material Design opiera się na trzech zasadach.
Materiał jest metaforą
Zainspirowany studium papieru i atramentu materiał żyje w przestrzeni 3D i jest osadzony w dotykowej rzeczywistości. Daje iluzję przestrzeni za pomocą realistycznych cieni. Materiał papierowy musi przestrzegać praw fizyki (tzn. dwie kartki papieru mogą nie przechodzić przez siebie nawzajem), ale mogą zastąpić świat fizyczny (tzn. papier może rosnąć lub kurczyć się).
Pogrubiony, graficzny, celowy
Celowy dobór kolorów, obrazy od krawędzi do krawędzi, wielkoformatowa typografia i celowa biała przestrzeń tworzą śmiały i graficzny interfejs, który zanurza użytkownika w doświadczeniu. Pływający przycisk akcji lub FAB jest doskonałym przykładem tej zasady. Czy zauważyłeś małe kółko z symbolem „plusa” unoszące się w Twojej aplikacji Skrzynka odbiorcza Google? Material Design wyraźnie pokazuje, że jest to ważny przycisk.
Ruch zapewnia znaczenie
Ruch jest znaczący i odpowiedni, służy skupieniu uwagi i utrzymaniu ciągłości. Informacja zwrotna jest subtelna, ale wyraźna. Przejścia są skuteczne, ale spójne. Chodzi o to, aby animować tylko wtedy, gdy ma to jakiś cel i nie przesadzać.
Jak AngularJS pasuje do Material Design?
AngularJS, „Superheroic JavaScript MVW Framework” firmy Google, rozwiązuje wiele wyzwań napotykanych podczas tworzenia aplikacji jednostronicowych (SPA). Zapewnia ramy potrzebne do tworzenia nowoczesnych aplikacji internetowych, które łączą się z interfejsami API i nigdy nie wymagają odświeżania strony.
AngularJS: nowe podejście
Angular jest tym, czym byłby HTML, gdyby został zaprojektowany dla aplikacji. HTML jest świetnym językiem deklaratywnym dla statycznych dokumentów, ale tworzenie dynamicznych aplikacji to nie wszystko.
Tworzenie dynamicznych aplikacji za pomocą HTML zawsze było ćwiczeniem polegającym na nakłanianiu przeglądarki do robienia rzeczy, do których nie była przeznaczona. Można to zrobić na kilka sposobów.
- Biblioteka - zbiór funkcji. (jQuery)
- Framework — w razie potrzeby kod dynamicznie wypełnia elementy statyczne. (Durandal, Ember)
Angular ma inne podejście do rozwiązania tego problemu. Zamiast zmagać się z podanym kodem HTML, tworzy nowe konstrukcje HTML. Angular uczy przeglądarkę nowej składni HTML za pomocą konstrukcji zwanej „dyrektywami”. Angular ma wbudowany zestaw tych dyrektyw, ale umożliwia także tworzenie niestandardowych dyrektyw, dzięki czemu umożliwia pisanie własnych elementów HTML.
Czy nie byłoby fajnie, gdyby Google stworzył zestaw dyrektyw opartych na zasadach Material Design?
Przedstawiamy materiał kątowy
Google aktywnie rozwija Angular Material, implementację Material Design w AngularJS. Angular Material zapewnia zestaw komponentów interfejsu użytkownika wielokrotnego użytku opartych na systemie Material Design. Materiał Angular składa się z kilku części. Posiada bibliotekę CSS dla typografii i innych elementów, zapewnia interesujące podejście JavaScript do tworzenia motywów, a jego responsywny układ wykorzystuje siatkę elastyczną. Ale najbardziej atrakcyjną cechą Angular Material jest niesamowita kolekcja dyrektyw.
Pierwsze kroki
Stworzyłem projekt open source, aby pomóc w rozpoczęciu kolejnego projektu Angular Material. Celem tego projektu jest przedstawienie przykładu wszystkiego, co ma do zaoferowania Angular Material, wszystko pod jednym dachem. Nawigacja, stronicowanie, tworzenie motywów i cała kolekcja dyrektyw są gotowe do działania, wszystko, co musisz zrobić, to wprowadzić swoje dane i powiązać je z kodem HTML.
Obejrzyj demo tutaj lub rozwiń kod na GitHub.
Dyrektywy
Dyrektywy są podstawową funkcją Angulara. Angular zawiera kilka dyrektyw, których używasz przez cały czas, takich jak ng-model lub ng-repeat. Są bardzo ważnym elementem Angulara, który sprawia, że framework działa tak, jak powinien.
Jak korzystać z dyrektywy dotyczącej materiałów kątowych
Angular Material rozszerza tę bibliotekę dyrektyw o zestaw pięknych dyrektyw inspirowanych Material Design. Dyrektywy Angular Material to znaczniki HTML, które zaczynają się od „md”; skrót od Material Design. Nie mogą być prostsze w użyciu. Na przykład spójrzmy na stary dobry przycisk.
Standardowy przycisk HTML może wyglądać mniej więcej tak.
<button>Click Me</button>Przycisk Angular Material wygląda tak.
<md-button>Click Me</md-button>I to wszystko, co jest potrzebne do wykonania przycisku Material. Obecnie istnieje kilka innych opcji dostępnych dla tej dyrektywy, takich jak nadanie jej tematu i podniesienie jej z powierzchni, aby zasugerować jej znaczenie.
<md-button class="md-raised md-primary md-hue-1">Click Me</md-button>Usługi
Usługi są również podstawą funkcjonalności Angulara. Służą do udostępniania kodu w całej aplikacji. Powszechna usługa podstawowa, taka jak $http, jest używana i ponownie używana do połączeń danych w aplikacjach Angular.
Usługi kątowe to:
- Instancja z opóźnieniem — Angular tworzy wystąpienie usługi tylko wtedy, gdy zależy od niej składnik aplikacji.
- Singletony — każdy składnik zależny od usługi otrzymuje odwołanie do pojedynczego wystąpienia wygenerowanego przez fabrykę usług.
Jak korzystać z usługi Angular Material?
Angular Material jest dostarczany z niektórymi usługami, które zapewniają dodatkową funkcjonalność aplikacji. Przyczyniają się również do wykonania niektórych dyrektyw. Świetnym przykładem usługi jest „toast”.
Toast to małe powiadomienie, które wsuwa się u góry ekranu i znika po kilku sekundach. Korzystanie z tej usługi jest łatwe.
w JavaScript,
$mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );Ten przykład pokazuje prosty toast, który pojawia się w lewym dolnym rogu ekranu i cofa się po 3 sekundach.
Niektóre usługi można spersonalizować za pomocą niestandardowych szablonów. W takim przypadku usługa $mdToast może użyć niestandardowego szablonu HTML za pomocą dyrektywy md-toast.
Tematy
Material Design to język wizualny, w którym motywy przekazują znaczenie poprzez kolor, tony i kontrast. Te motywy są wyrażane w komponentach całej aplikacji, aby zapewnić bardziej ujednoliconą atmosferę.
Zgodnie z wytycznymi Material Design musisz „ograniczyć wybór kolorów, wybierając trzy odcienie kolorów z palety podstawowej i jeden kolor akcentujący z palety dodatkowej”. Angular Material sprawia, że przestrzeganie tych wytycznych jest proste dzięki użyciu JavaScript do konfiguracji motywu. Ale najpierw, czym jest paleta i odcień?
- Odcień: Odcień to pojedynczy kolor w palecie.
- Paleta: Paleta to zbiór odcieni.
Na przykład paleta byłaby „zielona”, a odcień to szczególny odcień zieleni. Angular Material jest dostarczany ze wszystkimi poprawnymi paletami ze specyfikacji Material Design. Możesz dowiedzieć się więcej o obowiązujących paletach kolorów tutaj.
Konfiguracja motywu
Tematyka Twojego projektu to bułka z masłem. W pliku app.js ustaw żądane palety i odcienie za pomocą usługi Theming Provider.
angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('cyan', { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });Korzystanie z motywu
Aby zastosować motyw do komponentów, ustaw klasę elementu na żądaną paletę i odcień.
<md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>Układ
Flexbox to najnowszy i najlepszy dodatek do responsywnego projektowania, a dołączony jest do niego materiał Angular. Jeśli znasz system siatki Bootstrap, powinieneś być w stanie szybko nadrobić. W rzeczywistości Bootstrap przechodzi na Flexbox w nadchodzącym wydaniu. Ma znajomy układ wierszy i kolumn, do którego przywykłeś, ale ma znacznie więcej. Dowiedz się, jak korzystać z Flexbox z tego samouczka lub zapoznaj się z oficjalną dokumentacją.
Top 9 najlepszych dyrektyw dotyczących materiałów kątowych
Jest zbyt wiele dyrektyw Angular Material, aby je wszystkie wymienić, więc chciałbym podzielić się z wami moimi ulubionymi.
9. Postęp liniowy
Często w SPA strony potrzebują czasu na załadowanie danych z serwera. Jeśli w tym czasie aplikacja wyświetli pustą stronę, użytkownicy mogą pomyśleć, że aplikacja jest uszkodzona i odejdzie. Poinformuj użytkowników, że dane są ładowane za pomocą dyrektywy Progress Linear. Użytkownicy będą wiedzieć, że trzeba czekać, gdy zobaczą animowany pasek postępu wskazujący, że coś się dzieje. Alternatywnie użyj dyrektywy Progress Circular dla okrągłego wskaźnika.
8. Selektor dat
Dyrektywa Date Picker sprawia, że wybór daty jest czystym, prostym doświadczeniem dla użytkownika i prawdziwym jednowierszem do pisania. Po prostu użyj md-datepicker i opcjonalnie ogranicz zakres za pomocą md-min-date i md-max-date i to wszystko.
7. Autouzupełnianie
Autouzupełnianie zapewnia przyjemne wrażenia użytkownika, pomagając mu wybrać opcję. To właśnie sprawia, że wyszukiwarka Google jest najlepsza. Dyrektywa Autocomplete dodaje tę funkcjonalność do Twojej aplikacji, uzupełniając słowa użytkownika podczas ich pisania. Ale najlepszą częścią tej dyrektywy jest dostosowanie. Wypełniając autouzupełnianie za pomocą md-item-template, możesz nadać sugestiom więcej znaczenia. Na przykład, jeśli użytkownik szukał nazw w firmie, autouzupełnianie może pokazać pasujące nazwy wraz z ich zdjęciem i rolą w firmie, zapewniając bardziej niezawodne wrażenia użytkownika.
6. Arkusz dolny
Dolny arkusz to małe menu, które przesuwa się od dołu ekranu, zakrywając zawartość i skupiając się. Pierwotnie przeznaczony do użytku wyłącznie na urządzeniach mobilnych, dolny arkusz zyskuje na popularności na większych ekranach. Aby z niego skorzystać, utwórz szablon z md-bottom-sheet zawierającym odpowiednio md-grid lub md-list dla układu siatki lub układu listy. Następnie wywołaj go za pomocą usługi Bottom Sheet, $mdBottomSheet.show().
5. Wejście
Formularze wejściowe są nudne i były od początku istnienia internetu. Ale nie muszą! Daj swoim wejściom trochę stylu dzięki dyrektywie Input. Owiń tag wejściowy za pomocą md-input-container i zobacz, jak ożywa. Zobacz, jak symbol zastępczy animuje się w pływającą etykietę. Z łatwością weryfikuj swoje dane wejściowe dzięki natychmiastowym, ale subtelnym zmianom kolorów i komunikatom ostrzegawczym. Dyrektywa wejściowa zawiera element, który ma być nudny i zapewnia miłą niespodziankę.
4. Tosty
Najbardziej irytującym doświadczeniem użytkownika jest brak wiedzy o działaniu aplikacji. Łagodzimy to rozdrażnienie za pomocą tosterów lub małych dyskretnych powiadomień. W dawnych czasach, gdy wysyłaliśmy żądanie do serwera, czekaliśmy na tej stronie, aż odpowiedź wróciła, zanim mogliśmy przejść dalej. Od tego czasu zakres uwagi użytkownika drastycznie spadł. W dzisiejszych SPA klikamy przycisk i oczekujemy natychmiastowego działania, radzenia sobie z odpowiedzią serwera, gdy nadejdzie. Dyrektywa Toast sprawia, że jest to bułka z masłem. Toster jest przywoływany po prostu za pomocą usługi Toast, $mdToast.show() i ustawiając tekst, czas trwania i róg, w którym ma się pojawić. Stwórz swój własny toster za pomocą md-toast.
3. Lista siatki
Czy na twoich listach brakuje pizazza? Listy siatki są alternatywą dla standardowych widoków list. Lista siatki jest najlepsza do prezentowania obrazów i jest zoptymalizowana pod kątem rozumienia wizualnego. Działa poprzez układanie płytek o różnych rozmiarach na siatce, dając rozproszony, eklektyczny charakter. Rozmiar i układ kafelków odpowiadają następnie rozmiarowi ekranu. Ta dyrektywa z pewnością nada Twojej aplikacji ekscytujący i zabawny wygląd.
2. Biała ramka
Pojęcie przestrzeni jest rdzeniem Material Design i jego papierowej metafory. Dwa arkusze papieru w tej samej pozycji Z (lub głębokości) tworzą szew i muszą się ze sobą przesuwać. Dwa zachodzące na siebie arkusze papieru, z różnymi pozycjami Z, tworzą stopień. Poruszają się niezależnie od siebie. Aby podążać za projektem, musimy być w stanie przesuwać elementy wzdłuż osi Z. Materiał kątowy zapewnia prosty sposób na zrobienie tego. Korzystając z dyrektywy Whiteframe, ustaw klasę na md-whiteframe-z{x}, gdzie x jest jednostkami głębi w górę od tła. Im większa liczba, tym większy cień rzuca papier.
1. Sidenav
Tworzenie bocznego menu nawigacyjnego nigdy nie było łatwiejsze. Dyrektywa Sidenav umieszcza menu nawigacyjne po lewej lub prawej stronie ekranu. Mając na uwadze mobilność, przesuwa się i wysuwa zgodnie z oczekiwaniami lub programowo za pomocą kliknięcia przycisku. Miłym dodatkiem jest funkcja otwierania zamka. Nawigację boczną można ustawić tak, aby była otwarta, gdy ekran osiągnie określony rozmiar. Po ustawieniu parametru md-is-locked-open=”$mdMedia('gt-sm')” menu zostanie schowane w telefonie, ale zablokowane na tablecie i większym.
Wniosek
Google konwertuje swoje najpopularniejsze aplikacje do Material Design. Teraz stoją na czele rozwoju Angular Material, implementacji Material Design napisanej w AngularJS. Material Design wykorzystuje papierową metaforę, odważne intencje i znaczący ruch. AngularJS organizuje aplikacje jednostronicowe. Angular Material stosuje zasady projektowania materiałów do aplikacji AngularJS.
Material Design jest tutaj, a Angular Material to fantastyczny sposób na zastosowanie specyfikacji Material Design do aplikacji jednostronicowych. Jeśli chcesz stworzyć własną aplikację Angular Material, nie trać czasu na zaczynanie od zera. Zamiast tego zacznij od w pełni działającej aplikacji z demonstracjami dyrektyw, już skonfigurowanymi motywami oraz gotową nawigacją i wyznaczaniem tras. Obejrzyj demo tutaj lub rozwiń kod na GitHub. Oczywiście możesz również dowiedzieć się wszystkiego o Angular Material, odwiedzając oficjalną dokumentację.
Co sądzisz o moich typach najlepszych dyrektyw Angular Material? Czy dobrze je zrozumiałem? Jakie są twoje ulubione?