Angular: Listy szczegółów i akcji

Angular 6, 7, 8+

0:00W tym momencie powinieneś już znać komponent mat list i powienieneś widzieć jak

0:04konstruować takie proste listy czy to listy z kilkoma

0:08wierszami czy z kilkoma kolumnami w tej lekcji pójdziemy

0:12o krok dalej i spróbujemy zbudować takie bardziej na właśnie zaawansowane

0:17rozbudowane przykłady list ja tutaj pozwoliłem sobie stworzyć

0:21dwa nowe komponenty simple contacts list component który

0:25znalazł się w katalogu components czyli wszystkie elementy wszystkie strony

0:30znajdują się w pages czyli komponenty które są podpięte do routingu

0:34umieściłem w katalogu pages żebyśmy widzieli których komponentów możemy nawigować

0:39natomiast tutaj komponenty pomocnicze komponenty wizualne znajdują

0:43się w ostatnim katalogu po prostu components i te komponenty wymagają jakiegoś rodzica

0:47mianowicie jeśli przyjdziemy na przykład do simple contacts list component tutaj

0:52musi znajdować input input pozwala rodzicowi przekazać dane i bez tego inputu

0:56ten komponent niczego nie wyświetli ten komponent tutaj wyświetla naszą poprzednią listę

1:01i tutaj kontakty ładuje po prostu przez input czyli

1:05musi dostać od rodzica więc nasz list example component właśnie

1:10do simple list tutaj przekazuje kontakty jako parametr

1:14i jeśli spojrzymy na nasz przykład wygląda identycznie jak poprzednio mamy

1:18też listę mamy dwie kolumny tym razem jednak ona ta lista jest zawarta

1:22w dodatkowym komponencie jest to simple list i

1:26w ten sposób zbudujemy jeszcze jeden przykład tutaj mam wygenerowany jeszcze

1:31jeden komponent tutaj go wyświetlę jest

1:35to app contact details list i w przeciwieństwie do

1:39tej listy która zawiera wiele kontaktów i pokazywała tylko pojedyncze

1:44małe informacje dla każdego kontaktu ten

1:48tutaj komponent będzie zawierał jeden kontakt czyli

1:53szczegóły jednego kontaktu czyli przekażę mu na przykład contacts i pierwszy element

1:58z naszej tablicy kontaktów oczywiście żeby to zadziałało ten

2:02komponent musi posiadać odpowiedni input kontakt

2:08i dam mu też typ tak czyli zaimportuje

2:12interfejs contact z naszej usługi abyśmy tu mieli informacje

2:17szczegóły jak wygląda ten obiekt kontaktu okej czyli jeśli mamy ten komponent

2:21tutaj skorzystamy także z listy ja pozbędę się tego napisu

2:26użyjemy mat list podobnie jak ostatnio mat list item

2:32powiedzmy w podobny sposób i umieszczę powiedzmy trzy takie

2:36elementy mat list item razy trzy i teraz lista

2:40oprócz zwykłego tekstu tak jak poprzednio oprócz kolumn może zawierać inne

2:45elementy ja zacznę jednak od umieszczenia tutaj tekstu czyli

2:49będzie to div i pamiętasz mat line czyli nasz główny

2:53element listy właśnie ustawiliśmy na atrybut mat line i tu wyświetla nasz kontakt i

2:58powiedzmy name no i analogicznie dodam takie informacje

3:02tu do pozostałych i spróbujemy tą listę nieco ubogacić

3:07o coś więcej niż sam tekst czyli mamy tutaj

3:11name powiedzmy email

3:16tu spróbujemy coś innego jeśli

3:19nie mamy phone powiedzmy to w

3:26ten sposób czyli sprawdzimy czy jest to telefon jeśli nie

3:30ma telefonu to wartość domyślna

3:34on tutaj krzyczy bo on wie z tego typu że nie mamy telefonu więc można

3:39by do naszej serwis dopisać

3:44że opcjonalnie może być to jeszcze telefon oczywiście telefon

3:49jako string bo może zawierać już myślniki nawiasy i tak dalej okej

3:54czyli nasz details tutaj może teraz zawierać telefon

3:58telefon jest opcjonalny my chcemy sprawdzić czy istnieje możemy zrobić to w

4:02ten sposób tutaj wyświetlić domyślną wartość no phone details i

4:07teraz każdy element może zawierać na przykład tutaj jeszcze ikonę czyli

4:11powiedzmy tutaj chcielibyśmy mat icon w ten

4:16sposób mat icon i powiedzmy person zobaczmy

4:23majka miles i ikona znajduje się

4:27pojawia się z tej strony jak pamiętasz mat line to jestem główny element

4:32on się pojawia z lewej strony zajmuje dostępną całą szerokość wszystkie pozostałe elementy

4:36są automatycznie przenoszone na tą stronę jest to ok gdyby

4:40to był jakiś przycisk czy informacja ale może chcielibyśmy żeby ikona faktycznie tutaj

4:44znajdowała się przy każdej pozycji jeśli chcemy żeby ta ikona tutaj była

4:48częścią tej głównej informacji no to musimy dać odpowiedni tutaj atrybut będzie

4:53to mat list icon i jeśli zrobimy to w ten sposób ikona

