Aplikacje no-code z Bubble: Repeating group - czyli jak działają listy w Bubble

0:00Witam Cię w kolejnej lekcji, której tym

0:02razem skupimy się na budowie sekcji popularnych kierunków naszej aplikacji.

0:07Tu również wykorzystamy set tak aby

0:10korzystanie z nich weszło w krew, a więc w pierwszej kolejności je sobie zdefiniujmy.

0:16Czyli przejdźmy sobie tutaj do edytora.

0:20Utwórzmy nowy set o nazwie Chaos.

0:23Countries.

0:24Znów ja stosuje właśnie takie nazewnictwo, że dodaje OZ na początku.

0:29Natomiast jakkolwiek będziesz nazywał sety, to już zależy od Ciebie.

0:33Nazywa je tak, aby łatwo się z tym pracowało.

0:36Klikamy Create i zastanówmy się jakie

0:38kolumny są nam potrzebne, czyli jakie atrybuty.

0:41W tym celu możemy przejść na r Table.

0:44Ja tutaj skopiowałem po prostu wszystkie sety jakie dodamy do naszej aplikacji.

0:49A więc tak pole display mamy wbudowane.

0:52Potrzebujemy pola Apartment.

0:54Jest to typ number one z obrazkiem.

0:57Pole z ceną też jest to typ number, a z tego pola

1:02skorzystaj tylko wtedy, jeżeli chciałbyś wygenerować sobie inne obrazki.

1:05Ja to po prostu wpisałem Ci empty z takich

1:08jak korzystałem to wygenerowania właśnie tych obrazków.

1:13Nic nie stoi na przeszkodzie abyś wkleił ten preamp do czarnej jeżeli masz tam

1:16płatne konto, ponieważ ono za każdym razem generuje

1:19nieco inny obrazek, więc może uzyskasz dużo lepszy efekt niż ja uzyskałem.

1:22W każdym razie przenieść musimy tylko te trzy kolumny Apartment Image i Prices.

1:28A więc kliknę sobie tutaj skopiuje nazwę.

1:33I to będzie.

1:35Apartment typ number tym razem.

1:40Dalej mamy Image i Price.

1:43A więc image.

1:46Typ Oczywiście image.

1:50Oraz Price.

1:54Znów typ number.

1:57I teraz zacznijmy dodawać nasze poszczególne kraje.

2:01Będzie to Franz.

2:06I od razu sobie to zmodyfikujemy.

2:10Mamy tutaj 14 1800 apartamentów.

2:15Mamy obrazek.

2:17A więc znowu z tej nest.

2:21Countries.

2:22I szukamy Franz.

2:24Mamy Franz.

2:28Cena to 64.

2:32I pierwszy element dodany.

2:35Tak samo dodajemy następne.

2:37Natomiast żeby nie tracić swojego czasu ja

2:39zastosuję magię ekranu, aby to dodać i widzimy się już za moment.

2:44Dzięki magii ekranu cały mój obszar został zdefiniowany.

2:48Mam nadzieję, że Ty też dodałeś tutaj wszystkie te kraje.

2:51Odpowiednio ustawiłeś wszystkie atrybuty,

2:53a więc możemy przystąpić do dizajnu tej sekcji.

2:56Przechodzimy do edytora.

2:58Standardowo dodajemy tutaj kolejną grupę.

3:03Znów przesuniemy ją sobie na sam koniec.

3:09Będzie to kolumny oczywiście w naszym przypadku.

3:17Countries.

3:19Container Group.

3:26Z tą różnicą, że tym razem będę chciał

3:29ustawić maksymalną szerokość na 1400 pikseli.

3:34Po to, aby właśnie cała ta nasza lista nieco wychodziła poza

3:38ten content i da nam to bardzo fajny efekt.

3:44Możemy zostawić na razie minimalną

3:46wysokość i zacząć dodawać tutaj tą pierwszą sekcję, czyli tutaj.

3:53Ten nagłówek i opis.

3:55Możemy sobie więc to skopiować.

3:58Tutaj z sekcji Heroes.

4:01Hero Top kopiuje.

4:04Wklejam tutaj.

4:07Jeszcze tylko w centrum myśli sobie całą tą sekcję Countries Container Group.

4:13I to co musimy teraz zrobić to oczywiście

4:17dla Countries container Group dodać padding i.

4:20To będzie 32. 32.

4:23Lewa. Prawa.

4:2496.

4:2696. Góra.

4:27Dół.

4:29Następnie skopiuję sobie ten tekst, czyli treść tego nagłówka.

