Angular: Kontrolki w stylu Material

Angular 6, 7, 8+

0:01Witaj w kolejnej lekcji w której pracujemy nad formularzami

0:05dostępnymi w material design w poprzednich lekcjach omówiliśmy sobie właśnie

0:09jak działa mat form field tutaj czyli pole jedno

0:13formularza z kontrolką z opisem z dodatkami w tej lekcji

0:17pokażę tobie że ten mat form field niekoniecznie musi zawierać input

0:22type text tutaj możemy użyć także innych typów kontrolek nie które

0:26działają z mat form field inne no właśnie inne nie

0:30to teraz tak tutaj mamy pole tekstowe i powiedzmy że zamiast

0:34takiego przykładowego pola tekstowego spróbujmy coś bardziej praktycznego zbudować czyli

0:39powiedzmy zrobimy sobie tutaj jakiś formularz bardziej sensowny powiedzmy

0:44niech to będzie tutaj jakiś nagłówek powiedzmy

0:51rozmiar właśnie h3 w ten sposób i powiedzmy że będziemy

0:55robili dodawanie jakiegoś zadania create task i

1:00to będzie nasze zadanie czyli pierwsze pole będzie opis zadania short

1:07description i tu jak wiesz będzie

1:11wyglądało w ten sposób czyli będziemy mieli po prostu tytuł i tu jedno pole

1:15i to pole jak widzisz jest bardzo wąskie jeśli mamy formularz który jest pionowy

1:20to możemy te pola no zastosować na całą szerokość jest

1:24tutaj delikatnie zmodyfikuję style tego przykładu tutaj mamy szerokość 80 margines

1:29tutaj ja pozwolę sobie dodać powiedzmy display

1:33flex i jeśli formularz ma być pionowy

1:38ma być on kolumną możemy użyć do tego flex direction

1:43column i jeśli chcemy żeby były

1:47one rozciągnięte do całej szerokości możemy także zastosować do tego flexa

1:52tutaj jest opcja stretch czyli rozciągnij zobaczymy

1:57jak to się prezentuje no i nasze pole jak widzisz ma całą szerokość a

2:01dodatkowo jeśli dodamy kolejne pola powinny one się tutaj umieścić

2:05jeden pod drugim w postaci kolumny okej to spróbujemy dodam sobie tutaj kolejną

2:10opcję mat form field w

2:15ten sposób i tym razem mu kolejne pole

2:19to nie będzie zwykły input użyje czegoś innego niech to będzie select

2:24teraz mogłbym użyć użyć selecta tego html

2:28ale muszę mu użyć także mat select i

2:34mat select może zawierać elementy typu mat option czyli

2:39analogicznie do tego co się dzieje po prostu w htmlu option

2:44może mieć value i jakiś tekst i utworzę sobie takie trzy elementy

2:48options value 1 value 2 value 3 i

2:53tutaj już dostaję błąd że mat select oczywiście nie jest rozpoznanym elementem

2:57czyli musimy go standardowo dodać tutaj do naszych modułów mat form field

3:02dodam także mat select module zaimportowałem

3:10tutaj angular material i jak tylko to zrobię i tutaj jakąś zmianę

3:14wprowadzę powinien błąd zniknąć no i teraz co to będzie ten

3:18mat select mat form field musi mieć tutaj jeszcze mat input

3:22no i powiedzmy że będzie to typ

3:26naszego zadania no i tym typem może być faktycznie

3:30zadanie czyli task może być tu jakieś zgłoszenia od

3:34użytkownika powiedzmy issue albo może być to na przykład złożenie

3:38błędu bug report okej zobaczymy jak to się prezentuje

3:45błędów żadnych nie ma mamy opis i mamy

3:49takie pole tutaj do wyboru możemy wybrać sobie jeden z typów zgłoszeń

3:54oczywiście jeśli chcesz kilka na raz wybrać to także istnieje opcja multiple

4:02tak może być to standardowo statycznie

4:04może być też dynamicznie i wtedy pojawiła nam się taka lista tutaj z opcjami wyboru

4:08żebyś mógł zaznaczyć kilka więc jest też zachowuje się to tak jak html ale

