Angular: Interakcje - przyciski i linki

Angular 6, 7, 8+

0:00W tej lekcji zajmiemy się komponentami które pozwalają nam

0:04na podstawowe interakcje z naszą aplikacją takim jak przyciski

0:08czy na przykład linki ja tu wejdę w sekcję przyciski mamy przykładowy

0:12przycisk mamy też tutaj wymienione wiele rodzajów przycisków

0:17i teraz przechodząc do naszego kodu źródłowego ja tutaj pozwoliłem sobie przygotować

0:21kolejny komponent przykładowy nazwałem go interactions example i

0:25ustawiłem nasze przekierowanie w routingu żeby domyślnie ładowało nasz komponent

0:29interactions example tutaj do modułu nie dodawałem niczego nowego i

0:34nasz komponent interactions example ma tylko na razie po prostu tytuł

0:39i przykładowy tutaj styl który tam centruje stronę zobacz sobie jak to wygląda interaction

0:44example works i teraz co będziemy chcieli tutaj zrobić

0:49kilka takich styl i dla naszych przykładów czyli powiedzmy pojedynczy

0:53przykład będzie miał jakiś margines 30

0:58pikseli powiedzmy 0 i dodatkowo zróbmy jakieś

1:02wyśrodkowanie powiedzmy flex-start albo flex-end

1:06na przykład w ten sposób i będzie mógł sobie stworzyć kilka takich przykładowych

1:12wierszy w których będziemy mogli dodawać sobie różne interakcje

1:17i pierwszą taką interakcją podstawową byłyby po prostu

1:21zwykłe linki czyli a href tak

1:27zwykła kotwica i powiedzmy kilka takich przykładowych home

1:33page contakt tak

1:40jakieś przykładowe linki zobaczymy jak to będzie wyglądało na

1:44stronie okej przeładowało

1:49się i jak widzisz jest to zwykły tekst nie mamy tutaj żadnego odstępu pomiędzy tymi

1:53linkami mogliśmy potraktować flex boxem żeby dodać odstępy

1:57i teraz tak jeśli chcesz ze zwykłych linków możesz jednak zwróć uwagę

2:01że takie coś wygląda bardzo jak strona internetowa jak zwykły tekst i

2:05jeśli stworzymy aplikację no to bardziej interesowałoby nas tutaj przyciski i

2:09teraz przyciski możemy zrobić na dwa sposoby możemy użyć faktycznie elementu button

2:13a możemy użyć elementu właśnie linku czyli a href jeśli

2:18chciałbym dodać przyciski no to muszę odpowiedni ten moduł dodać do naszego material

2:22examples module ja tutaj sobię oddzielę osobną sekcją może w ten

2:26sposób okej

2:31i mat button module

2:35który zawiera wszystkie komponenty potrzebne do przycisków i

2:39teraz żeby użyć przycisku zobaczymy sobie dokumentację wygląda to w ten sposób button

2:44mat button czyli musimy mieć do przycisku atrybut mat button ale

2:48nie musimy używać przycisku możemy także używać tego do elementów

2:53linków czyli możemy dać do przycisku możemy dać do linku jaka jest różnica jeśli

2:58będę miał aplikację to pamiętaj o tym że nasza aplikacja nie tylko przez ludzi może być używana

3:02nie tylko wizualnie może być obsługiwana ale przez jakieś skrypty jakąś

3:06wtyczkę do przeglądarki wyszukiwarka czy także osoby z ograniczoną

3:11wizualną zdolnością oglądania naszej strony dlatego

3:15linki to jest coś co dotyczy nawigacji to jest coś to bezpiecznie

3:19może otworzyć automat co bezpiecznie może wtyczka załadować i linki

3:24generalnie nie mają efektów linki nie wysyłają postów nie dodają treści nie

3:28usuwają niczego przyciski wręcz przeciwnie przyciski powodują jakiś efekt

3:32i przycisk nie jest bezpiecznym jakby narzędziem

3:36do sobie takiej nawigacji po stronie więc automat nie powinien przycisków

3:40po linkach natomiast może sobie chodzić może ładować sobie dynamicznie jakieś fragmenty

3:45strony na przykład proxy może doładowywać rzeczy dlatego uważaj czy używasz właśnie

3:49przycisku czy linku jeśli chodzi o angular material on pozwala stworzyć

3:53przycisk wygląda tak samo niezależnie czy jest linkiem czy przyciskiem czyli

3:57ja mogę do tych naszych tutaj linków dodać sobie powiedzmy do

4:01wszystkich trzech mat-button i one

4:05powinny nam się zamienić teraz na przyciski czyli jak widzisz wygląda to jak przycisk ale musisz

4:09pamiętać że jest to nawigacja czyli zakładamy że bezpiecznie

4:13można się poruszać po tych wszystkich linkach i nie powoduje to żadnych

4:18efektów jeśli chcielibyśmy stworzyć przyciski

