Angular: Ikony i wskaźniki

Angular 6, 7, 8+

0:00W tej lekcji zaczynamy już korzystać z poszczególnych komponentów angular

0:05material zaczniemy od takich komponentów małych podstawowych

0:09takich jak różne wskaźniki przyciski i ikony powiedzmy

0:14że zaczniemy od ikon żeby umieścić nawet taki prosty element jak ikona musimy skorzystać

0:18z któregoś z komponentów które dostarcza nam material i ja tutaj

0:23żeby móc łatwo pokazywać tobie tego

0:27typu różne przykłady to wygenerowałem odpowiedni moduł nazwałem go sobie material

0:31examples i dodałam go do głównego app module czyli material

0:35examples module dodam mu także routing i wewnątrz tego

0:39modułu dodam komponent o nazwie indicators

0:44example a także zamontowałem go tutaj w routingu czyli routing

0:49zawiera ścieżkę pustą zawiera nasz komponent indicators

0:53w ścieżce indicators i zawiera przekierowanie żeby automatycznie jak tylko wejdziemy

0:58na stronę ładował nam się komponent indicators także z app component

1:02usunąłem wszystkie elementy żebyśmy widzieli tylko to na czym chcemy się skupić

1:06tutaj w źródłach tego kursu także powinniśmy już przygotowane

1:10taki przykładowy example component gdzie po prostu będziemy mogli sobie

1:15ładnie wyeksponować tutaj ikony czyli

1:21tutaj cokolwiek wpiszę powinno nam się to elegancko wyświetlić

1:26w tym miejscu okej mamy tutaj ikony

1:30jeśli chciałbym użyć położyć właśnie takiego komplementu jak powiedzmy mat-icon to

1:36nie mogę tego po prostu tak zrobić pamiętasz żeby używać komponentów muszę je najpierw

1:40zaimportować czyli tutaj nasz specjalnie stworzony do tego celu moduł

1:44nie mogę tego zrobić w głównym module w każdym module w którym chcesz używać komponentów

1:48musisz je zaimportować zaimportować ich moduł albo zaimportować moduł który

1:53eksportuje na przykład możesz stworzyć shared module w którym będziesz przechowywał komponenty

1:57tutaj angular material czyli tutaj importuję sobie mat icon module

2:01i nie tylko go importuję ale dołączam tutaj do importów

2:06nie do deklaracji tylko do importów mat icon modul i

2:10teraz mogę używać tutaj w html i teraz nie podaję nazwy ikony tutaj jako

2:14parametr tak też można ale mogę podać nazwę ikony tutaj na przykład menu

2:19i teraz jak przejdziemy sobie tutaj widzę o jest ikonka

2:24menu dodam jeszcze jakiś jeden przykład powiedzmy favorite

2:32person pojawiają się kolejne ikony żeby

2:36tutaj odstępu trochę dodać pomiędzy nimi to dodam jeszcze display

2:41flex i justify content

2:46space between czyli pomiędzy ikonami żeby

2:50jakaś przestrzeń powstała może

2:54w ten sposób w jaki sposób to działa podaje tekst po

2:58prostu pomiędzy tagiem otwierającym zamykającym i w tym miejscu pojawiają się ikony

3:03jeśli pamiętasz z instalacji tutaj dodaliśmy odpowiednio

3:07material icons czcionkę i działa to przy

3:11użyciu tak zwanych ligatur czyli jak zobaczymy tu sobie dokumentację

3:15angular material moduł nasz tutaj mat icon

3:20module w komponent mat icon działa w ten sposób że jeśli umieścimy

3:25jakąś ikonę pomiędzy tagiem zamykającym otwierającym to material

3:29dodaje tutaj odpowiednie klasy dzięki którym tutaj

3:33dodana czcionka material icon pozwala wyrenderować ikony i

3:38tutaj jeśli przyjdziemy sobie do linka który znajduje się w tej dokumentacji tu jest informacja

3:43właśnie o font icons czyli o czcionce która zawiera ikonę

3:47i zamiast tekstu zamiast liter innych symboli wyświetla

3:51odpowiednie znaczki i teraz mi nie używać jakiegoś specjalnego kodu tylko tak

3:55zwane ligatury na przykład jeśli masz kilka liter pod rząd i chcesz

