Aplikacje no-code z Bubble: Czym są reusable elements?

0:00Witam Cię w kolejnej lekcji i mam

0:01nadzieję, że Twoje drzewko elementów tutaj na tej całej sekcji Forget wygląda

0:06dokładnie tak samo jak moje, a przynajmniej jest do niego zbliżone.

0:09Ja wiem, że taka zmiana nazewnictwa wydaje się mocno męcząca, ale wierz mi, że

0:13warto zachować porządek i odpowiednio nazywać swoje grupy.

0:17A skoro to mamy już tutaj wyjaśnione, to

0:19przejdźmy do tego, co będziemy tworzyć w tej lekcji.

0:22A więc wróćmy do projektu wzorcowego.

0:24I tym razem czeka nas budowa sekcji

0:27z Listing em, czyli listą lokalizacji dostępną w naszym serwisie.

0:31Tym razem będziemy mieć tutaj dużą grupę, która będzie stanowiła tło, ponieważ jak

0:35widzisz mam nadzieję, że to widoczne na ekranie.

0:36Mamy tutaj odpowiedni gradient.

0:39Zastosowane w środku będziemy mieć standardowo container.

0:44Oczywiście tym razem będzie to układ

0:46kolumnowy, ponieważ mamy najpierw tą całą grupę.

0:49Dla niej oczywiście ustawimy, bo tu mamy

0:51treści, tu przycisk, a tutaj odpowiednia lista naszych lokalizacji.

0:56A skoro mówimy o listach, jak widzisz

0:57tutaj różnych elementach, to jak się domyślasz, będziemy musieli zacząć pracę

1:01od najmniej przyjemnej części, czyli utworzenia odpowiedniego listingu.

1:05Znów możesz się wzorować tutaj na tej

1:08bazie danych skopiowane do tabel, gdzie umieściłem wszystkie elementy z listingu.

1:16W zasadzie opcją o nazwie Opis listing

1:19będziesz mógł sobie po prostu to skopiować i przenieść bezpośrednio do edytora.

1:23Pamiętaj, że przenosisz wszystkie kolumny

1:25oprócz tej gdy czarnej prompt, którą jak zawsze możesz wykorzystać, żeby

1:29wygenerować inne obrazki niż te, które ja dołączam.

1:32Wróćmy więc do edytora.

1:35Przejdźmy do zakładki Data 800.

1:38Jak widzisz już tutaj dodałem odpowiedni Option set o nazwie OST Listing.

1:43I przejdźmy teraz przez wszystkie te pola,

1:45czyli atrybuty, które będziesz musiał dodać.

1:46Mamy tutaj Battles, Number oraz Number.

1:49To jak widzisz jest to standardowe pole typu number.

1:52City Description to zwykły tekst jest number to znów zwykły number.

1:58Nic trudnego.

2:00Kolumna Host to zwykły tekst, natomiast

2:02tutaj mamy dwa pola, które mogą wydać Ci się nowe Image main oraz Image list.

2:08W tym przypadku oba te pola mają typ listy obrazków.

2:13Pamiętasz wcześniej dodawaliśmy obrazek.

2:14Już typ nazwał to pole po prostu image i wybrał sobie tutaj image.

2:21No to będę mógł dać tylko jeden obrazek

2:23jak to pole zamienić na listę w tym przypadku obrazków.

2:26Ale równie dobrze mogłaby być to lista

2:27tekstów, lista dat lub lista numerów albo plików.

2:32Jest to super proste.

2:34Wystarczy, że zaznaczysz ten checkbox i tym samym uzyskasz właśnie listę obrazków.

2:39Klikam Cancel.

2:41I tutaj gwoli wyjaśnienia w tym przypadku będziemy wgrywać główny obrazek.

2:47Ja ustawiłem tutaj listę of images.

2:49Nie jest to błąd, wierz mi.

2:51Przyda nam się później, więc musisz mi uwierzyć na słowo, że nie zostawiamy tego

2:54jako pojedynczy obrazek, ale właśnie lista obrazków.

2:58I podobnie robimy dla tej kolumny images List.

3:01Te pozostałe pola to standardowe wartości, czyli number i dwa razy tekst.

3:06Ja zresztą dodałem tutaj już większość rekordów do tego setu.

