Angular: Paski nawigacji i przycisk FAB

Angular 6, 7, 8+

0:00W tej lekcji wykorzystamy różne komponenty wskaźników przycisków

0:05i tak dalej żeby zbudować coś bardziej praktycznego zbudujemy

0:10na przykład taki pasek górny nawigacji z komponentu toolbar już

0:14skorzystaliśmy we wcześniejszych lekcjach ale pamiętasz one były tylko takim nudnym szarym

0:19prostokątem spróbujmy teraz bardziej go urozmaicić tutaj

0:23mam już przygotowane komponent pod

0:28tytułem toolbars example w module material examples w katalogu pages

0:32i taki wygenerowany świeżo komponent dodałem także do routingu

0:36przestawiłem tutaj routing że jeśli ktoś wejdzie na pustą ścieżkę

0:40czyli po prostu wpiszę sam adres bez żadnego tutaj bez żadnej ścieżki to

0:44go przekierowujemy domyślnie na właśnie ten toolbars dzięki

0:49czemu powinno to wyglądać w ten sposób że cały nasz html który tutaj mamy

0:53przykładowy także jakiś tytuł wycentrowanie wyśrodkowanie

0:57to wszystko nam się powinno po prostu pojawić w tym miejscu i

1:01teraz jeśli chcemy użyć tego naszego paska nawigacyjnego toolbar

1:05no to musisz mieć tu załączone oczywiście mat-toolbar module do komponentów

1:10w którym chcesz korzystać z tego z tych komponentów lub

1:14musisz użyć modułu który reeksportuje czyli importuje i z powrotem eksportuje będziemy

1:19także korzystać z przycisków czyli odpowiedni moduł załączony tooltip batch icon

1:23czyli te wszystkie wskaźniki interakcje z których będziemy chcieli korzystać w

1:27naszym pasku adresu czyli tutaj w naszym kontenerze

1:31dodam mat toolbar jest to nasz pasek nawigacyjny

1:36i tu mogę podać jakiś tytuł powiedzmy span

1:40dodamy sobie example toolbar w

1:45ten sposób i zobaczmy jak to będzie wyglądało mamy taki szary

1:49pasek i mamy tutaj nasz tytuł dodajmy troszkę więcej tutaj elementów

1:54mógę dać ikonę mat icon tylko jeśli ona ma być klikalna

1:58to musimy najpierw zrobić przycisk czyli button który ma

2:03atrybut mat button i jeśli jednak chcemy żeby w środku była ikona

2:07możemy użyć mat-icon-button dzięki czemu ten

2:11przycisk będzie miał odpowiedni kształt taki dopasowany do ikon znajdujący

2:16się w środku czyli mat-icon w środku i po lewej stronie będzie

2:20to przycisk menu czyli ikonę dokładnie użyjemy ikonę menu

2:26czyli taka ikona hamburgera bardzo popularna właśnie

2:30w material okej czyli mamy tutaj toolbar i pozostałe

2:35ikony możemy dodać z drugiej strony czyli w ten sam sposób jak mamy tutaj nasz button

2:39i menu po prawej stronie dodamy jeszcze kilka

2:44ikor i podobnie jak wcześniej person który będzie takim

2:48ludzikiem mogą być tu zaproszenia znajomi kontakty czat

2:52czyli jakieś powiadomienia wiadomości i powiedzmy

2:56jeszcze jeden przycisk more i ten more występuje

3:00w dwóch wariantach pionowy i poziomy tutaj chcemy takie trzy pionowe

3:04kropki które prezentują właśnie menu czyli więcej opcji ustawienia

3:09i tak dalej i ikony nam się układają tutaj obok siebie dopasowane

3:14docentrowane do lewej strony dlatego że mamy tutaj display flex i one układają się tutaj

3:18jedna obok drugiej jak pamiętasz mogę ustawić tutaj specjalną klasę spead

3:22która wstawi taki rozpychacz

3:26pośrodku spacer czy spread i ten spacer

3:30będzie rozsuwał elementy ale możemy też wykorzystać w

3:34tym celu nasz tutaj tytuł czyli jeśli powiemy sobie

3:38że mamy toolbar toolbar title i

3:43ustawimy mu flex-grow rośnij malej jeśli trzeba ale

3:47i zajmuj tylko tyle miejsca ile jest konieczne

3:52i ustawimy sobie taki taką klasę na naszym tytule w

3:58ten sposób title możemy to nawet przerobić na div w tym

4:02momencie ale spróbujmy w ten sposób no to ten toolbar zajmuje widzisz

4:06tutaj całą dostępną szerokość ale nie więcej czyli nie ściska

4:10tych ikonek ona ma tu swoje własne miejsce ale zajmuje

4:15całe dostępne miejsce po środku możemy tutaj też dodać odstęp

4:19w przednim czyli powiedzmy dam sobie jeszcze margines z prawej

4:24z lewej strony i tu polecam tak jak w specyfikacji material design żeby

4:29używać takich jednostek jak 2 piksele 4 8

4:3316 i tak dalej czyli korzystać z jednej skali