4:13wygląda jak material design włącznie z animacjami i stylami

4:17kolorami material my akurat tutaj nie potrzebujemy

4:21tej opcji multiple więc się jej pozbędę czyli jak widzisz możemy użyć także nie

4:25tylko input możemy użyć select możemy użyć także innych rodzajów

4:29kontrolek dodam sobie kolejną rzecz kolejnym

4:33elementem będzie powiedzmy mat radio group

4:38czyli grupa takich przycisków radio okrągłych gdzie możemy tylko

4:42jeden z nich wybrać dlatego musimy je otoczyć takim mat radio group żeby on

4:46wiedział tutaj że te wszystkie elementy tworzą grupę i który z nich akurat

4:50ma być zaznaczony czyli mat radio button

4:55jest to komponent jednego przycisku radio tutaj musimy ustawić mu kolor

4:59jeśli chcemy i

5:03także jakieś value i stworzę też powiedzmy

5:07trzy takie elementy value jeden value dwa value

5:12trzy będzie to powiedzmy poziom naszego zgłoszenia no

5:17właśnie i tutaj nie mamy placeholder bo to nie jest element czy

5:21jeśli chcemy dodać tutaj jakiś opis to muszę zrobić osobnym elementem na przykład

5:25nagłówkiem h5 powiedzmy priority naszego

5:30zgłoszenia czyli będzie to low medium lub

5:38high oczywiście tutaj mi krzyczy na czerwono że nie

5:42jest zesterowany odpowiedni moduł więc standardowo

5:46jak już wiesz mat radio

5:52module błąd powinien

5:55zniknąć i teraz żeby to ładnie wyglądało żeby nam się nie rozjeżdżało bo w tym momencie

5:59no widzisz tutaj się to tak jakoś zbija w grupę

6:03to zrobimy tak że mat radio button jeśli

6:08chcemy żeby układały się one w poziomie jeden obok drugiego no to musimy

6:12dodać im tu jakiś styl czyli powiedzmy jeśli radio

6:17button jest obok drugiego radio buttonu to tu wprowadzimy taką małą

6:22korektę czyli powiedzmy margines po

6:26lewej stronie i jak pamiętasz tutaj jednostki

6:31żeby były wielokrotnością na przykład ósemki albo czwórki żebyśmy

6:35mieli wspójny to i mamy element radio jak widzisz tylko jeden

6:39z nich może być zaznaczony w tym samym momencie okej tutaj

6:44jak widzisz mat form field nie mogę użyć gdybym spróbował to zrobić to

6:54dostanę błąd że mat form field

6:59musi zawierać mat form field control i tutaj nawet próba inputa

7:03nie wiem czy to nawet ma sens tak

7:07to nie działa czyli jak widzisz tutaj form field działa z elementami

7:12które są podobne do oinputa czyli input select ale już radio group

7:16nie radio group nie jest tutaj form fieldem czyli nie możemy użyć ani label ani

7:21placeholder jest to troszkę inny rodzaj kontrolki podobnie

7:25ma się rzecz że no właśnie nie tylko radio buttonami ale

7:29podobnymi czyli checkbox jeśli chcę użyć checkbox'ów tutaj spróbuję zrobić

7:33to jeszcze raz czyli powiedzmy też nie ma h5

7:37ustawimy sobie jakieś opcje options

7:42i będzie to mat nie radio tylko checkbox

7:50i checkbox nie musi być w grupie dlatego że

7:53checkbox mogą być od ciebie zupełnie niezależne więc mogę po prostu utworzyć też powiedzmy

7:58ten color utworzę trzy

8:02i one tutaj nie muszą tworzyć grupy nie muszą być otoczone jedną

8:06grupą ustawmy sobie jakieś opcje powiedzmy czy to jest płatne zadanie bo

8:12powiedzmy robimy aplikacje dla freelancerów chcemy wiedzieć czy to jest praca na

8:16portfolio czy praca którą dany klient zapłaci czy

8:20jest to bloker czy nas to zadanie blokuje czy jest to priorytet