3:11Natomiast teraz doda Ci ostatni, abyś zobaczył jak pracować z listą obrazków.

3:16A więc wróćmy do tabletów i zacznijmy tutaj kopiować te wartości.

3:25A więc new option, create i modify.

3:29I zacznijmy właśnie to przenosić.

3:33To jest City.

3:36Mamy tutaj.

3:39Description.

3:41Odpowiednie miejsca.

3:45Tu będzie 2, 5 i 7 odpowiednio.

3:51Czyli dwa.

3:535.

3:55Oraz 7.

3:59Professional Host.

4:05PiS będzie.

4:08Przez królu i my.

4:10300.

4:11To będzie apartament.

4:14PRISM 300.

4:17Apartment.

4:18I jeszcze Type of place to będzie third place.

4:22To z tymi wartościami pracowaliśmy, więc nie ma tutaj nic trudnego.

4:26Natomiast zobacz jak dodajemy obrazki

4:27normalnie jak pisaliśmy tutaj upload i wybierzmy w tym przypadku 9.

4:321.

4:33Natomiast ponieważ jest to lista musisz

4:35jeszcze dodatkowo kliknąć add i dopiero teraz obrazek zostanie dodany.

4:39Gdybyś tego nie zrobił i kliknął save,

4:42babol całkowicie pominie to, że dodałeś tutaj jakiś obrazek.

4:45Musi on po prostu wskoczyć na listę.

4:46Właśnie klikając tutaj ten guzik add.

4:50A więc zróbmy to samo tutaj dla Images List.

4:53Czyli 9. 2.

4:57Klikamy Add i dodajemy ostatni czyli 9.

5:013.

5:05I klikamy ADD I dopiero teraz mając

5:07uzupełnione wszystkie te pola i podawane te obrazki mogę kliknąć save.

5:12I w ten sposób dodałem w moim przypadku ostatnie rekordy.

5:16Natomiast chcę abyś teraz złapał za auto video i sam po kolei dodał wszystkie te

5:21rekordy do Twojego setu o nazwie OST List Things.

5:30OK.

5:30Mam nadzieję, że masz to zadanie już z głowy.

5:33Tak, wiem, że oczywiście jest to strasznie

5:35męczące, ale niestety będziemy bardzo dużo pracować setami.

5:39Natomiast jeżeli podczas dodawania czy tworzenia tego setu o nazwie OST listing

5:44zaświtała Ci w głowie czerwona lampka, to jestem z Ciebie niesamowicie dumny.

5:49Natomiast dlaczego ona powinna zawitać?

5:51Wróćmy tutaj do naszego projektu wzorcowego.

5:54Mamy listę z lokalizacjami, z których będzie mógł korzystać nasz użytkownik.

6:00Natomiast jak pamiętasz w lekcji o setach

6:03mówiłem, że tworzymy je tylko i wyłącznie wtedy, kiedy to my jako admin sami

6:08dodajemy właśnie taki set, a nie użytkownik z poziomu aplikacji.

6:13No i tutaj się to całkowicie nie zgadza,

6:15ponieważ Ty jako admin nie będziesz przecież dodawał takich lokalizacji sam.

6:18Będą to robić użytkownicy, którzy

6:20zarejestrują się w Twojej aplikacji jako właśnie hoście, czyli wynajmujący.

6:24Natomiast w tym przypadku

6:26używamy Option Setu tylko i wyłącznie dlatego, ponieważ nie chciałem utrudniać i

6:31tak dosyć skomplikowanego materiału w tym pierwszym sprincie.

6:35I nie chciałem wykorzystywać tutaj od razu baz danych.

6:39Tym zajmiemy się w Sprint nr 2, natomiast

6:42właśnie dlatego tutaj pozostawiamy to jako sety.

6:45Dodatkowo za każdym razem, jeżeli będziemy

6:47do aplikacji tutaj dodawać jakiś set, który domyślnie powinien być dodany

6:52do bazy danych, to będę Cię o tym oczywiście informował.

6:56Natomiast myślę, że sam wyłapiesz kiedy powinien być to set, a kiedy powinna być

6:59to baza danych, tak jak miało to miejsce tutaj dla tych lokalizacji.

7:03A więc nie przedłużając wróćmy do edytora.