4:22takie które na przykład dodają coś usuwają zmieniają

4:27zachowania naszej strony mają jakiś efekt powinniśmy użyć elementu button

4:31jak widzisz nie ma tutaj różnicy ale takie przyciski nie

4:35powinno już być wciskane automatycznie poza tym takie

4:40przyciski możemy dodać tutaj zawsze opcje disable czyli

4:44mogę któryś z przycisków na przykład dodamy

4:48sobie admin mogę ustawić disabled

4:53i taki przycisk będzie szary jak widzisz tutaj zmienia się kursor widać że

4:57on jest niedostępny nie mogę go kliknąć nie możemy czegoś takiego zrobić ze

5:03zwykłym linkiem on wygląda niedostępny wygląda że nie

5:07można go kliknąć ale jakikolwiek automat jakikolwiek skrypt

5:11czy wtyczka może nadal z takiego linku skorzystać okej

5:15czyli zostawimy sobie w ten sposób taki zwykły tu jest pasek z linkami

5:20i teraz co jeszcze jest dostępne jeśli chodzi o interakcje

5:24w angular material kolejnym przykładem

5:29którego użyjemy example jest to div

5:33albo chciałam pokazać jeszcze jedną możliwość jeśli mamy nawigację szczególnie górną

5:37i dolną czyli paski na górze i na dole zamiast skorzystać ze zwykłego diva mamy

5:42taką możliwość żeby użyć specjalnego tutaj modułu mat toolbar

5:46module który zawiera właśnie komponenty pasków nawigacyjnych

5:50górnego dolnego paska nawigacji i teraz wygląda

5:54to w ten sposób czyli tutaj zamiast div użyje mat toolbar

5:59i powinien się pojawić pasek nawigacji domyślnie ma tu

6:03jakiś kolor taki szary i teraz kolejne linki umieszczę

6:07na takim pasku nawigacyjnym zobaczymy jak to będzie wyglądało czyli podobnie

6:11tutaj buttony nie będą miały już href jeżeli trzeba możemy akcję

6:15kliknąć dodać tego na razie nie będę robił tutaj możemy w takim pasku mat toolbar

6:20umieścić jakieś interakcje read more

6:25i mogę umieścić na przykład przycisk select czyli mamy

6:29dwa przyciski read more i select one się pojawiły tu z prawej strony

6:33zadziałało justify-content okej i

6:38teraz tak te przyciski mają jakby równą wagę

6:42jeden jest ważniejszy drugi z mniej ważny tutaj select jest akcją

6:46jest to coś jest to coś co jako użytkownik chcielibyśmy żeby uruchomił wybrał read

6:51more jest akcją drugorzędną ważniejszy jest select możemy więc brać różne

6:55rodzaje przycisku możemy użyć mat button mogę

6:59użyć właśnie jednej z tych opcji tutaj czyli raise

7:03button flat button stroked button i teraz opcja stroked obrysuje

7:11nam ten przycisk czyli dostajemy taką wersję lekko oznaczoną lekko

7:15wyróżnioną flat sprawi że

7:20ten będzie miał kolor i teraz ten kolor domyślnie jak widzisz jest tutaj biały możemy

7:24jednak wybrać mu ten kolor w ten sposób czyli jeden z

7:28kolorów skórki może być to primary może być to accent czyli możesz

7:33jakiś domyślny kolor ze skórki wybrać jak widzisz ten przycisk od razu się wyróżnia

7:37jest on ważniejszy od tego przycisku read more czyli

7:41mamy taką możliwość i dodam sobie jeszcze jakiś przykład żeby

7:46pokazać właśnie różne poziomy wagi przycisków też

7:50jakoś sobie to wyróżniamy czyli powiedzmy dodam sobie tutaj czyli

7:55dodamy sobie jeszcze jakiś tekst powiedzmy priorytety okej

8:01priorities świetnie i w drugim przykładzie także

8:06użyję dwóch przycisków i będzie to powiedzmy

8:11show details czyli też jakoś drugorzędny przycisk

8:15i tutaj dodam przycisk który będzie bardzo ważny mianowicie będzie to add to

8:19cart teraz wewnątrz przycisku oprócz tekstu ja mogę

8:24umieścić nawet ikonę powiedzmy w ten sposób mogę

8:30ikonę użyć wewnątrz przycisku i jeśli ten

8:35przycisk jest zwykły można

8:40mu kolor ustawić ma on ikonę więc na pewno się wyróżnia aczkolwiek

8:45gdybym spróbował to jeszcze raz zrobić i

8:49zamiast głównego koloru ustawił accent przycisk

8:54tu będzie miał inny kolor niż wszystkie pozostałe elementy na stronie dodatkowo użyję

8:58opcji flat wyróżnia

9:03się on bardziej jeszcze oprócz tego możemy użyć opcji podniesionego

9:08przycisku raise button więc on jeszcze bardziej się wyróżnia więc