4:38czy nie wybrać sobie wartości losowo tylko

4:42przyjąć jedną z typowych szerokości typowych skali

4:46dzięki temu jeśli użyję tutaj powiedzmy 32

4:50piksele zobaczymy jak to będzie wyglądało jest tutaj

4:54jakiś odstęp możemy użyć troszkę mniej na przykład 24 albo 16

4:59czyli wielokrotności 4 lub wielokrotności 8 dzięki

5:03temu te odstępy będą proporcjonalne nie będzie nie będą rzeczy porozsuwane zawsze będą

5:07od siebie w proporcjonalnych odstępach okej ten pasek już

5:11jakoś wygląda co możemy jeszcze zrobić jak pamiętasz przy

5:16tych różnych wskaźnikach musimy dać dodatkowe informacje tak jak tooltipy

5:20czy na przykład math batch taką etykietkę damy jej

5:25color i tutaj color muszę wziąć

5:29z palety mam primary mam accent mogę dać warning który generalnie

5:33zastrzeżeń ale jest to bardzo widoczny kolor zwróć jednak

5:37uwagę że jeśli dodajemy to na przycisku które zawierają jakieś treści czy ikonkę no

5:41to jest to bardzo oddalone jeśli chcemy żeby to było faktycznie na treści

5:45której dotyczy ta ikonka proponuję tu dać na ikonie dodać

5:49a nie na przycisku i wtedy ta etykietka nam się pojawi tu ładnie w

5:54rogu żeby nam tu nie przeszkadzało dodam taki szybki tutaj trick mianowicie

5:59show notification nie show notification

6:04czyli kliknięcie w tym przycisku się wyłączało włączało te etykiety

6:09zobaczymy jak to będzie wyglądało z etykietą jak to będzie wyglądało bez

6:13etykietki czyli jeśli etykietka pokaż na przykład liczbę 2 i jeśli nie pusty

6:19string zobaczmy okej bardzo

6:23fajnie jest nadal bardzo taki nudny szary pasek z czarnymi ikonami

6:27co możemy zrobić ten cały nasz mat toolbar ma bardzo fajną możliwość

6:32bo możemy mu także wybrać w któryś kolor z palety na przykład primary

6:37color może być to accent możesz być to warning czy

6:41możemy któryś z dostępnych kolorów z palety wybrać jak widzisz ikonki tutaj treść

6:45tekst same dopasowują się czyli mają kolor który jest kontrastujący

6:50do koloru wybranego dla naszego paska okej

6:54jest to sobie taki prosty toolbar mamy tutaj możliwość właśnie

6:59ikonek ja stworzę jeszcze jeden toolbar umieścimy go

7:04pod spodem dodam jeszcze jakąś klasę example żeby mu te paski odsunąć

7:09od siebie czyli jak poprzednio margines

7:13jakiś tam odstęp

7:19i do obu pasków czyli do tego paska oraz do

7:22tego paska dodam jakąś

7:27taką klasę żeby je rozróżnić powinniśmy mieć dwa identyczne paski teraz

7:31co możemy z tym jeszcze zrobić taki pasek może zawierać wiele

7:35wierszy czyli możemy wszystkie elementy znajdujące się w tym pasku

7:39pasku umieścić w czymś takim jak na przykład mat toolbar

7:44row użyję dwóch takich elementów

7:48w pierwszym umieszczę to co było natomiast tytuł powiedzmy

7:52nasz toolbar title umieszczę w drugim

7:56i dodam jeszcze jedną klasę klasę expander albo

8:00spacer dzięki której będę mógł te ikonki

8:04z powrotem rozsunąć tak jak to się stało wcześniej czyli mamy

8:08tutaj toolbar toolbar

8:14przesunę tutaj do drugiego wiersza stąd

8:18mogę go usunąć tutaj zostawię tylko nasz spacer żeby

8:22rozsunął ikonki do prawej i do lewej i w ten sposób możemy mieć pasek który ma

8:26dwie linie tutaj coś pomyliłem mat toolbar

8:31row oczywiście czyli wszędzie gdzie mamy

8:35toobar zamienię na toolbar literówka

8:41okej czyli widzisz tutaj jest pasek który ma szerokość taką

8:45tu jest który ma taką jak widzisz tutaj jest to wcięcie nierówne więc

8:49możemy na przykład przy tym tytule powiększyć to faktycznie do 32

8:56albo jeszcze więcej może moglibyśmy nawet do jeszcze

9:008 czyli do 40 pikseli tak będziemy zawsze dodawać 48

9:04tutaj widzisz jest za duży odstęp tu jest za mały więc może

9:09zrobimy to w ten sposób że ja dopasuje to zależnie

9:13od paska czyli tutaj style bardzo brzydko

9:17ale na razie będziemy mogli sobie zobaczyć jak to wygląda i ewentualnie

9:22te style przenieść gdzieś w bardziej właściwe

9:26do tego miejsca okej tam jest 40

9:31tu może wystarczy 16 muszę poeksperymentować najpierw