7:07Mamy utworzony nasz obszar jest zdefiniowany.

7:11Przejdźmy więc do zakładki Design.

7:14Ja już tutaj zacząłem pracować nad sekcją

7:16Listing, a w zasadzie nie listing, tylko listing.

7:20Powinna być tu na końcu.

7:24I tak.

7:25Mamy tutaj gradient.

7:28Dark są ustawione na top.

7:31Starting Color to kolor biały, ending color to z tego korzystaliśmy i które

7:35widzisz tutaj na ekranie jest to f 0 f f B.

7:40W środku standardowo mamy Listing container.

7:48Maksymalna szerokość 1200 pikseli,

7:51minimalna wysokość ustalona chwilowo na 600 pikseli.

7:54Ale zaraz do tego wrócimy. Padding.

7:57Standardowo. 96, 96 i 32.

8:00Po lewej i po prawej stronie.

8:02Układ typu kolumn.

8:04Odległość między rzędami 48 pikseli. Tu.

8:08Tym razem mamy oczywiście listing z Header Group.

8:13Gdzie monetarnej layout ustawiony jest oczywiście na RAW.

8:16Odległość między kolumnami to 32 piksele.

8:20A to po prostu skopiowałem sobie z tego elementu.

8:23Czyli mamy holding drugiego typu.

8:27Odpowiedni tutaj tekst mamy tutaj oczywiście ten tekst

8:33ze stylem body MD 16 pixeli 500, no i nasz standardowy przycisk.

8:38A więc skoro tą część mamy z głowy, to

8:40zacznijmy projektować taką pojedynczą kartę, którą będziemy

8:44wykorzystywać właśnie tutaj w Repeat Group.

8:48Możemy sobie ułatwić zadania.

8:51I zacząć naszą pracę od skopiowania

8:55całej tej pojedynczej karty, powiedzmy całej tej.

9:00A myśmy ją tutaj szef elementów nazwał Control Group.

9:05Ja ją po prostu kopiuję.

9:08A w zasadzie musiał to zrobić poprzez prawy przycisk myszki i wybranie kopii.

9:17I teraz ustawmy taką kartę w to miejsce.

9:20Czyli Piast.

9:23Nadajemy jej

9:24chwilowo tutaj jakąś maksymalną szerokość, powiedzmy 350 pikseli.

9:30I zacznijmy tutaj pracę.

9:32Natomiast

9:34mam nadzieję, że Twoje czujne oko zwróciło uwagę na tą część naszego edytora.

9:38Mamy tutaj informacje o błędach, dlaczego mamy informacje o błędach?

9:44Ponieważ wycięliśmy sobie tą kartę z całej Reporting Group i tutaj przekazujemy Data

9:49Source, który nie istnieje tam, ponieważ odnosiliśmy się do

9:53konkretnego elementu z danej listy Writing Group, a tu chwilowo nic nie przekazujemy.

9:57No i jest problem, ale tym się chwilowo nie przejmujmy.

10:00W ten sposób Bubble będzie informował o problemach Twojej aplikacji.

10:03Jeżeli klikniesz tutaj, to będziesz mógł bezpośrednio do nich

10:06przejść i sprawdzić co się dzieje i co powinieneś poprawić.

10:10Ale do tego jeszcze wrócimy.

10:12Na razie zamykamy to i tamto tutaj do pracy właśnie nad tą kartą.

10:17Marginesy mi się zgadzają.

10:19Tutaj ten autor też mi się zgadza.

10:21Wszystko jest tak jak trzeba, zaokrąglenie

10:23narożników jest odpowiednie, natomiast to co chcę zrobić to tak.

10:28Tu nam nie wyskakiwał ten problem.

10:30Zmieńmy to chwilowo na OZ listing i wybierzmy sobie tutaj najpierw clear,

10:36czyli prawy guzik myszki i clear, a następnie powiedzmy Sakura Heaven.

10:42I już jest lepiej.

10:44Teraz mamy tutaj pojedynczy obrazek.

10:47Nie tutaj oczywiście kliknąłem, tylko muszę przejść do tej grupy.

10:52I może tak listing.

10:54Tym razem.

10:56Pojedynczo nazywa.

10:59Listing Group.

