Webflow: Sekcja z zakładkami

Webflow 2020+

0:00Kolejna lekcja.

0:01A przed nami następne wyzwanie.

0:02Tym razem coś ciekawego bo będziemy mieli

0:04do wykonania takie dwa slide zaprototypowałem sobie.

0:07Jak będą one się zmieniać po kliknięciu w konkretną sekcję.

0:11Chcielibyśmy aby zmieniła się jej zawartość. Teraz webflow daje nam ogromną

0:15przewagę ponieważ pozwoli nam skorzystać z jakichś gotowych komponentów.

0:18Zanim to jednak zrobimy może skopiujmy sobie jakąś dowolną sekcję

0:22np. delaware po to żeby mieć gotową strukturę

0:26czyli usunięcie header section z content usuniemy klasę delivery. Delivery usunie

0:33klasę delivery, a zamiast tego mamy na przykład nazwijmy

0:37to target bo będziemy gotować jakieś różne branże

0:41np. w target content dodamy z pomocą "A'' nowy

0:44element który znajduje się w komponentach moglibyśmy się zastanawiać

0:49np. nad sliderem ale chyba najbardziej odpowiednie będą taby. Taby pozwolą nam

0:53przełączać różne sekcje w zależności od tego który z zakładek wybierzemy więc

0:58wrzucam tutaj sobie taby od razu na target dorzuce jakiś margines później go

1:02zmienimy ale na razie taki żebyśmy mieli jakąś przestrzeń.

1:05Zobaczmy jak to jest skonstruowane.

1:07Mamy taki główny element tabs jest to element blokowy ale ma pozycję realtiv.

1:11W środku znajduje się tabs menu. Ono też ma pozycję relativ, tabs content

1:16też ma pozycję relativ bez żadnych innych dodatkowych ustawień.

1:18To co możemy zrobić to z tabs menu możemy zmienić tak aby wyświetlał się jako flex.

1:24zmienić jego pozycję na vertical tak aby taby były pionowe.

1:28Dodatkowo możemy całe taby teraz zrobić flex - boxem.

1:32Ładnie nam się ten kontent ułoży, a my

1:35możemy jeszcze dodatkowo w ramach flex-boxa go wycentrować.

1:39Teraz jesteśmy już coraz bliżej tej

1:41struktury która nam odpowiada klikając na poszczególne taby będziemy przełączać się

1:46na właściwy pane czyli jeden, dwa, trzy i do środka będziemy mogli

1:51sobie rzucać rozmaite rzeczy teraz jeśli przejdziemy do tab linków one składają się

1:55z tab linka i w środku z text blocka, a w zasadzie możemy wyrzucić jeden.

1:58Zobacz, że razem z wyrzuceniem trzeciego

2:01zniknął mi tab trzeci czyli to działa razem.

2:03Teraz zostały mi jeden tab który jest aktywnych drugi który jest nieaktywny.

2:07Gdybym dodał teraz klasę

2:10np. tab target to okaże się że ten jeden aktywny ma taką dodatkową klasę current, a

2:17ten nieaktywny trzeba by było też do niego wrzucić tab target.

2:22W tym momencie możemy go oscylować w

2:25stanie nieaktywnym. W stanie aktywnym. W stanie nieaktywnym

2:28najpierw zobaczmy jak to wygląda.

2:30Mamy trzydzieści siedem dm serif display i czterdzieści jeden interlinie

2:35więc to odpowiednio trzydzieści i czterdzieści jeden , a dodatkowo włączymy

2:43kolor tła czyli zrobimy przez przezroczystość i z dm sans zrobimy font na serif display.

2:49Zrobiliśmy to w tab target zmieniły się

2:51oba ale ten ma jeszcze specjalną klasę current.

2:55Warto zanotować, że to nie jest stan hover

2:58to jest zupełnie jakby osobna klasa, osobny stan więc gdybyśmy chcieli po przejechaniu

3:03na taki tab target zmieniać dla niego kolor to prześlibyśmy do hover.

3:07Teraz możemy skopiować właśnie ten kolor łososiowy.

3:12Gdybyśmy już ponajechaniu chcieli zmienić

3:14ten kolor tekstu to możemy tutaj hover-ze, że nie na background

