Angular: Listy elementów, wiersze i kolumny

Angular 6, 7, 8+

0:00W tej lekcji wykorzystam jak kolejny komponent dostępny w angular

0:05material i będzie to component listy lista

0:09może być bardzo proste jak widzisz jest to po prostu lista elementów bez żadnych dodatkowych

0:13tutaj dekoracji ale lista może być też bardzo rozbudowana

0:17może zawierać wiele elementów zaczniemy od takiej tutaj prostej listy ja

0:22pozwoliłem sobie tutaj przygotować komponent nowy

0:26czyli podobnie jak w poprzednich lekcjach tutaj jest strona czyli

0:30ng generate component material example pages list example do

0:35modułu dołączony komponent i oczywiście do routingu także

0:39dołączyłem ten nasz nowy komponent list example komponent

0:44tutaj jedną różnicą będzie to że dane dla tego komponentu będziemy

0:48sobie przechowywać w przykładowej usłudze czyli ng generate

0:53service material examples katalog services i

0:57tutaj taką usługę nazwałem contact data service

1:01i tutaj użyłem takiej usługi ui faces żeby sobie zaimportować

1:05jakieś przykładowe dane te dane oczywiście powinniśmy pobierać

1:09przez api z serwera tutaj dla wygody ja te dane po prostu

1:14przekopiowałem ze strony bezpośrednio do usługi jeśli chcesz

1:18skorzystać z uifaces.com to może pobrać właśnie przykładowe

1:22obrazki avatary możesz sobie różne ustawić

1:26opcję i można też korzystać z api tutaj po zarejestrowaniu

1:30się poddajemy token i możemy wygenerować dowolną ilość różnych

1:34obrazków różnych avatarów razem z przykładowym danymi takie jak

1:38imię email pozycja i tak dalej a teraz

1:42przechodząc do naszego przykładu tutaj ta usługa ma metodę find contakts

1:47i mimo trzech kontaktów postaram się troszkę więcej załadować to

1:51będziemy zwracać tylko limit 10 czyli tylko pierwszy z brzegu 10

1:55kontaktów czyli teraz tak żeby użyć tego nasz contakts data service

1:59tutaj w komponencie mam jeszcze podstawowy html będziemy

2:04chcieli tutaj wyświetlać te elementy więc nasz komponent że

2:09mógł używać tej usługi może być private public protected i jest to

2:16usługa contacts data service

2:20w ten sposób i tu jeszcze ciekawostka stworzyłam

2:24odpowiedni interfejs dla tego kontaktu żebyśmy nam odpowiadał czy prawidłowo

2:28używam tego kontaktu czyli name position email photo i mogę sobie ten

2:33interfejs tutaj zaimportować do naszego komponentu czyli nasz komponent

2:37stworzy tutaj listę kontaktów czyli

2:43kontakt ok będzie to tablica na początku będzie pusta

2:47natomiast na ng on init czyli gdy komponent się zainicjalizuje będzie zamontowany

2:52na stronie to do tej listy kontaktów pobierzemy

2:57kontakty z naszego serwisu naszej usługi find contacts limit

3:02domyślnie 10 czyli tutaj nam się powinna już pojawić lista kontaktów

3:06a właściwie no jeszcze się nic pojawiło bo nie mamy takiej listy tutaj żeby

3:10użyć komponentu mat list oczywiście pamiętaj

3:14musimy go zaimportować tutaj do naszego modułu czyli

3:20mat list module i

3:25teraz jak tylko to dodamy no to mogę już używać w htmlu mat list

3:29i mat list powinien zawierać elementy typu mat list item

3:34oczywiście są też inne listy mają inne rodzaje elementów ale

3:39taka najbardziej podstawowa lista właśnie mat list powinna zawierać elementy typu mat list item

3:44test zobaczymy jaki jeden tutaj się zachowa nasz

3:51komponent find contacts to widzę że coś tam się nie

3:55zapisało plik mam nie zapisany błędu nie ma mamy

4:00jeden element oczywiście nie chciałem mieć jednego elementu chciałbym te wszystkie elementy z

4:04naszej listy czyli w komponencie powtarzamy

4:08ten element tyle razy ile

4:13mamy kontaktów czy dla każdego kontaktu z kontaktów

4:18wyświetlimy powiedzmy div contact

4:22name i tutaj dzięki

4:26temu interfejsowi powinien mi podpowiadać zobaczmy

4:31sobie contact name powinniśmy mieć 10 kontaktów i

4:35to się zgadza i tutaj może chcielibyśmy wyświetlić coś jeszcze