11:04Nazwijmy to drzewka.

11:05Mamy tutaj obrazek.

11:08Tym razem będzie to parę nagród.

11:11Listing.

11:14Image Mail.

11:15Ponieważ jest to lista musimy wskazać First item.

11:18Tak naprawdę tylko jeden obrazek będziesz tam dodawał.

11:21A więc właśnie first item zostawiamy tutaj i to co chcę zrobić to tak zmienić to na.

11:30Listing.

11:33Image. Nazwa.

11:35Dodatkowo chcę ubrać cały ten obrazek dodatkowo grupę.

11:39Tym razem będzie to All in Parent container.

11:42A więc wybieramy to.

11:45Nazwijmy ją.

11:49Listing.

11:51Po prostu Image Group.

11:55Dlaczego potrzebujemy elementu parent?

11:57Myślę, że się domyślasz.

11:59Jeżeli wrzucimy tutaj do naszego wzorca,

12:02to mamy tutaj ikonkę, która nachodzi właśnie na ten obrazek.

12:06A więc.

12:08Listing Image Group Layout ustawiamy align to parent.

12:11Możemy usunąć te minimalne szerokość i odznaczyć to usunąć.

12:17Tutaj minimalną wysokość to Babel.

12:19Automat ustawił, ponieważ wybraliśmy obrazek właśnie dodatkowy container.

12:24I to co chcę zrobić tutaj, to dodać grupę.

12:29Tylko sobie ją odpowiednio muszę namierzyć.

12:33Dodajmy tu grupę.

12:36Nazwijmy ją listing, a w zasadzie like group.

12:44Tym razem też będzie to Align to parent, ale chcę aby tutaj były.

12:49Stała szerokość oraz stała wysokość.

12:56W naszym przypadku będzie to 32 na 32 piksele.

13:07Kolejno wchodzimy do Appearance i wybieramy tak.

13:12Możemy odpiąć Standard Group. Nic się nie stanie.

13:15Wybieramy Flat color.

13:17Tym razem będzie to nasz kolor biały, czyli Primary Contrast.

13:23Zaokrąglenie na bardzo dużą wartość np.

13:26na 100.

13:27I chcę tutaj jeszcze dodać border 1 pixel i na stałe.

13:32Tutaj kolor dla obramowania.

13:37To, co chcę tutaj jeszcze zrobić, to

13:39dać transkrypcję na background still ustawioną na 300.

13:47Dlaczego? Ponieważ po najechaniu na taką grupę.

13:52Chcę zmieniać.

13:54Czyli DIS Group i Howard.

13:56Chcemy zmienić kolor brandu.

14:02Czyli background color na nasz kolor.

14:05Chimerę.

14:09Kolejno dodajemy tutaj ikonkę.

14:13Czyli ipconfig.

14:16Ustawmy ikonkę.

14:19Tutaj możemy zmienić język stron efekt,

14:20ponieważ będziemy zmieniać jej kolor, a więc robimy to lekko.

14:23W tym miejscu to ustawiamy 300 milisekund.

14:27Domyślnie będzie ona miała kolor Primare.

14:36A ikonka to Solar Chart i Nero.

14:39Czyli mogę sobie to skopiować tutaj i nazwać to po prostu hard icon.

14:48Wymiary w tym przypadku to 24 na 24

14:52piksele i chcę jeszcze wycenę zrobić ten element.

14:54A więc korzystam z tego środkowego kąta.

14:59I znów.

15:00Tym razem mogę się odnieść do grupy, czyli.

15:05Tutaj zacznę wpisywać link.

15:06Tak więc wyskoczył mi Life Group, czyli kiedy ta grupa.

15:10A więc element rodzica tej ikonki będzie tutaj miało stan is hover.

15:16Chcemy zmienić kolor tej ikonki z primary na kolor biały.

15:24To co jeszcze chcę zrobić, to zaznaczyć

15:25całą tą grupę like group i nieco ją odsunąć.

15:32W naszym przypadku będzie to 16 pikseli.

15:37Od góry.

15:39I 16 pikseli od prawej strony.

15:47Zerknijmy jeszcze teraz na podgląd, czy nam się tutaj to zgadza.

15:57Mamy obrazek, mamy ikonkę Tu się zmienia, jak widzisz.