8:24czy jest to zadanie jakieś techniczne czy

8:29nie jest to technicznie i oczywiście znowu musimy dodać odpowiedni moduł

8:33mat checkbox module

8:40importujemy z angular material błąd powinien zniknąć teraz

8:45to pytanie tylko czy będą się nam jakoś też stylami nie

8:49pomieszają nie jest źle i tutaj one pokazują

8:53nam się w pionie odstępy się zgadzają i te

8:57elementy pojawiają się w pionie dlatego że jak pamiętasz ustawiliśmy tutaj flex column

9:02czyli każda kontrolka pojawia się ta jedna pod drugą te

9:07elementy pojawiają się w poziomie dlatego że są otoczone właśnie tutaj dodatkowym radio

9:11group gdybym ja spróbował te checkboxy otoczyć także w jakiegoś diva

9:15powiedzmy w ten sposób tutaj nie powinna być tego flex column

9:19i te elementy nam będą się próbowały ułożyć obok siebie no i znowu nam się pojawia problem tutaj

9:24odstępów więc mogę to szybko skorygować i po prostu analogicznie

9:28tak mieliśmy radio button tak samo spróbuję

9:32tutaj z mat checkbox jeśli są dwa pod rząd obok siebie no to dodaj im

9:37margines 16 tutaj

9:42coś nie tak okej spróbujmy także już nie są o tu zgubiłem możemy

9:47obok siebie lub wszystkie po pierwszym

9:53też zadziała takie coś i teraz są ładnie

9:57w różnych w różnych odstępach więc musisz zdecydować po prostu czy te pola formularza

10:01interesują cię żęby były obok siebie czy jedne pod drugim tak

10:05naprawdę teraz zarówno options jak i priority musimy otoczyć jeszcze dodatkowym

10:10element i znowu zmienić kolejność tak znowu zmienić kierunek

10:14flexboxa czyli z kolumny w wiersz z

10:18wiersza w kolumnę możemy bardzo fajnie sobie layout tutaj poukładać one są jeden obok

10:24jeden pod drugim byśmy teraz tutaj zmienili options

10:32powiedzmy zrobimy sobie options container i

10:38znowu zmienimy kierunek czyli powiedzmy options container

10:42display flex odstęp

10:48z tej strony byłoby ok no

10:53i nie wygląda to najgorzej tutaj można by też w inny sposób to poukładać na

10:58co chciałbym uwagę żebyś zwrócił żeby zwróciła uwagę to jest fakt że

11:02każdy element tutaj ładnie jest ostylowany przez angular material ale

11:07sam layout samo rozmieszczenie pozycja rozmiary tych elementów no

11:11to już potrzeba na na programiście na projektancie tak czyli

11:15angular tutaj nie narzuca nam pewnego layoutu nie ma de facto narzędzi tutaj

11:19angular material jak to poukładać dlatego że to może być na tablecie inaczej

11:23na mobilnych inaczej tak dalej może też różne wymagania różne aplikacje więc

11:28tutaj musimy layoutem się zająć oczywiście są gotowe frameworki narzędzia o tym sobie może też wspomnimy

11:32tutaj chciałem żebyś skupił się właśnie żeby skupiła się na

11:36poszczególnych elementach jak one są ułożone no to z tym zawsze możesz sobie tutaj

11:40pokombinować można też dużo urządzeń to w różny sposób responsywny

11:44dostosować wracając do formularzy tutaj dodam

11:48jeszcze jeden typ który często pojawia się w formularzach czyli

11:53tutaj jeszcze raz i teraz znowu użyję mat form field bo

11:58jest jeszcze jedno pole które możemy umieścić w mat form field jest to text area

12:02text area i teraz nie mam w mat text area mam po prostu text area

12:06możemy tutaj wiersze i kolumny ustawić ale pokażę

12:10tobie inny sposób text area ona

12:14ma placeholder czyli na przykład description naszego zadania opis description

12:21no okej i mat input i

12:28teraz zwróć uwagę że nie podałem wierszy i kolumn więc ten description jest tu taki

12:32mały i tu się nam takie brzydkie przewijanie