4:39mamy tutaj inne informacje o tym kontakcie jak zrobię kropkę to mi właśnie

4:43podpowiada dzięki temu interfejsowi który utworzyłem mamy email position czyli

4:47mogę position sobie wybrać e-mail i wyobrażamy sobie że

4:52te elementy się ładnie pojawią na liście jednak tak się nie dzieje bo tutaj

4:56właśnie brakuje mu informacji jak te elementy rozmieścić

5:00powrzucam tutaj tekst no to on się zachowa normalnie jak tekst czyli do

5:04prawej do lewej strony nam się wyrówna to w ogóle bez odstępów wygląda to

5:08bardzo brzydko i teraz co warto zauważyć że cały ten mat list item

5:13czy inny element listy inny typ elementów listy które mamy on

5:17automatycznie powinien być tutaj display flex czyli jeśli ja zastosuje tutaj

5:21odpowiednio na przykład flex powiedzmy któryś

5:25z tych czyli

5:29na przykład flex 1 1 100 albo flex 1 1 0 zobaczymy

5:34teraz na to jak widzisz one pięknie się ułożą w równych kolumnach dlatego że flex

5:39box każdemu z nich przydzieli odpowiednią przestrzeń jeśli ja spróbuję

5:43tutaj troszeczkę innych elementów powiedzmy pierwszy rozciągnę a dwa pozostałe zwęże

5:47no to widzisz znowu nam się wszystko nam zbija

5:51z tej strony więc można oczywiście ręcznie tutaj ustawić sobie style mógłbym

5:56na przykład zamiast w ten sposób powiedzmy w tym i w tym zrobić style

6:03flex 1 1 i 40%

6:06powiedzmy ustalić zobaczmy

6:11jak teraz wygląda troszkę lepiej ale dalej coś tu nam się rozjeżdża

6:16i oczywiście oprócz takiego ręcznego manipulowania tutaj html'em

6:20mamy jeszcze kilka innych możliwości mianowicie

6:24jeśli tutaj dodamy specjalne atrybut mat line

6:31to on określa to jako linie ja tego pliku jeszcze

6:34nie zapisze spójrzmy na razie jak wygląda html jeśli sbadam ten

6:38element to wewnątrz mat list item content

6:45znajdują się nasze trzy divy i znajduje się coś takiego jak mat list text

6:48jak widzisz mat list text jest pusty czyli ta główna treść text

6:52elementu jest pusty wszystkie nasze elementy są traktowane jako elementy dodatkowe jeśli

6:57chcesz żeby coś było faktycznie elementem listy no to musimy dać mat line

7:01i mat line w ten sposób zapisany lub w

7:06ten sposób określa główny wiersz

7:10główną treść tej listy i teraz zobacz dwa div'y znalazły się poza

7:14tym tekstem natomiast to co dodam mat line znajduje się tutaj w mat list

7:20text czyli możemy zrobić to w ten sposób może być to w ten sposób jeśli

7:24dodam mat line do każdego z nich w ten sposób mamy teraz

7:28trzyliniową trzyliniowy item to zobacz

7:32elegancko one się ułożą jeden pod drugim i teraz to co

7:36nie będzie miało mat item będzie układało się w poziomie jedno obok

7:41drugiego natomiast wszystkie elementy z mat item są umieszczone jeden

7:45pod drugim tutaj warunek jest taki że one muszą być bezpośrednio dzieckiem tego mat list item

7:49i zwróć uwagę też że odpowiednie stylowanie dopasowuje się do ilości elementów

7:53czyli mamy tutaj mat list item trzy

7:58liniowy jeśli jeden element tutaj usunę powiedzmy tylko

8:02dwa z nich będzie miało to mat line to

8:07angular tu dobierze odpowiedni styl tym razem mamy mat list item mat 2 line

8:11czyli on dopasowuje te elementy czyli możemy elementy które

8:15są jakby głównym tekstem główną treścią w pionie

8:19jeden pod drugim one dzięki temu zobacz łączą się w taką grupę wszystkie

8:23ważne informacje znajdują się w jednym miejscu natomiast takie dodatkowe informacje pomocnicze

8:28muszą w dodatkowych kolumnach ja spróbuję to sobie odwrócić czyli

8:33powiedzmy pozycję ustalimy na zewnątrz ze

8:38stylem ręcznie ustawionym na 40% natomiast email

8:43i name umieścimy jako główna kolumna czyli

8:47tu w głównej kolumnie możesz dać kilka wierszy i dodatkowe kolumny