4:59znajduje się po tej stronie tu spróbuję jeszcze jakieś ikony znaleźć czyli

5:03powiedzmy email czyli spróbujmy wszystkich tutaj wyszukać email mamy

5:09dwa warianty mamy email voicemail i

5:17alternated email okej czyli spróbujemy tutaj ikonę

5:22też dodać w tym miejscu email

5:29i tu spróbuję dodać ikonkę dla telefonu zobaczymy

5:34czy jest taka ikona jest kilka

5:38nawet telefonów zobaczymy jak to wygląda czyli jak widzisz karta lista szczegółów

5:43może zawierać ikonę i pewne informacje mu tu odpisać odpowiednie nagłówki że

5:47na przykład imię to email to ale jak widzisz ikony jakby oddają znaczenie

5:51tych elementów bez potrzeby tutaj dodatkowego opisu i

5:57to że ikony są tu po lewej stronie one są jakby częścią głównej informacji

6:02nie stoi zupełnie na przeszkodzie temu żeby mieć tu jeszcze ikonkę albo przycisk

6:06czyli te informacje dodatkowe te które będą po prawej stronie czyli jeśli chciałbym

6:10tu umieścić przed mat button czyli pamiętasz może być to przycisk i

6:15mat button jeszcze chcemy ikonę icon button

6:19w środku mat icon i tu powiedzmy jeszcze

6:23jest email spróbujmy przycisk email żeby można było po prostu

6:28wysłać nawet email czy wiadomość do tej osoby możemy zrobić tak że czat email

6:33może na początek email czyli powinien się pojawić to nam z tej strony jest

6:38to przycisk jest klikalny bo mógłbym podobnie zrobić tak że dla telefonu

6:42jako że jednak nie mamy tutaj telefonu to możemy zrobić przycisk

6:46żeby był disabled jeśli

6:51nie ma telefonu i tu phone

6:59i mamy szarą słuchawkę nie można jej kliknąć dlatego że

7:02nie mam żadnych szczegółów nie mamy podanego telefonu czyli jak widzisz możemy

7:07do tekstu dodać tutaj jeszcze jakąś

7:12ikonę i ta ikona stanowi część tą główną tej listy

7:16ale też nic nie stoi nic na przeszkodzie żeby dodać tu kolejne informacje

7:20kolejne kolumny tak różnie to w poprzednim przykładzie mogą być to ikony mogą być

7:24to na przykład przyciski i teraz jeśli mamy listy to takie listy

7:29szczególnie listy szczegółów mogą zawierać kilka sekcji i

7:33oczywiście możemy takie listy podzielić czyli jak pamiętasz do każdego z

7:37tych przykładów ja tu mogę jeszcze dodać mat divider czyli

7:43taki rozdzielacz te elementy będą podzielone elegancko

7:47tutaj takimi właśnie kreskami ale mamy jeszcze jedną

7:51fajną rzecz mianowicie powiedzmy że chciałbym tutaj jeszcze jeden element dodać czyli

7:56powiedzmy mat list

8:01item i tu

8:05w środku umieścimy div który będzie zawierał klasę mat line okej

8:13i tu powiedzmy że co tam jeszcze zostało to pozycja tej osoby czyli

8:17zrobimy sobie contact contact

8:21position zobaczmy marketing

8:28no i tu wypadałoby jeszcze jakąś ikonę pozycji dodać a tu pożyczę sobie jeszcze ten element

8:32ikonki i tu gdzieś powinno być znowu

8:37szukamy w tym narzędziu business

8:41o na przykład taka ikonka zrobimy sobie business mamy

8:49ikonę jednak tutaj widzisz mamy szczegóły personalne a tu mamy jakieś szczegóły

8:54firmowe która firma które działy i tak dalej fajnie byłoby te sekcje od siebie oddzielić

8:58i teraz możemy to zrobić mianowicie mogę tutaj dodać jeszcze taki element

9:04ze specjalnym atrybutem subheader

9:11i na przykład company details

9:19jak widzisz ten element jest tutaj szary on też jakby

9:23zajmuje tyle miejsca co element listy ale służy on do oddzielenia

9:27poszczególnych sekcji czyli mógłby na przykład taki mat sub header

9:31umieścić sobie całkowicie na górze tutaj jako przed pierwszym

9:35elementem i powiedzieć na przykład personal details

9:39w ten sposób czyli jak widzisz listy

9:44możemy wykorzystać do faktycznie listowania wielu różnych elementów gdzie

9:48te główne informacje są właśnie tutaj na początku elementu dodatkowe

9:52informacje znajdują się na środku na końcu jako dodatkowe kolumny ale także możemy

9:56pojedynczy obiekt jakąś pojedynczą porcję informacji podzielić

10:00tutaj jako wiersze i wyświetlić właśnie jako listę szczegółów

10:05i to tyle jeśli chodzi o szczegóły listę szczegółów

10:09w tej lekcji w kolejnej lekcji spróbujemy te wszystkie elementy połączyć

10:13zobaczyć co jeszcze można zrobić z listami i spróbować zbudować taki

10:17bardziej praktyczny przykład tutaj dla naszych kontaktów tak więc

10:22do zobaczenia