16:02Całe to tło i kolor ikonki.

16:04To co jeszcze musimy zrobić to dla tej ikonki ustawić tutaj marginesy

16:08górne dwa piksele, aby była ona odpowiednia w centrowania.

16:13I teraz to górną część mamy już gotową.

16:16Możemy przystąpić tutaj do tej treści.

16:20A więc ja usunę sobie.

16:23Ten przycisk.

16:26I to co chcę zrobić, to mamy tutaj country inner.

16:29Nazwijmy to po prostu Listing Inner Group.

16:35Padding 24 na 24 piksele.

16:38Tutaj mamy wewnątrz grupę.

16:40Będzie to listing.

16:44ING Group.

16:46W tym przypadku nadajemy tutaj odstępy równe cztery

16:50piksele, czyli dokładnie zostawiamy tą wartość, która była tutaj wcześniej.

16:54Tak. Zacznijmy naszą pracę od zmiany tutaj.

16:59Najpierw może właśnie listing intra group.

17:02To nie będzie countries tylko listing parent Group Listing.

17:07Następnie to samo musimy zrobić dla tej grupy, czyli Listing Holding.

17:13Parent Group Listing.

17:16I teraz tak.

17:18To będzie panel o s Listing Display.

17:20Natomiast to nie będzie nagłówek piątego typu.

17:26Tylko body.

17:29LG.

17:3118. Mogę sobie wybrać ten styl, kliknąć Edit.

17:37Skopiować.

17:39Wrócić do dizajnu.

17:40Odpiąć i zmienić tą wartość z 700 na 500.

17:47I teraz utworzyć taki styl.

17:51Body LG 18 pikseli 500.

17:58Kolejna. Mamy tutaj body s m.

18:01Usuńmy to, bo to jest problem.

18:03To nam się jakiś.

18:06Pojawił.

18:09I tym razem będzie to tak.

18:11Parents group of Listing.

18:13City.

18:23Styl to body MD 16 pikseli.

18:27400.

18:29Skopiuje, a w zasadzie powiela ten tekst poniżej.

18:35Zmienimy to z City na host.

18:43I tym razem wybierzemy body s m 500.

18:48Czy mamy 4 setke?

18:50Nie, mamy 4 setki więc musimy znów wybrać Edit style skopiować tą wartość.

18:57Odpiąć ten styl, zmienić tą wartość na 400 i odpowiednio dodać ten styl.

19:11To co chcę zrobić, to jeszcze tak powielić ten tekst.

19:16I tym razem wybrać tutaj sam.

19:2114 pikseli znów.

19:23EDIT Tyle.

19:26Kopiujemy.

19:32A w zasadzie nawet nie, bo to nie będzie to samo.

19:35Czyli wróćmy do designu.

19:37Odepnij całkowicie ten styl i zmieńmy tą wartość na 12.

19:44Grubość na 400.

19:46Reszta pozostaje tak jak powinna i będzie to w naszym przypadku.

19:55Style Body XS 12 pikseli.

20:03Turysta i przez to.

20:06Tutaj.

20:13Tą część z tekstem mamy już w zasadzie gotową.

20:17Zerknijmy na podgląd.

20:23OK, to już jest praktycznie tak jak być powinno.

20:27Wracamy więc do edytora.

20:31I to co chcę zrobić teraz, to dodać tutaj.

20:34Nową grupę.

20:40Tylko musimy zmienić listing Inner Group Row na kolumn.

20:47Podnieśmy sobie tą grupę na sam koniec.

20:50Tą dodaną, czyli make last.

20:54I tak to, co chcę zrobić, to przede wszystkim.

20:57Ustalić, to na naszym przypadku będzie to rolą.

21:03I najpierw dodajmy tekst.

21:05Mogę zaznaczyć, skopiować, wkleić.

21:15Styl zmieniamy na rating czwartego typu.

21:19Jeżeli go posiadamy posiadamy.

21:22I będzie to właśnie Parents Group.

21:25To nam tutaj krzyczy, że nie mamy ustawionego Parents Group.

21:28To nic, ustawmy go. Czyli OZ.

21:31Listing parent Group Listing.

21:36I nie będzie to display, tylko w naszym przypadku price.

21:43Mogę tu wybrać format ed as.