9:35bo one właśnie dopasowane były do jednej granicy czyli

9:40nie wiem 44 i możemy sobie tak dopasować żeby ten

9:44odstęp tutaj był

9:48właściwy czyli nasz pasek nasz pasek adresowy nasz pasek

9:52główny pasek w aplikacji może być jeden wiersz kilka wierszy może

9:57zawierać menu ikony opis przyciski

10:01i co jeszcze tutaj jak mamy taki pasek bardziej rozbudowany

10:05to jest taki specjalny rodzaj przycisku mianowicie ja

10:09mogę tutaj w tym drugim wierszu umieszczę także spacer żeby nam to

10:13rozsunęło do prawej do lewej i pod spodem dodamy specjalny przycisk który

10:19będzie miał mat fab i

10:24damy tutaj ikony w środku powiedzmy

10:28ikonę szukania i teraz ten

10:32mat fab przycisku sprawia że pojawia się tutaj taki okrągły przycisk

10:37jak widzisz on domyślnie ma akcent czyli ma kolor akcentujący

10:41do tła i teraz ten przycisk przeważnie tak jak specyfikacja

10:45material mówi powinien być umieszczony na krawędzi przy krawędzi

10:49lub w rogu jakby elementu którego dotyczy więc jeśli ta szukajka dotyczy

10:54tego co znajduje się pod paskiem to możemy taki przycisk odsunąć delikatnie

10:58czyli margin-top i ponownie jednostki

11:03proporcjonalne 2 4 16 spróbujemy 32 piksele troszeczkę

11:08mało 60 pikseli

11:12i zobaczmy jaką ma szerokość ma 56 na

11:1756 spróbujmy 56 dokładnie użyć pikseli i

11:21to myślę że jest środek czyli jak widzisz on lekko wystaje i w ten sposób jak

11:25widzisz on znajduje się na pasku ale przez to że on wystaje z tego paska

11:29to oznacza że ten przycisk dotyczy treści która znajduje się pod spodem

11:34tak ten przycisk może znajdować na przykład w górnej krawędzi ekranu możemy na przykład

11:38w dolnej krawędzi ekranu gdzieś w rogu na przykład nad listą którą chcemy przeszukiwać

11:42może być plus dodawania takich przycisków fab należy

11:47bardzo ostrożnie z nich korzystać bardzo rzuca się w oczy tak taki przycisk robi

11:51tutaj duże wrażenie i już mówiliśmy sobie o poziomach ważności przycisków

11:55w tym jak one zwracają na siebie uwagę no to ten jest jakby najwyższy w herarchii jest to

12:00przycisk który powinien znajdować się jeden na stronienie jeśli już

12:04bardzo chcemy takich kilka przycisków tak

12:09na przykład szukaj i jeszcze zrobimy sobie plus czyli

12:14dodaj to dwa takie przyciski rzucają się bardzo w

12:18oczy i użytkownik patrząc na taki ekran musi się zatrzymać zastanowić okej co

12:22ja mam zrobić bo mam dwie główne akcje i muszę się zastanowić nie

12:26jest to decyzja tak nie tylko muszę się zastanowić która z tych opcji ma

12:30być użyta to będzie chyba add o

12:35czyli plusik jeśli to jest drugorzędna akcja możemy użyć opcji

12:41mini fab co stworzy troszkę mniejszą ikonkę cztery

12:48to mało polecam właśnie do layoutu używać 8 pikseli odstępu wielokrotności

12:528 do czcionek i marginesu przy ikonkach tych mniejszych odstępów

12:564 piksele jak widzisz ten przycisk niby jest mniejszy ale i tak widzisz jest on

13:00bardzo rzuca się w oczy więc ja bym tu nie stosował tej drugiej

13:04opcji zawsze wybieramy jedną główną opcję nie więcej

13:08i taki przycisk jak fab jest taką świetną główną opcją tu

13:13też ciekawostka bo mając ten cały toolbar ja mogę na przykład odwrócić kolorystykę

13:17czyli tu użyć akcentu a na przykład na

13:21naszym mat fab tu użyć koloru

13:26głównego i takie coś jeszcze bardziej zwraca uwagę na siebie mimo że

13:30to jest twoje straszne żółte rzucające się w oczy to nasz

13:34element mimo że ten kolor sam sobie nie jest bardziej nie rzuca się

13:38w oczy to przez to że jest na tle tego akcentu jest jeszcze bardziej wyróżniony więc

13:43zawsze trzeba zastanowić się która z akcji jest najważniejsza która z akcji jest główna

13:47która prowadzi użytkownika dalej tu jest domyślną akcją a które

13:51akcje tutaj są dodatkowymi akcjami akcjami pomocniczymi

13:56i to by były takie najważniejsze informacje jeśli chodzi o taki główny

14:00górny pasek nawigacji on oczywiście powinien być

14:04na samej górze przylegać do górnej krawędzi do prawej lewej krawędzi

14:08i tutaj jeszcze brakuje jednej istotnej rzeczy ale

14:12o tym może już w kolejnej lekcji tak więc do zoboczenia