4:38Zostawmy ją tutaj.

4:39Odepnij ten styl, ponieważ to będzie

4:41nagłówek typu drugiego, a dwa ustawienia zostają niemal takie same.

4:48Natomiast zmienia się.

4:50Tutaj rozmiar fanta to będzie 40 pikseli.

4:53Bilans Passing ustawiony na 1.

4:56Kropka 4.

5:02Zapisujemy ten styl.

5:05Jako. 2.

5:0740 pikseli.

5:12Koncentrujemy ten element względem rodzica.

5:17Teraz skopiuję sobie ten tekst.

5:23Miejmy go tutaj.

5:27W tym przypadku będę chciał skorzystać

5:29najpierw z stylu body MD 16 pikseli 400 natomiast którego tak kliknę Edytuj.

5:37Skopiuję sobie tą nazwę, ponieważ zaraz będę ją wykorzystywał.

5:40Wracam do designu, odpinam i tylko zmieniam tutaj grubość

5:44funta na 500 i zapisuję ten styl, jak się domyślasz jako body MD 16 pikseli 500.

5:53Klikam Create i to wszystko.

5:57Dla całej tej grupy.

5:59Zmieńmy jej nazwę na.

6:01Countries.

6:03Top Group chce jeszcze nadać marginesy na dole równy 48 pikseli.

6:09I zaprojektujemy sobie jedną taką kartę,

6:12ponieważ jak widzisz będą one tutaj dokładnie takie same.

6:16A więc.

6:19Wracamy do edytora.

6:21Dodajemy tutaj grupę.

6:25Nazwijmy ją Country Group.

6:32Typ layoutu to będzie kolumna. Nadajemy jej tutaj.

6:37Może teraz jakąś maksymalną szerokość?

6:41Niech to będzie powiedzmy 320 pikseli.

6:44Potem to zmienimy.

6:47Natomiast chce, żeby im się łatwiej jest tym pracowało chwilowo.

6:51To co chcę tutaj zrobić?

6:54To ma dać tutaj zaokrąglenie narożników na 8 pikseli

6:59i dodatkowo ustawić tutaj jeszcze Shadow Style na Auto Set.

7:04Wartość to będzie 0.

7:0615.

7:0915.

7:11Kolor.

7:11To będzie nasz Primary 900 ustawiony na 5%.

7:18To co chciałbym tutaj jeszcze zrobić, to

7:20po najechaniu na taką grupę chcę właśnie zwiększać odcień tego cienia.

7:26Do innej wartości, czyli przechodzimy do

7:28Condition all i dajemy nowy warunek This group is Howard.

7:33To już powinno być dla Ciebie jasne.

7:35Tym razem odnosimy się do Box Shadow Style.

7:41A w zasadzie box shadow color o ile dobrze pamiętam.

7:44Tak box shadow kolor i zmieniamy to z 5% na 10.

7:50Oczywiście musimy jeszcze zadbać o to, aby

7:52dodać dla tej właściwości odpowiednią transkrypcję.

7:57Czyli box shadow.

8:01Tutaj nazywa się to po prostu Box Shadow style.

8:04Ustalamy tutaj oczywiście wartość równą 300.

8:10I teraz możemy sobie zapisać taki styl, czyli odłamkiem standardowej grupy.

8:16I nadaję tutaj nowy styl.

8:18Nazywam ją.

8:25I zerknijmy teraz na podgląd.

8:28Odświeżamy.

8:32Przejdźmy niżej. Mamy tutaj grupę i po najechaniu jak

8:34widzisz ten cień staje się taki bardziej wyraźny.

8:38Skoro to mamy z głowy, to przejdźmy teraz do edycji wnętrza takiej grupy.

8:43W pierwszej kolejności dodajemy tutaj obrazek.

8:50I nie będziemy tutaj dodawać tego

8:52statycznego obrazka tylko dla całej grupy tej dodanej tutaj.

8:58Enter Group wybierzemy odpowiedni set.

9:03Czyli tym razem będzie to jest countries.

9:06Data wybierzmy np.

9:08Franz.

9:10Jak się domyślasz teraz tutaj przy obrazku

9:12możemy wskazać wartość dynamiczną, czyli Parent Group countries i będzie to image.

9:21Dajmy tutaj nazwę.

9:24Country img.

9:27Przejdźmy do zakładki Layout.

9:29Odznaczamy To wartość.

9:32Odznaczamy to i ustawiamy tym razem fixed radio na trzy do dwóch.