12:36pojawia użytkownik mógłby sobie rozciągnąć to

12:40nie ma problemu no ale jednak jest to jakaś taka uciążliwość co

12:44możemy zrobić możemy uzyć specjalnej dyrektywy cdk text

12:49area autosize

12:55uwaga na duże małe litery component development kit text

12:59area autosize i jeśli dodam tą dyrektywę to

13:03ona powinna tutaj wyliczyć zawartość i w miarę jak ja pisze to

13:09automatycznie dodawać kolejne linię jeśli usuwam tekst zwróć uwagę

13:14że ładnie nam się skaluje dopasowuje rozmiarem ten element do

13:18reszty tutaj trzeba zwracać uwagę też jak tworzymy layout bloki na

13:23odstępy pomiędzy poszczególnymi blokami pomiędzy poszczególnymi sekcjami

13:27formularza żeby one się też nie sklejały czyli jak robimy sobie taką sekcję

13:31jak tutaj mieliśmy options na przykład tutaj options container no

13:35to właśnie może warto by rozważyć żeby on tutaj też miał jakiś jakiś

13:46taki odstęp zobaczmy możę trochę

13:51większy spróbujmy dwa razy tyle i nie

13:57top tylko bottom okej

14:02i teraz ten description widzisz nam tej nie najeżdża na pozostałe elementy no

14:06to mamy cały formularz do utworzenia zadania to jedyne co pozostaje nam tutaj

14:10zrobić no to możliwość faktycznie zapisania tych wszystkich danych czyli pozwolę

14:14sobie tutaj jeszcze dodać jakiś jeden element powiedzmy jakiś

14:18tutaj div z jakąś specjalną klasą form actions powiedzmy

14:24w ten sposób standardowo będzie to button żeby

14:28to był angularowy pamiętasz trzeba dodać mat button i

14:32zrobimy może dwa pierwsze to będzie cancel anuluj

14:37a drugi niech będzie create task czyli

14:42zapisz zmiany de facto niech

14:47ten będzie gówną akcją jak pamiętasz główną akcją chcemy wyróżnić tak

14:55ten zwykły button też możemy jakimś kolorem ustawić spróbujmy

15:00w ten sposób i teraz tą klasę form actions dodałem żeby te przyciski tutaj

15:04nam się jakoś tak brzydko nie ułożyły tutaj nie mamy żadnych błędów

15:08nie ma żadnych błędów coś jeszcze popsułem w przyciskach mat button

15:13no właśnie raised button

15:19color primary i te form actions możemy także przy użyciu flex

15:23boxa sobie przesunąć czyli no

15:29właśnie align items flex end wiersz

15:35i chcemy na końcu wiersza umieścić przyciski dobrze

15:41coś jeszcze mam tu pomylone items justify-content

15:45w takim razie okej czyli jak zmieniamy kierunek to musimy użyć innego atrybutu okej

15:50czyli mamy przycisk tutaj je po prawej główna akcja jest wyróżniona akcja

15:54pomocnicza tutaj nie jest wyróżniona ale jeśli jest to akcja niebezpieczna w celu anuluj

15:58usuń zniszcz no to może być na czerwono mógłbym

16:02także zostawić ją po prostu czarną ona jest mniej istotna więc będzie

16:08wiadomo że tutaj opcja jest wyjdź z tego czyli jak widzisz angular zawiera

16:12różne dostępne kontrolki i każdą można opcje parametry różne

16:17style możemy każdą z nich rozszerzyć o dodatkowe informacje których ja nie użyłem

16:21czyli dodatkowe hint label i tak dalej na co jednak

16:25chcemy cały czas zwróć uwagę że layout formularza to nie jest coś co się stanie

16:29jakby prosto automatycznie trzeba do tego jakiś mechanizm wybrać zastosować

16:33żeby te elementy ułożyć niemniej przy odrobinie wysiłku jak widzisz można stworzyć

16:37całkiem przyjazny formularz tutaj akurat na przykład do utworzenia zadania

16:41to tyle jeśli chodzi o tą lekcję do zobaczenia w kolejnych lekcjach

16:45na temat formularzy w angular material