4:00żeby one się łączyły razem no to może być ligature tutaj

4:04ligatury są użyte w inny sposób mianowicie jeśli kilka znaków występuje obok siebie pod rząd

4:08no to zastępowane są jedną ikoną czyli jeśli masz załączony tutaj styl właśnie

4:12w ten sposób jak my lub możesz samodzielnie także przechowywać całe

4:17taki właśnie styl u siebie w aplikacji to pozwala tobie po prostu

4:22na użycie klasy material icons i użycie odpowiedniej

4:26sekwencji znaków które są połączone w jeden znak z czcionki przy użyciu właśnie

4:30ligatur o ligaturach możesz to poczytać więcej jest tu

4:34też link na ten temat ligatury są bardzo dobrze wspierane

4:39w nowych przeglądarkach tu mamy

4:43też tabelkę która zawiera informację właśnie jakie wersje obsługują ligatury

4:48jeśli chcesz mógłbyś też podać kod znaku w ten sposób ale jak

4:52byłoby to bardzo niewygodne czyli wracając do naszego przykładu

4:56wystarczy że pomiędzy tagami użyjemy

5:00odpowiedniego słowa kluczowego no i te litery są połączone w odpowiednią ikonę teraz

5:04skąd wziąć nazwy ikon jeśli przejdziemy

5:09do dokumentacji material zakładkę tutaj tools

5:13i icons tools i icons no to ma tutaj bardzo fajny

5:17taki przeglądarkę galerię komponentów i możemy

5:21nie to że wybrać rodzaj ikony czy chcemy wypełnioną czy nie wypełnioną

5:25okrągłą czy kwadratową czy wielo kolorową możemy

5:29każdy z tych elementów tutaj wybrać i tutaj pod ikoną znajduje się

5:33słowo kluczowe które musimy użyć ciekawostką jest to że jest czcionka czyli jeśli użyjemy

5:38na przykład tutaj two tone albo użyjemy czcionki właśnie w

5:42ten sposób czarnej to pamiętasz są to litery

5:46jest to czcionka czyli jeśli nadamy kolor tej czcionce no to

5:51taki kolor się pojawi także na ikonach czyli

5:55powiedzmy dodam tutaj jeszcze taki icons bar dodamy

6:00mu jeszcze jakiś margines w ten sposób

6:11okej i w drugim umieszczę powiedzmy tutaj

6:15jest dom czyli zakończone i poszukamy

6:20jeszcze jakiegoś krzyżyka tutaj mamy także różne kategorie

6:24używając kategorii jest nam łatwiej przejrzeć dlatego że

6:28w tych kategoriach mamy mniej elementów do wyboru więc łatwiej

6:32nam się tutaj poruszać mamy chat content

6:37editor file i kilka

6:42innych jeszcze kategorii ja tutaj poszukam właśnie

6:47mamy check i mamy closed powiedzy że uzyjemy check

6:56tak czyli

6:57mogę użyć tutaj koloru w

7:04ten sposób jeśli użyje koloru powinien się pojawić zobaczmy jest

7:11to tutaj zielone mogę także użyć specjalnego atrybutu

7:15kolor który wybierze kolor z naszej palety czyli używając koloru

7:19na przykład warning albo primary czyli na przykład tutaj przy

7:23favourite użyje color primary

7:28natomiast do person użyjemy color accent nie muszę

7:34podawać konkretnego kodu koloru lub nazwy tylko kolor zostanie dobrany do

7:38aktywnej skórki czyli jak widzisz tutaj mamy skórkę takie mamy tutaj

7:42kolory tych ikon czyli właśnie korzystając z tego

7:46tutaj mechanizmu material design możesz dobrać odpowiednie

7:50ikony czyli ja tu powiedzmy jeszcze zajrzę do kategorii na przykład social mamy

7:55osoby grupę zobaczmy

7:59sobie jeszcze nawiagacja kategoria

8:04nawigacja mamy różne strzałki mamy takie menu pionowe

8:08more vert tu zobaczmy jeszcze coś takiego czyli dodamy sobie chat

8:16more vert okej

8:18pousuwam tutaj te niepotrzebne kolory okej

8:24i zobaczmy jak to wygląda okej

8:28mamy sobie tego różnego rodzaju ikony teraz one są tylko wskaźnikami