9:42Kolejno dodajemy tutaj jeszcze obramowanie, nie tyle obramowanie

9:45przepraszam, co zaokrąglić te narożniki dla obrazka u góry.

9:51Top left na 8.

9:54I top right też na 8. Przejdźmy do podglądu.

9:58Zerknijmy jak to teraz wygląda.

10:05Mamy obrazek.

10:06Tutaj coś nie wskoczyło to zaokrąglenie narożników.

10:09Zaraz zobaczymy dlaczego.

10:16Mamy Top Left 8, mamy Tomb Raider 8.

10:21I być może zaraz to tam odpowiednie wskoczy.

10:25Jeszcze zerknijmy na całą grupę, a nie na całą grupę.

10:28Dobrze pamiętam, Dodawaliśmy tutaj rundę z 8.

10:33Więc powinno to.

10:35Skoczyć.

10:38No nic, zobaczymy. Na razie zostawmy to tak jak jest.

10:40Potem jeszcze do tego wrócimy.

10:44To co chcę zrobić, to dodać tutaj kolejną grupę.

10:51To w pierwszej kolejności zaznaczyć sobie

10:52Country Group i usunąć już teraz tą minimalną wysokość.

10:56Nie musimy się tym przejmować.

10:59Teraz dla tej grupy.

11:01Zmieniamy nazwę to będzie.

11:04Country Inner Group.

11:10W tym przypadku będzie to ROW i chcę usunąć te elementy na przeciwnej krawędzi,

11:18tak jak mamy to tutaj, czyli te teksty po lewej i te informacje tutaj po prawej.

11:24A więc wracamy do edytora.

11:27Pozbywamy się minimalnej szerokości.

11:30Na razie zostawiamy minimalną wysokość i to co możemy zrobić to skopiować sobie

11:37tą grupę, gdzie mamy znów nagłówek i podpis.

11:43Wstawić tutaj.

11:46I to będzie.

11:49Tantry.

11:51Holding Group.

11:56Będzie to kolumn.

11:58I odstęp ustawiony.

11:59Jeszcze sprawdzę sobie tutaj na elemencie wzorcowym.

12:07Nie 12 tylko 4 piksele.

12:16Następnie.

12:18Przychodzimy tutaj do tego tekstu.

12:22Odpinamy ten styl.

12:25Zmieniamy rozmiar font na 14 pikseli.

12:31Całą resztę pozostawiamy tak jak jest i nadajemy mu nazwę.

12:39Body SM 14 pikseli 500.

12:48Możemy sobie koncentrować tak jak tutaj.

12:50Nie potrzebujemy wyśrodkować tekstu, więc jest ok.

12:54Nie potrzebujemy również tego stylu.

13:01Tutaj bowiem będziemy mieć nagłówek piątego typu, a więc H5.

13:07Rozmiar fontów 20 pikseli.

13:13Grubość 600 lines passing.

13:16Takie jak być powinien.

13:18Tekst ma być wyrównany do lewej krawędzi.

13:22Neutral 800.

13:25I możemy sobie to zapisać.

13:27Czyli.

13:29A 520.

13:31Pikseli.

13:37To co chcę jeszcze zrobić, to dla tej grupy Country Healing Group, a w zasadzie

13:42nie ma elementu rodzica, czyli Country Inner Group.

13:46Dodać tutaj padding.

13:53I będą one równe 24 piksele z każdej strony.

14:03Ten element przesuwamy do lewej krawędzi, czyli nasz nagłówek.

14:08Ostatnim elementem, którego nam brakuje jest ten przycisk z ceną.

14:12A więc wybieramy sobie button.

14:18Sprawdźmy, czy on wskoczył tam, gdzie powinien.

14:21Country in Group. OK.

14:23Ma być pod tym linkiem.

14:26I teraz tutaj odpinamy sobie.

14:29Style i ustalamy własne.

14:31Będzie to 12 pikseli.

14:36Kolor tekstu.

14:38Primare 600.

14:41Grubość 600 pikseli. Flat color.

14:45Ustawiamy sobie to.

14:48Na Primary contrast.

14:52Czyli.

14:53Chcę tutaj dać kolor biały.

14:58O właśnie!

15:00Nie potrzebujemy tutaj żadnego.

15:03Cienia natomiast chce dodać obramowanie.

15:09Ustawione na Primary 600 i zaokrąglenie narożników równe.

15:148 pikseli.

15:17Teraz zostawmy sobie tutaj odpowiedni