21:46Nie będzie to Amber tylko karencji i znaczek karencji.

21:50Chcę ustawić na dolara,

21:52gdyż w ten sposób będzie to wyświetlane właśnie w takiej formie dolara i wartość.

21:57Klaus.

22:03Teraz mogę zaznaczyć ten tekst.

22:07Wkleić tutaj.

22:11Usunąć to w dynamiczną wartość.

22:15I wybrać w zasadzie wpisać ręcznie permit.

22:27Teraz przechodzimy do tej grupy całej, czyli grupy Slice, grupy slice Things.

22:35I oczywiście musimy zmienić nazwę.

22:37To będzie Listing Price Group.

22:45Usuńmy minimalną szerokość, dopasujemy szerokość do contentu, minimalną wysokość.

22:55A w zasadzie może nawet oznaczmy chwilowo tą wartość.

22:58Niech to nam wskoczy w ten sposób.

23:00Mamy tutaj już cena i potrzebujemy jeszcze dodatkowej grupy, aby osiągnąć taki efekt.

23:05Czyli tutaj jest cena, a tutaj mamy informację o ratingu.

23:10A więc spróbujmy może dodać kolejną grupę.

23:16Tutaj też ustaw morał.

23:20Space Ring będzie to 4 piksele.

23:25Mogę starczy Ci skopiować tą ikonkę.

23:29I tutaj wstawić.

23:31Tym razem będzie to Star a Icon.

23:34Wymiary 24 na 24.

23:39Taka nazwa ikonki linear.

23:42Usuwamy conditions, ale tutaj są niepotrzebne.

23:47I zaznaczmy ten tekst wstawiamy tutaj ręcznie.

23:50Wpiszmy po prostu cztery.

23:5395.

23:54Na razie nie przekazujemy ratingu.

23:57Zostawiamy to w ten sposób.

23:59Nazwa tej grupy to.

24:02Listing Writing Group.

24:11To stosujmy szerokość do contentu.

24:16Usuńmy minimalną wysokość.

24:19I to co jeszcze musimy zrobić, to jak się

24:20domyślasz, po prostu połączyć te dwie grupy w kolejną.

24:27Czyli group in row Container.

24:33Nazwijmy to.

24:35Listing Price.

24:39Rating Group jak najbardziej opisowo będzie to robił.

24:43Chcę odstrzelić te elementy do przeciwnych krawędzi.

24:49I zerknijmy jak to się teraz prezentuje.

24:58Już jest całkiem nieźle.

24:59Musimy odpowiednio wyśrodkować te elementy.

25:04A więc tak. Najpierw rating.

25:06Ten tekst tutaj Centrum.

25:08I to samo robimy dla tego tekstu Permit.

25:17Następnie wracamy tutaj dla całego tego kontenera, czyli listing inner.

25:22I tutaj odstępy chcę zmienić z 16 na 24 piksele.

25:28Kolejna rzecz jakiej potrzebuję to Divided.

25:31Wiesz już doskonale jak go stworzyć.

25:33Po prostu dodajemy tutaj Shape a.

25:37Bez żadnej minimalnej szerokości, a wysokość ustawiona na jeden piksel.

25:43Nazwijmy go divide.

25:50I będzie to nasz standardowy kolor, czyli Neutral 300.

25:56To co mogę teraz zrobić?

25:58To zaznaczyć sobie całą tą grupę.

26:01Listing Rating Group skopiować.

26:05Wkleić tutaj do listing i na grób.

26:09I teraz tak to będzie.

26:13Najpierw zerknijmy jak to wygląda w projekcie Test PET oraz BVS.

26:18Więc wróćmy tutaj.

26:22Gdzie to jest?

26:31Tylko zmieńmy czcionkę na Body XS 400.

26:37I tu zresztą tak samo.

26:38To też będzie Body XS 400.

26:44Zaznaczam tą grupę.

26:46To nie jest rating tylko test.

26:51I to co robię to powielam tą grupę.

26:54Jeszcze dwa razy.

26:59To będzie.

27:05I tutaj zmieniamy nawet.

27:10A tutaj będzie to baw.

27:15I odpowiednio ten sam tekst przekazujemy tutaj.

27:24To co musimy jeszcze zrobić, to dynamicznie przekazać tutaj wartości.