8:51mogą zawierać dodatkowe informacje jest uwaga dlaczego w ten sposób dlatego że lista

8:56przeważnie służy właśnie do listy pojedynczych informacji jeśli masz

9:00kilka kolumn no to pytanie czy nadal chcemy listę bo

9:04zobacz przy małych urządzeniach tutaj to może znowu się zrobić na bardzo gęste

9:08nieczytelne zwróć uwagę także ten mat text on tutaj domyślnie jest przycinany

9:12przy małym ekranie tak czyli te dodatkowe informacje które mają ustawione stały flex

9:16one zaczną kasować tą główną informację przynajmniej ją przycinać

9:20czyli ten główny tekst może być bardzo długi to może być kawałek wiadomości opis

9:25tytuł zostanie on przycięty natomiast po prawej stronie mam takie właśnie rzeczy

9:29jak tagi etykiety przyciski coś co nie może być przycięte jednak

9:33uważaj dlatego że na małych ekranach po prostu może się to wszystko nie zmieścić możemy

9:38na przykład tutaj jeszcze dodać powiedzmy w ten sposób jeszcze jeden wiersz

9:42nie będę go powtarzał i dodać tu na przykład opisy kolumn czyli

9:46w pierwszej kolumnie będzie to name razem z emailem a

9:51w drugiej kolumnie będzie to position i

9:56tu przytniemy te elementy i

10:02wygląda tutaj to niby dobrze mamy w tej samej kolumnie ale one nie wyglądają

10:06jak nagłówki więc mamy tu jeszcze taki styl

10:10w angular material i jak

10:16mat header cell i

10:20żeby to wyglądało jak komórka nagłówka jest to szare zwróć uwagę że mają inny tutaj

10:24rozmiar z tego tytułu że ten tekst tutaj ten mat line domyślnie

10:28jest troszkę większy a kolejne dni są trochę mniejsze czyli tak jak widzisz tutaj też jest zaaplikowane

10:32sttylowanie z material design czy tu trzeba było usunąć ten mat line

10:37tylko jak tylko to zrobię i użyję na przykład jakiegoś innego stylu

10:42no to już muszę uważać żeby znowu te kolumny się zgadzały żeby ten

10:46nasz nagłówek miał dokładnie ten sam styl który ma mat line czyli

10:50musi on faktycznie się rozciągać do maksymalnej dostępnej szerokości tak

10:54samo jak mat line jeśli mam dużo informacji o takim

10:58gridzie to może nam to wszystko tutaj zlewać no właśnie jest to lista nie

11:03grid żeby to jeszcze było bardziej czytelne lub jeśli

11:07nie jest czytelne możemy także rozdzielić te elementy mianowicie mogę

11:11pod elementem dodać mat divider i

11:16pod każdym elementem dodać mat divider zobacz że dodaję go w środku a

11:20nie pomiędzy elementami naszego elementu i to umieści odpowiednie

11:24linie oczywiście pamiętaj że mat divider musimy także zaimportować

11:28tutaj do naszego modułu jeśli chcemy z niego korzystać czyli

11:32w ten sposób można budować takie typowe proste listy czyli jak widzisz mogą

11:36one mieć kilka kolumn mogą mieć kilka wierszy pamiętaj żeby te

11:40wiersze właśnie dodawać przy użyciu mat line i mat line

11:44po prostu zmienia troszkę wygląd stylowania mat line domyślnie zajmuje maksymalną

11:49szerokość więc wszystkie pozostałe elementy musisz nadać im właśnie

11:53samemu jaką szerokość flex jeśli nie chcesz żeby zostały po prostu ściśnięte maksymalnie

11:57jak tylko się da znowu jeśli mają one tego flex'a no to musisz uważać żeby przy małych ekranach ten

12:01element w którym właśnie ustawiam 40% jest

12:06szansa że one będą zakrywały ten tekst przy mały ekranach no

12:10właśnie więc musisz zastanowić się co chcesz osiągnąć i jeśli zbyt

12:14zbyt dużo informacji się tu znajduje no to pytanie czy nadal chcemy listę czy nie

12:18lepiej byłoby tu umieścić grid tabele z kolumnami a

12:22nie listę lista przeważnie powinna mieć właśnie jeden jedną informację

12:27może po prawej po lewej stronie zawierać dodatkową

12:31kolumnę maksymalnie dwie które zawierają jakieś dodatkowe pomocnicze

12:35informacje lub przyciski akcje ikony jeśli

12:40chodzi właśnie o te wszystkie dekoratory ikony przyciski o tym

12:44już w kolejnej lekcji tak więc do zobaczenia