15:20tekst, ale zanim to zrobimy to będziemy musieli przekazać to dynamicznie dane z

15:25naszego setu, więc chwilowo to jeszcze zostawmy.

15:28Przejdźmy do sekcji Layout.

15:30Zastosujmy ten przycisk tutaj Minimalną szerokość.

15:35Minimalną wysokość.

15:38Ustawiamy na 40 pikseli.

15:42A padding zmieniamy na 8 od góry, 8, od dołu 10 i 10.

15:54To co teraz możemy zrobić, to dynamicznie

15:55przekazać właśnie te wartości, Czyli zaznaczamy grupę Container Group.

16:01Jak dobrze pamiętasz, musimy wybrać najpierw Type of content.

16:04Czyli u nas jest to OST countries.

16:08I kolejno odnieść się do Parent groups oraz countries.

16:15Tutaj będzie to.

16:18Z grup.

16:18Znowu mamy tutaj dodatkową grupę, więc muszę ją zaznaczyć.

16:22Czyli Country Healing Group i znowu przekazać ten cały łańcuszek.

16:29I teraz dopiero będę mógł się odnieść w tej grupie

16:33tutaj do naszego nagłówka i będzie to parent groups oraz countries display.

16:40Oczywiście.

16:43Parent group Countries Apartments.

16:49A w przypadku tego przycisku.

16:52Będzie to połączenie.

16:53Najpierw dodajemy znak dolara.

16:55Piszemy go ręcznie, potem przekazujemy tutaj.

17:00Tą cenę.

17:03Klikam tutaj, dodaję spację i wpisuję.

17:08A wręcz pracę.

17:11Zerknijmy jak to teraz wygląda na podglądzie.

17:13Jak widzisz jest już całkiem nieźle.

17:15Musimy jeszcze dopracować kilka szczegółów.

17:17Wróćmy więc do edytora.

17:20I przede wszystkim już wiem, dlaczego ten

17:22obrazek nam się tutaj tak nie zaokrągla na rogach.

17:24To co musimy zrobić, to tutaj wybrać zoom.

17:27W ten sposób, jeżeli ten obrazek nie zmieści nam się w całej tej grupie,

17:32to Babel go odpowiednio przycina, o czym nam właśnie tutaj teraz zależy.

17:37Dodatkowo przejdźmy do tej grupy Container

17:41Group i usuńmy tutaj tą minimalną wysokość.

17:45To co jeszcze chcę zrobić, to przejść tutaj do tych apartments.

17:52I tutaj kliknąć na nazwę Apartment, następnie wybrać More i wybrać format EDS.

17:59I teraz mogę zdecydować, że Townsend Separator to będzie kropka.

18:06A miejsca po przecinku nie potrzebujemy.

18:08Klikamy Close.

18:10Przejdźmy do podglądu i odświeżamy.

18:1514 800.

18:16Zgadza się.

18:19Tylko jeszcze tutaj ten tekst jest.

18:23Brakuje nam tutaj słówka apartment.

18:29I dodatkowo to właśnie on jest w centrum

18:31zmiany, a ja chcę go przesunąć do lewej krawędzi.

18:34Teraz nasza karta powinna być już gotowa.

18:37Zerknijmy.

18:40Zgadza się, tutaj jeszcze jakaś grupa nadaje za dużą wysokość.

18:44Zaraz z tym.

18:46Zaraz o to zadbamy.

18:48Wydaje mi się, że to jest właśnie która grupa.

18:52Coś tu jest.

18:54To jest ok.

18:57A już wiem dlaczego tutaj ta grupa Country Holding Group,

19:01którą kupowaliśmy ma niepotrzebny margines na dole, czyli go wyzeruje.

19:07I to co możemy zrobić, to dla całej

19:09Country Group nadać tutaj Gap Space Ring na rogu ustawione na 16.

19:17Pikseli.

19:19Teraz przejdźmy do podglądu.

19:23OK.

19:23Jak widzisz teraz już jest niemal idealnie.

19:26Jedyne co nam tutaj pozostało to ten przycisk.

19:29Te style tutaj są strasznie okropne.

19:31Zaraz je poprawimy i musimy go sobie tutaj wyceny ować ponownie.

19:35A więc.

19:37Klikamy na ten przycisk.

19:38Przede wszystkim go trujemy.

19:40A po drugie zmieńmy te conditions.

19:42Ale ja nie chcę zmieniać tego background

19:44color na ten kolor, tylko chcę go zmienić właśnie tutaj, na.

19:49Czyli Primary 25.