27:27Ale zaraz, zanim to zrobimy, to tak zaznaczmy sobie.

27:33Te trzy grupy.

27:36I grupuje to w container.

27:42Nazwijmy to listing.

27:47Info Group.

27:51Rozstrzelać te elementy.

27:55Czyli wybieramy tą ostatnią opcję na container element.

27:59To co chcę zrobić to jeszcze tak poprawić te ikonki przede wszystkim.

28:06I tak dla gest będzie to.

28:09Taka ikonka user linear.

28:12Możemy zmienić tą nazwę.

28:20Dla Beats będzie to taka ikonka sofa 3 Linear.

28:29I pozostaje nam jeszcze tutaj ta ikonka.

28:35Czyli do łazienek.

28:44To co jeszcze musimy zrobić to zaznaczyć

28:47całą tą grupę czyli listing Info group, sprawdzić czy

28:51mamy odpowiedni data Soros Listing Parent Group.

28:54Listing Zgadza się.

28:56Przejdźmy do tej grupy.

28:58Tutaj jest wybierzmy.

29:01To jest listing.

29:03Parent Group jest listing.

29:06Teraz do tego tekstu i zestawmy

29:08dynamicznie wartość z naszego tutaj listingu, czyli Parent listing.

29:14I to będzie tutaj gest number.

29:19I dodajmy jeszcze spacje,

29:21Czyli musimy zaznaczyć ten tekst, kliknąć lewą strzałkę i wstawić spację.

29:27I to sama musimy zrobić.

29:29Oczywiście bez.

29:32I Łazienek.

29:33Czyli znów Parent Group Listing.

29:36A tutaj nam się nie wskoczyło.

29:38To więc najpierw dodajemy OS listing.

29:42Teraz dopiero poprawiamy.

29:49Number.

29:50Klikam na tekst.

29:52I spacja.

30:00To jest listing.

30:02RN Group.

30:05Ja oczywiście.

30:08Niemal ta sama operacja.

30:11Czyli na początku dynamiczną wartość tego listingu.

30:17I jeszcze tutaj musimy wstawić spację.

30:21Teraz możemy przejść do podglądu.

30:26Jak widzisz wszystko niemal tutaj fajnie

30:28działa, to zerknijmy na porównanie tych dwóch grup, czyli całej tej grupy.

30:34Dating group.

30:37Jest nimi środkowa, a więc musimy ją wyśrodkować.

30:40Jeszcze chcę tylko sprawdzić, czy Listing Inter Group.

30:46Tutaj mamy właśnie listing innych grup.

30:49Czy mamy tutaj dodane tło? Nie, nie mamy.

30:52Ona musi być dodana.

30:53Jest to flat color i nasz kolor biały.

30:58Teraz podgląd.

31:03Super, niemal wszystko się zgadza.

31:05Musimy jeszcze tylko dodać tutaj zaokrąglenia na dole.

31:08A więc.

31:10Na Listing Inter Group.

31:15Potem left Right ustawione na 8 pikseli.

31:23I tak, skoro teraz kartę mamy gotową, no

31:25to jak się domyślasz jedyne co nam pozostaje to dodanie tutaj

31:29odpowiedniego repeat group i umieszczenie tych elementów tak jak powinny wyglądać.

31:35A więc Scripting Group dodajemy.

31:38Wybieramy OZ Listing.

31:42Wybieramy all of listing.

31:44Chcę, żeby były trzy rzędy i trzy kolumny.

31:52Usuwamy separator.

31:54Nie potrzebujemy go.

31:57Usuwamy tutaj to fix i ustawiamy ROF np.

32:02To nie ma znaczenia.

32:06Minimalną szerokość sobie tutaj sterujemy.

32:10Jeżeli teraz przeniósł bym całą tą grupę.

32:14Do naszego. Lepiej Think rób tak.

32:17Jak widzisz, działa to już w zasadzie tak jak powinno.

32:20Jedyne co musimy zrobić

32:22to po prostu zmienić to Sakura Heaven na Current Cell Listing.

32:28Przejdźmy do podglądu.

32:31Odświeżamy.

32:35No i mamy listę z naszym listing em.