9:13teraz jeśli masz kilka akcji dostępnych dobrą praktyką

9:17jest prowadzi użytkownika i wskazywać mu najbardziej pożądaną

9:21akcje domyślną akcji którą chcemy żeby wykonał żeby nie musiał się zastanowić wybierać

9:25między pięcioma opcjami pytamy się użytkownika czy chciałbyś użyć tego

9:29domyślnie opcji jeśli nie to jeszcze masz opcje dodatkowe i

9:34tu użyjemy jeszcze jednego przykładu skopiuję sobie któryś z tych pasków i

9:42tych wyborów może być jeszcze więcej mianowicie jeśli mam

9:46tutaj dwa przyciski stworzę sobie tym razem trzy przyciski pierwsza

9:50opcja to będzie powiedzmy delete druga

9:55opcja to będzie save draft czyli zapisz

9:59szkic i trzecia opcja to będzie send i tutaj jako akcja domyślna

10:04też wyróżniamy send dodamy jakąś ikonę wyślij

10:09wyślij zobaczmy jak ten pasek wygląda jak widzisz

10:14już wszystkie ikony są obok siebie i gdyby nie właśnie ta ikona

10:18wyróżniająca wszystkie przyciski są jakby na jednym poziomie mają jedną wagę jak tutaj

10:22je rozróżnić po pierwsze wszystkie akcji niebezpieczne takie jak nie

10:27usuń wyczyść wszystko co może utracić dane możemy

10:31dać color warning który jest także pobierany

10:36z domyślnie palety kolorów jak widzisz jest czerwone akcja

10:40jakby drugorzędna możemy właśnie użyć obramowania

10:44a akcja pierwszorzędna możemy użyć wyróżnienia czyli na przykład flat albo

10:49race jak widzisz w ten sposób możemy określić poziomy ważności

10:53dla poszczególnych przycisków tutaj stworzę sobie jeszcze jakiś odstęp w

10:59ten sposób i ten przycisk damy jeszcze kolor żeby

11:05go faktycznie wyróżnić mamy trzy poziomy i teraz drugą opcją

11:09oprócz kolorów i obramowań jest jeszcze pozycja przycisków

11:14ja tu wszystkie je specjalnie do prawej strony wyrównałem dlatego że osoby czytające

11:18na przykład tu w europie od lewej do prawej właśnie

11:23ostatnia rzecz najważniejsza rzecz będzie po prawej stronie tutaj

11:27pierwsza opcja do ostatniej opcji ostatnia to jest ta którą chcemy zasugerować

11:31i teraz co możemy zrobić możemy te opcje rozdzielić od siebie ja

11:36dodam specjalny styl nazwę go spacer

11:40czyli coś co doda odstęp jako że tutaj ten toolbar

11:45ma ustawioną opcję flex display flex czego tu akurat

11:49nie mamy jak widzisz w example więc nasze przyciski tu się układają domyślnie a te ja wykorzystam we

11:53fleksie to działa tutaj opcja flex-end skorzystamy z tego i

11:57dodamy tutaj opcję flex 1 czyli rośnij malej

12:02jeśli trzeba 0% może w ten sposób jeden zero

12:07czyli ten element jeśli nie będzie miejsca będzie miał 0% czyli

12:11nie będzie zajmował w ogóle miejsca jeśli nawet będzie dostępna przestrzeń pomiędzy elementami

12:15to on się rozciągnie żeby zająć całą tą przestrzeń czyli

12:20tutaj dodam sobie ten spacer i

12:25on powinien rozdzielić te elementy i w ten sposób delete jest z tej strony tu

12:29jest nasz element który się rozciąga flex boxem na całą szerokość tutaj mamy kolejne

12:33przyciski i w ten sposób jak widzisz hierarchia ważności powstaje

12:38z kilku poziomów mamy pozycję tu się znajduje jedna akcja akcja

12:43która jest opcjonalna mało ważna nie zalecamy tu

12:47jest akcja opcjonalna jest podświetlona podkreślona i

12:52tu jest akcja główna podstawowa czyli wyślij zapisz jeśli umieszczasz ikony

12:56w przyciskach no to też warto wszędzie gdy mamy ikonę pamiętać

13:00że jeśli łączymy ją z tekstem to dodasz opcję inline jeśli

13:06nie mielibyśmy tutaj tekstu to możemy użyć mat icon button

13:13i wstawić samą ikonę ja tutaj cofnę i

13:18zostawię opcję inline razem z opisem żeby

13:22to się zmieniło na jak największą wagę czyli te ikony jak widzisz jeśli zrobimy opcję inline

13:26one dopasują się do tekstu przycisku nie będą one wystawały

13:30i miały tą samą wysokość linii poza przykładami które

13:34tu umówiliśmy istnieje jeszcze kilka innych wariantów przycisków i sposoby ich użycia

13:38ale o tym wszystkim już w kolejnych lekcjach tak więc do zobaczenia