19:53I to w zasadzie wszystko.

19:55Sprawdźmy, czy mamy tutaj odpowiednią transkrypcję.

19:58Mamy tylko Zmieńmy ją na 300 milisekund.

20:02Jeszcze raz odświeżamy.

20:08Teraz jest już dokładnie tak, jak chcieliśmy.

20:11Natomiast teraz wróćmy do edytora

20:13i zastanówmy się, a w zasadzie do podglądu jak osiągnąć taki efekt.

20:17Jak się domyślasz, musielibyśmy skopiować tą grupę i tak jak poprzednio wskazać OK.

20:21Teraz chcemy wyświetlić dane z tego seta

20:23nie z Francji, tylko z Egiptu, tak jak robiliśmy to w edytorze.

20:28Tutaj właśnie przy tych features group, gdzie ręcznie wskazywaliśmy data source.

20:33Natomiast musisz przyznać, że takie działanie jest mocno irytujące.

20:37Kiedy byś miał np.

20:37wyświetlić listę elementów ze swojego seta?

20:40Dla każdego musiałbyś przechodzić wskazywać ok.

20:42To jest pierwszy, drugi, trzeci itd.

20:45Więc nie ma na to jakiegoś lepszego rozwiązania.

20:47Oczywiście jest i w Babel nosi ona nazwę Reporting Group,

20:51czyli po prostu wyświetlanie grupy, którą powtarzamy X razy.

20:55Jak to działa w praktyce?

20:56Dodajemy tutaj Repeat Group.

20:59Teraz wybieramy typowy content.

21:03Następnie jest countries

21:05i tym razem mówimy, że chcemy tutaj przekazać wszystkie OST countries.

21:10Następnie musimy wskazać ile rzędów i ile kolumn chcemy wyświetlić.

21:14U nas będzie to 1 rząd.

21:17Dwie kolumny.

21:20Usuńmy tutaj tą przerywaną linię.

21:22Pomiędzy tymi elementami jest ona nam niepotrzebna.

21:24Nie potrzebujemy żadnego separatora.

21:28Czy mamy tu jakiś burdel?

21:29Na szczęście nie mamy.

21:32A więc przechodzimy do layoutu.

21:34Ponieważ w tej grupie będzie tylko jeden

21:36element, to nieważne czy ustawisz to na rogu czy na kolumn.

21:39Może to być row.

21:41Usuwamy minimalną szerokość.

21:44To co musimy zrobić teraz, to całą naszą

21:46grupę Country Group przenieść do tego Reality Group.

21:52Czyli zdefiniowaliśmy, że jeden element ma

21:54wyglądać właśnie w ten sposób, a papier będzie go powielał tyle razy, ile

21:58wskażemy tutaj właśnie na repeat group, czyli ile rzędów i ile kolumn.

22:03To, co chcę tu jeszcze zrobić, to na Country Group przede wszystkim.

22:08Pozbyć się tej maksymalnej szerokości.

22:11Jak widzisz teraz mamy problem, bo ta grupa po prostu przylega jedna do drugiej.

22:15A więc poprawiamy to sobie i dodajmy tutaj jeszcze marginesy.

22:21W moim przypadku to będzie 16 pikseli z każdej strony.

22:27I teraz zerknijmy na podgląd.

22:35OK, mamy tutaj Franz i tutaj mamy Franz. Dlaczego?

22:39A dlatego, że nie przekazaliśmy odpowiednich danych.

22:42Co musimy zrobić?

22:43Przejść do Country Group.

22:45I tutaj zamiast ręcznie wpisywać france tak jak zrobiliśmy to wcześniej.

22:50To co musimy zrobić, to powiedzieć, że current cell on country, czyli przekaż mi

22:54tutaj dane z tej konkretnej komórki, którą wyświetla się właśnie na całej tej liście.

22:59To wszystko, co musimy zrobić,

23:01ponieważ wewnątrz tej grupy wszędzie odnosimy się do Parent Group, a więc te

23:05dane zostaną tutaj dynamicznie przekazane, tak jak powinno to wyglądać.

23:09A więc przejdźmy, odświeżamy.

23:12Jak widzisz mamy tutaj już odpowiednią listę.

23:16Mamy Francję, mamy Egipt.

23:17Wszystko się zgadza.

23:19Nam potrzebna jest jeszcze długa lista, gdzie będą trzy elementy.

23:23Znów jest to super, mega proste.

23:24Po prostu zaznaczamy sobie to Writing Group, nazwijmy ją Countries.

23:30Tu kol.