8:33czyli jak widzisz ja nie mogę ani w nie kliknąć mogę je zaznaczyć jak one zachowują się

8:37jak tekst jeśli skopiuje wkleję jak widzisz zostaje dokładnie tekst

8:41który się znajduje pod tymi ikonami co musimy zrobić żeby one

8:45były bardziej użyteczne ikony mogą istnieć samodzielnie

8:49w ten sposób jako jakieś elementy właśnie nawigacji mogą

8:55także być elementem tekstu czyli powiedzmy że jeśli

8:59tutaj dodamy sobie akapit w

9:10ten sposób to ikonę mogę gdzieś pomiędzy czyli

9:15na przykład w ten sposób tylko jeśli ikonę umieszczę po

9:19środku w tekście ona będzie no właśnie dość duża jak widzisz

9:24po większy tutaj rozmiar linii nie wygląda to zbyt elegancko jeśli

9:28ikona chcę żeby była częścią tekstu znajdowała się gdzieś w tekście lub

9:33przycisku lub innym elemencie który właśnie jest liniowy tekstowy to

9:37musisz podać odpowiednie atrybuty inline i ten atrybut inline

9:41taka ikonka jak widzisz dopasowuje się do rozmiaru tekstu i wygląda

9:45to już bardzo elegancko możemy teraz na przykład użyć

9:49ikonek w ten sposób okej czyli

9:54jest to jedna możliwość możemy także ikonki połączyć z innymi komponentami

9:59na przykład do naszego app module ja tutaj material examples module

10:04dodam jeszcze jeden module będzie to mat powiedzmy

10:08batch module i mat tooltip tooltip

10:16module i możemy tutaj na przykład do tych przycisków indicator

10:20example component możemy dodać na przykład odpowiedni tooltip i

10:26powiedzieć że to jest na przykład main menu to

10:33jest powiedzmy contacts tu

10:43będzie powiedzmy messages i tu

10:48będzie mat tooltip more

10:53options i teraz wystarczy dodamy sobie mat tooltip do takiej ikony

10:57i teraz najeżdżając na element widzisz dostajemy odpowiednio tutaj

11:02taki chmurkę z informacją i bardzo ciekawe że ona właśnie od razu sama znika

11:06i jej pozycja tutaj powinna dopasować się do ekranu czyli jeżeli na przykład jesteśmy wyżej albo

11:11niżej to ta ikonki te tooltipy będzie tak pojawić

11:15żeby one nie wychodziły gdzieś poza ekran żeby były zawsze widoczne a ten angular

11:19sam dopasował taką pozycję żeby była najlepiej widoczna

11:23co możemy jeszcze zrobić powiedzmy że tutaj mam ilość wiadomości

11:27albo jakieś zaproszenia to możemy dodać także

11:31mat batch i tu mogę podać

11:35na przykład wartość że mamy kilka

11:40nowych zaproszeń na przykład dwie osoby nowe nas zaprosiły

11:44pojawi nam się tutaj taki komunikat tak samo mogę powiedzieć że mamy

11:48nieodczytana wiadomości na czacie ten mat batch może

11:55także mieć kolor czyli możemy na przykład uzyć sobie któregoś z kolorów

11:59na przykład naszego accentu naszej skórki

12:03i pojawił się widzisz on jak widzisz w innym kolorze niż tutaj domyślny kolor występuje

12:08on także w kilku rozmiarach czyli możemy na przykład dodać sobie tutaj

12:16informacje jakąś i

12:21mamy wariant big medium i small czyli tutaj

12:27to inline jak widzisz nam nie działa elegancko spróbujmy small i jest

12:35to mniejszy rozmiar tak czyli możesz używać tych etykietek

12:39w rozmiarach różnych i w różnych kolorach możemy

12:46używać tooltip'ów nie mniej są to tylko wskaźniki tak

12:50ale nie mogą w żadną interakcję wejść nie mogę tego odczytać one tylko informują

12:54nas o pewnym stanie jeśli chcielibyśmy wchodzić w interakcje z tymi elementami no

12:59to musimy zrobić tutaj wersję bardziej interaktywną i do tego będą

13:03potrzebne nam przyciski ale przyciski omówimy już w kolejnej lekcji tak

13:07więc do zobaczenia