3:19cofnę te zmiany tylko na kolor tekstu

3:21możemy ten kolor wrzucić natomiast w tabs menu. Tym pierwszym aktywnym który ma

3:27klasę current też chcielibyśmy zmienić to żeby nie tylko o hoverze ale również po

3:33wybraniu aktywnego tabu on miał taki kolor. Teraz to będzie działać.

3:36A jeszcze jedna rzecz nad którą musimy się

3:38zastanowić to jest jak zrobić tą kropeczkę przy aktywnym elemencie przy aktywnym tabie.

3:43Jak dla mnie szczerze mówiąc jest to znowu doskonały kandydat na to aby

3:47dodać tutaj malutki kawałek swojego własnego kodu.

3:50Jeżeli przejdziemy do podglądu jak przeglądarce.

3:52Wybierzemy polecenie inspect na tym to okaże się, że mamy taką

3:56klasę tab target current dla właśnie tego zaznaczonego aktywnego tabu.

4:02W związku z tym można by było teraz w bardzo prosty sposób przenieść się zamknąć ten podgląd

4:07do właściwości. Do project settings otworzy to sobie w nowej zakładce.

4:13W sekcji custom co dodać dosłownie kawałek własnego stylu.

4:17Kolejno mamy tab current. Skorzystamy teraz z pseudo klasy before.

4:23Ta pseudo klasa pozwoli nam dodać coś przed takim elementem czyli

4:28wystarczy, że piszemy content, a następnie podamy co chcemy tutaj dodać CSS-ie.

4:33W moim przypadku wkleje sobie tutaj taką

4:35małą kropeczkę którą skopiowałem sobie po prostu z jakiegoś artykułu gdzie wpisałem. Dod science html.

4:40Jeszcze jedna rzecz którą to zrobię margin right.

4:45Zrobię margines typu pięć pikseli

4:48np. zapiszmy tę zmiany to.

4:50Problem jest taki, że nie widać tego poglądzie webflow.

4:52Zaraz w ogóle zobaczymy czy to działa.

4:56Ale zanim to zrobimy na sam tab target muszę jeszcze wrzucić taką właściwość żeby

5:01ta kropka była nie nad tekstem, a obok niego więc może

5:05np. damy display flex. To już powinno zadziałać.

5:07A może nie na sam tab current tylko na tą

5:10główną klasę tab target display flex. Teraz powinno być w

5:14porządku bo powinny się te elementy wyświetlać koło siebie.

5:17Nie zobaczymy tego w tym standardowym poglądzie.

5:20Trzeba opublikować naszą stronę. Po jej opublikowaniu.

5:24Kliknąłem tylko publish to chwileczkę potrwa. My możemy teraz przejść do tego w nowej zakładce.

5:28widzisz, że mamy aktywny tab z kuleczką.

5:31Chyba jedyny problem jaki mamy to jest to, że po prostu to się przesuwa więc

5:36może na chwilę wrócę do ustawień. Ustawie to też na marginesie

5:41z lewej strony. Zobaczymy czy to nam pomoże zapisuje

5:46zmiany jeszcze raz publikuje to z poziomu webflow.

5:51Przechodzę do tej strony. Ją odświeżam.

5:54No i wygląda na to, że będzie mi trudno tutaj trafić ale teraz już mogę bez

5:57problemu wejść sobie w tą pseudo klasę before.

6:00Mam margin left.

6:01Mogę po prostu kursami na klawiaturze zmienić to tak aby było w dobrym miejscu

6:06wydaje mi się że minus piętnaście będzie w porządku

6:10więc przeniesiemy się jeszcze raz do ustawień. Zróbmy minus piętnaście zapisuje zmiany.

6:14Teraz można by było to opublikować jeszcze raz i upewnić się, że

6:18nie skacze jak skacze to po prostu przesunąć o jakieś jeden, dwa kolejne piksele.

6:23Podejrzewam, że już teraz powinno być ok.

6:27No i kuleczka rzeczywiście jest chyba jeden piksel

6:30jakieś offsetu ale to naprawdę nie jest istotne.

6:32Ok to by było tyle jeśli chodzi o samo stylowanie tabów.

6:35A w kolejnej lekcji.

6:36Dodamy treść do zakładek.