23:32RG.

23:36Powielamy, czyli Ctrl+C.

23:39Jeżeli kontrolna nie działa to Ctrl+C.

23:43Container i past.

23:46Aha, zaskoczyła wam się nie ta grupa.

23:47Coś mi nie tak wskoczyła więc kontakt z.

23:50Albo po prostu tutaj.

23:53Zaznaczę całą tą kontrę jest tu RG.

23:57Kliknę Copy.

23:59Przejdę tutaj.

24:01I wkleja.

24:03Jeśli teraz chcę zmienić układ z dwóch

24:05kolumn na 3, jedyne co muszę zrobić to tutaj wskazać trójeczkę.

24:10I może jeszcze odsuniemy obie te grupy od siebie.

24:15Czyli powiedzmy dla tej Country Group, a

24:17dajmy tutaj margines na dole, powiedzmy 48 pikseli.

24:24I to samo zróbmy tutaj, na tej skopiowany.

24:2848 pikseli i tym razem będzie to countries.

24:33Free call.

24:35Group, a w zasadzie RG od Think Group.

24:43Przejdźmy do podglądu.

24:46Jak widzisz, teraz już jest niemal idealnie.

24:50Mamy dynamiczną listę, zdefiniowaliśmy jak ma wyglądać jeden taki kafelek na liście

24:54i Babel będzie go powielał tyle razy, ile razy wskażemy.

24:58W ten sposób, jeżeli tylko zmienię coś

25:00tutaj, automatycznie zmieni się to właśnie na tych wszystkich kafelkach.

25:04Natomiast mamy tutaj problem, bo tu mamy

25:05Francję, Egipt i tu też mamy Francję, Egipt.

25:08Jak to działa w Babel? Otóż Babel bierze sobie listę, którą

25:11przekazaliśmy i idzie element po elemencie.

25:14Czyli pierwszy był Francuz, potem był Egipt.

25:16Miał wyświetlić 2 i około 2 wyświetlił.

25:19Tu robi dokładnie to samo, znowu idzie od pierwszego, drugiego, trzeciego itd.

25:23My natomiast chcemy się pozbyć tego France i pozbyć tego Egipt.

25:26Więc jak to zrobić?

25:28Wracamy do edytora.

25:30Przechodzimy tutaj do Countries Free Call Group.

25:34Mamy tutaj wszystkie countries, a my je chcemy sobie odpowiednio przefiltrować.

25:37Klikamy więc More.

25:39Wybieramy tutaj.

25:41Internet może zacząć po prostu wpisywać na

25:42klawiaturze i dodajemy pierwszy warunek tzw.

25:46container.

25:47Mówimy, że.

25:49This OS countries.

25:52Display, czyli to pole display nie zawiera.

25:58Nazwy Franz.

26:02To wyeliminuje Francję.

26:03A my musimy jeszcze wyeliminować oczywiście Egipt.

26:06A więc klikamy END.

26:08I powtarzamy This os countries display talent contains.

26:14Egipt.

26:18W ten sposób wyświetlimy wszystkie te

26:20elementy, których w nazwie nie będzie ani Egipt, ani Francja.

26:23Klikam ok. Close.

26:25Tutaj przechodzę do podglądu.

26:28Odświeżam.

26:30Jak widzisz teraz wszystko jest dokładnie tak jak na naszym wzorcowym projekcie.

26:35Tu mamy dwa elementy.

26:36Tu mamy trzy.

26:38Jedyne co musimy zrobić to dodać tutaj przycisk, ale to już jest super proste.

26:44Mogę sobie skopiować ten button?

26:49I wstawić go tutaj do countries container.

26:57Będę chciał przede wszystkim usunąć ten styl i zmienić tutaj flat color.

27:03Na Secondary 600.

27:08Dla Conditions będzie to oczywiście odpowiednio Secondary 700 i Secondary 900.

27:18Ten styl nazwiemy tutaj.

27:21Jak się domyślasz.

27:23Button.

27:25Secondary big.

27:34Tylko musimy tutaj wstawić odpowiedni tekst.

27:37W naszym przypadku.

27:40Będzie to check destination.

27:43Jeszcze tylko w centrum.

27:44Ten element.

27:47I to wszystko.

27:48Przechodzimy do podglądu.

27:50Odświeżamy.

27:52Cała nasza sekcja z kierunkami.

27:56Jest gotowa.

27:57Dziękuję Ci za uwagę.

27:59Zasłużyłaś na chwilę odpoczynku, a my widzimy się już za moment.