32:38Natomiast zanim zakończymy tą lekcję jeszcze jedna bardzo ważna rzecz.

32:42Wiesz już jak dynamicznie przekazywać te

32:43wartości, czyli jak uzupełniać wartości poszczególnych tych kart.

32:47Natomiast co w sytuacji, kiedy ja

32:49chciałbym całą taką kartę używać w różnych miejscach na naszej stronie?

32:53Jak to zrobić?

32:54Z tabel jest to niesamowicie proste.

32:56Możemy stworzyć element, który nazywa się

32:59RIA Isabel Element i działa on na tej zasadzie, że może być

33:03używane bardzo w wielu miejscach i podobnie jak style.

33:07I podobnie jak Ty będziemy nim zarządzać właśnie w takim elemencie wzorcowym.

33:11A potem, jeżeli tam coś zmienimy, to

33:12zmieni się to znów wszędzie tam, gdzie wykorzystujemy instancja takiego elementu.

33:16To takie najprostsze wytłumaczenie.

33:18Wiem, że może ona chwilowo niewiele Ci mówić.

33:21Ale wróćmy do edytora i pokażę Ci, że jest to niesamowicie proste.

33:25Jedyne co chcę najpierw zrobić.

33:27Ja to zawsze robię, kiedy korzystam z reguł za element, a mianowicie całą tą

33:31grupę, którą będę chciał właśnie taki używany element zamienić.

33:34Najpierw ubieram w dodatkową grupę, obojętnie jaką.

33:37Może to być Rafał, może to być kolumna.

33:39Nieważne.

33:42I dopiero teraz taką grupę zamieniam na zabawę element a robimy to w ten sposób.

33:47Klikamy tutaj Edit.

33:51Convert Darius Abel Element.

33:55I nazwijmy to listing.

33:58Partnerkę, otruł, zabił element.

34:04Jak widzisz teraz mamy tutaj informacje, że jesteś właśnie w takim elemencie

34:09i teraz każdy taki element działa jako osobna strona.

34:14Czyli tak jakbyśmy tworzyli nową stronę w

34:15naszej aplikacji tak samo tworzymy różne ważne elementy.

34:19Do tego jeszcze wrócimy, jeszcze sobie o tym porozmawiamy.

34:22Natomiast to, co musimy zrobić w pierwszej kolejności, to dla całego tego element.

34:28Ustalić tutaj.

34:30Tej polowy element to jest GRUB a typowy content.

34:33Ma być listing.

34:35Będziemy przekazywać te pojedyncze listingu, to sobie zostawiamy.

34:40Tutaj nie musimy nic zmieniać, nie musisz zmieniać layoutu.

34:43Wszystko wskoczyło tutaj z automatu, niczym się nie przejmujemy.

34:47Wracamy do strony index owej.

34:52Przechodzimy tutaj na sam dół.

34:57To naszej repeat thing grupy.

34:59Zaznaczam.

35:01Sobie tą kartę czyli listing kart.

35:05Ją usuwam.

35:08I teraz przechodzę niżej do sekcji Receiver Element

35:12i po prostu przerzucam sobie tutaj nasz pierwszy utworzony.

35:17Ten element, czyli nasza karta.

35:20Jedyne co muszę zrobić to jak widzisz tutaj przekazać Data Soros.

35:24Czyli będzie to po prostu current cells as listing.

35:28Ponieważ już tym używanym elemencie ustaliliśmy, że ma to być właśnie listing,

35:32a tutaj przekazujemy, jakie konkretne elementy chcemy właśnie tu wyświetlać.

35:38Przejdźmy do podglądu.

35:40Odświeżamy.

35:43Jak widzisz nic się nie zmieniło.

35:45Działa to dokładnie tak samo.

35:46A my taką kartę będziemy mogli teraz

35:48używać wszędzie tam, gdzie będzie nam potrzebna.

35:51Mam nadzieję, że jest to dla Ciebie jasne.

35:53A jeżeli nie do końca, to nie przejmuj

35:56się, znów będziemy z takich używanych elementów korzystać wielokrotnie,

35:59także na pewno zrozumiesz dokładnie jak one działają i kiedy są przydatne.

36:03To by było na tyle w tej dosyć długiej lekcji.

36:05Dziękuję Ci za uwagę i widzimy się już.