Strony WWW z SystemFlow: Przyciski

SystemFlow 1.0+

0:00Tej lekcji chciałbym pomówić trochę o przyciskach, ponieważ jest to jeden z

0:02częściej wykorzystywanych komponentów w ramach naszych stron landing page

0:06zrobionych z systemem Flow, więc przyjrzyjmy się na chwilę przycisku Home.

0:09Znajdują się one w sekcji General Komponentów.

0:11Tutaj jako pierwsza zakładka

0:13i w dokumentacji można odkryć, że tych komponentów przycisków jest sporo.

0:17Dzielą się one w ten sposób, że najpierw

0:19mamy button wszędzie, a później mamy oznaczenie jaki to jest typ przycisku.

0:24Tutaj w kontekście rozmiarów w zasadzie mamy guziki medium, które są trochę

0:28większe i poniżej będziemy mieli guziki, które są odrobinę mniejsze.

0:32Poza tym mamy jeszcze specjalny button typu fluid, który też może być medium albo

0:37small, natomiast charakteryzuje się tym, że rozciąga się na całą dostępną

0:41szerokość, zamiast tak jak ten nasz specyficzny przycisk tutaj np.

0:45medium primary dostosowywać do szerokości tekstu.

0:49W każdej z tych kategorii.

0:51Mamy cztery rodzaje przycisków zwykłe z

0:53ikoną po prawej, z ikoną po lewej oraz samą ikonę.

0:57No i jeśli zerkniesz na tą ostatnią to

1:00ostatni człon klasa to jest to guzik podstawowy z naszym kolorem Primary 60.

1:05Później mamy guzik secondary, czyli jasna wersja outline bez żadnego tła, tylko z

1:10klinem, jak również ghost do prezentacji głównie na ciemnym tle.

1:15No i mamy też przycisk w wariancie małym, czyli small, też w czterech wersjach.

1:19Secondary, Outline i Ghost to samo.

1:22Później, tak jak powiedziałem buttony, które rozciągają się na całą szerokość i

1:26to też primary, secondary i outline oraz Ghost.

1:29No i w końcu mamy małą wersję tego buttona Fluid, czyli analogicznie.

1:35Więc tak naprawdę mamy w sumie dwa typy przycisków główne zwykły i fluid.

1:39Jeśli chodzi o rozmiar mamy medium i small.

1:42Jeśli chodzi o typ mamy go Primary, Secondary oraz Alpine.

1:47I teraz to są przyciski, które możemy łatwo stąd skopiować.

1:51Czyli możemy łatwo kliknąć na nazwę

1:52takiego przycisku, wrzucić go za pomocą komendy E do naszego projektu.

1:56Natomiast ja chciałbym teraz przejść do strony dokumentacji wewnątrz frameworku,

2:00ponieważ tutaj możemy zacząć od edycji tych przycisków i pomimo tego, że

2:05komponenty znajdują się na górze, to możemy też je łatwo skopiować.

2:09To tak naprawdę na początku powinieneś

2:11udać się na sam dół w okolice sekcji Custom size i to w tej sekcji Custom jest

2:17możesz dostosować wygląd Twoich przycisków.

2:19Przenieśmy się teraz do jednego z nich,

2:20czyli do tego pierwszego przycisku i spróbujmy wyedytować właściwości.

2:24W tej ramce powinniśmy edytować tylko trzy

2:27właściwości padding tekst size oraz border relief.

2:30Więc tutaj ważne np.

2:31nie edytujemy koloru.

2:32Kolor edytujemy tutaj.

2:34No dobra, to powiedzmy, że chcielibyśmy zmienić border right dla tego przycisku.

2:38No i zauważ, że mamy tutaj klasę button

2:40medium, więc możemy to zmienić na klasę button medium i np.

2:43wrzucić tutaj border radius na 8.

2:45I to by było całkiem fajne, gdybyśmy np.

2:47chcieli zrobić 8 w przypadku medium rozmiaru.

2:51Natomiast w przypadku rozmiaru small

2:52button small chcielibyśmy na przykład zrobić 6 pikseli, bo 8 to już było trochę

2:57za dużo dla małych przycisków, więc możemy w ten sposób to zrobić.

3:00Natomiast gdybyśmy chcieli zrobić to za jednym zamachem, cofnąłem teraz te zmiany.

3:04Możemy zaznaczyć button medium, a

3:05następnie usunąć na chwilę tą klasę medium.

3:08I teraz już to co zrobimy będzie miało zastosowanie do wszystkich buttonów.

3:13W związku z tym teraz możemy sobie ustawić np.

3:15border radius na 6 i ustawić zarówno medium jak i small.

3:19Buttonów nie ustawi się dla fluid.

3:22Najpierw przywróćmy to jeszcze klasę medium, żeby o tym nie zapomnieć.

3:26Nie ustawi się na fluid z tego powodu, że

3:27fluid nie ma klasy button, tylko ma osobną klasę button fluid.

3:31I tutaj powinniśmy osobno też ustawić border radius na 6 na przykład.

3:35No i świetnie. Natomiast okazuje się, że jeszcze nie

3:37wszystko działa, bo jeśli teraz przejdziemy do stanu hover, to w tym

3:40stanie hover nie mamy zaokrąglonych krawędzi.

3:42Ale stanów nie edytujemy tutaj, a

3:44przechodzimy do tego miejsca, gdzie mamy edycję koloru i stanów.

3:49Więc jeśli teraz zaznaczymy button medium

3:52i przykładowo jeśli dla tego przycisku chcielibyśmy użyć nie koloru primary, a

3:56secondary section, możemy zmienić to właśnie w tym miejscu.

4:00I dodatkowo to jest dobre miejsce na to, żeby wyedytować stany.

4:03Czyli przechodzimy teraz do selektora.

4:06Następnie w tym betonie medium, jeśli chcemy wyedytować stan dla medium

4:10przechodzimy do stan hover i to tutaj możemy zdefiniować zdecydować,

4:14że chcemy delikatnie rozjaśnić background na stanie hover.

4:18I to jest dobre miejsce.

4:19W tym momencie, jak widać na stanie hover na tym przycisku mamy odpowiednie tło,

4:24natomiast jest to tylko na przycisku typu button medium.

4:28W przypadku tego przycisku button medium secondary.

4:32Tutaj musielibyśmy osobno wyedytować ten hover jeśli chcielibyśmy go zmienić.

4:36Jak widzisz tutaj kolor delikatnie się

4:37zmienia i tak samo tutaj w przypadku tego przycisku, czyli button medium outline.

4:41Na pewno chcemy wyedytować ten hover, bo nie wygląda to zbyt dobrze.

4:45Więc przechodzimy do stanu hover i teraz decydujemy o tym, że będzie to

4:50kolor odrobinę ciemniejszy i ponieważ jesteśmy w miejscu, gdzie

4:54możemy też edytować kolor tekstu, to możemy przejść sobie do tego zwykłego.

5:00Outline.

5:00Tutaj znajduje się w środku button text i możemy zmienić teraz kolor w sekcji

5:05Typografia na jeden z jaśniejszych kolorów np.

5:08na kolor biały.

5:10Zauważ jednak, że ten button tekst występuje w wielu różnych przyciskach i w

5:14tym momencie zmieniliśmy go też na tym betonie i chcielibyśmy tego uniknąć.

5:18W związku z tym jak możemy tego uniknąć?

5:21Możemy nałożyć tutaj na sam konkretnie

5:24button medium outline ten kolor tekstu, czyli w typografii zmienić kolor tekstu.

5:29W tym momencie jest on dziedziczony z button alpine, ale my zmienimy go tylko i

5:34wyłącznie dla tego typu przycisku i on również po najechaniu teraz wygląda

5:38dokładnie tak, jak to sobie zaplanowaliśmy.

5:40Dokładnie na tej samej zasadzie możemy

5:41dokopać się do innych właściwości przycisku.

5:44Przykładowo, jeśli widzimy tutaj klasę button Medium

5:48outline, to możemy zacząć je inwestować, sprawdzać np.

5:53co jest przypisane, do czego jest przypisany ten box shadow.

5:58I tutaj jest delikatny box shadow i chcesz żeby na tranzycji tak żeby przejście tła

6:01było delikatnym takim fajnym transition 205 milisekund?

6:05No ale na tej zasadzie już możesz zacząć się zastanawiać.

6:08OK, dobra, ale skąd pochodzi box Shadow?

6:10Gdzie ja go mam usunąć?

6:11I to jest właśnie odpowiedź.

6:13W button Outline znajduje się ta właściwość Box Shadow, więc stąd mogę

6:17usunąć i tym samym nadpisać ją dla button Medium Outline.

6:21Ale mogę też przejść do tej klasy, w której znajduje się definicja tego box

6:27shadow i mogę ją stąd usunąć, jeśli jej nie potrzebuję, czyli Medium outline np.

6:33można usunąć i zobacz, że teraz zapaliły nam się te właściwości na niebiesko.

6:37To znaczy, że stąd pochodzi np.

6:38radius color transition.

6:40I w ten sposób można dojść do różnych właściwości, na których klasach są

6:44poustawiane, nawet jeśli nie jest to oczywiste.

6:47No my nie rozpisywać każdej właściwości,

6:50która tutaj jest wrzucona w osobnym takim boksie, dlatego że po prostu zrobiliśmy

6:56te, które najczęściej sami edytujemy I to jest właśnie padding, to jest.

7:01To są właściwości tekstu, między innymi text size, no i border radius.

7:05Natomiast pozostałe właściwości możesz odnaleźć przechodząc po prostu po tych

7:10klasach i odnajdując odpowiednie niebieskie właściwości w stylach.

7:14Teraz jeśli już z Custom i dostosujesz przyciski,

7:18to możesz używać wszystkich tych przycisków, które znajdują się w samym

7:22komponencie i po prostu korzystać z nich na takiej zasadzie, że albo wybierać stąd

7:27ten, który Ci odpowiada, albo po prostu zapamiętując jego nazwę już w

7:31designie z pomocą command e wyszukiwać sobie button i po naprawdę zastosowaniu

7:37kilku przycisków system sam już będziesz dokładnie wiedział, że tutaj mamy rozmiar.

7:42Jak chcę użyć małego to po prostu button smo sobie wpisuje.

7:45Tutaj wyszukiwarka WV działa genialnie, bo

7:48nie trzeba się przejmować wielkością liter, tymi planszami itd.

7:51Ona wszystko tam znajdzie i np.

7:53ja chcę mały button z ikoną po lewej

7:56stronie to jest to dość intuicyjne, że wpisuję coś, co zwróci mi dokładnie

8:00rzeczywiście ten komponent, którym chcę pracować.

8:03Więc tak to wygląda.

8:05A jeśli chodzi o samo używanie komponentów, to w momencie gdy wstawiłem

8:08tutaj komponent zauważ, że część rzeczy jest zrobionych w postaci override.

8:12W przypadku przycisków chcieliśmy zadbać o to, aby nie trzeba było ich od linku po

8:16to, żeby zmienić ten button tekst i jest on tutaj wystawiony jako text override np.

8:21Można go szybko zmienić na coś innego.

8:23Tak samo można zrobić z ikoną.

8:26Na przykład możemy tutaj wpisać inną nazwę

8:28z tego repozytorium Material Design i już mamy zmienione w zasadzie wszystkie

8:33właściwości, które chcemy, czyli ikonę oraz tekst.

8:37Tutaj mamy też wystawiony override link, więc np.

8:40możemy wpisać External URL albo

8:42podlinkować to do maila, albo do strony, albo do sekcji.

8:45No i w zasadzie nie ma już żadnej potrzeby, żeby ten guzik od linkować.

8:49Zakładając, że skonfigurować wszystkie guziki w tej sekcji configure, to mamy

8:54dobre kolory obramowania hover, a reszta, czyli te treści są zdefiniowane

8:59w postaci tych override ów, które przypomnę też są dostępne w panelu

9:04Właściwości Element Settings po wciśnięciu daj.

9:07Tu też możemy to wszystko wypełniać.

9:09Jeżeli jednak z jakichś powodów chcemy edytować ten konkretny guzik, to najpierw

9:14klikamy prawym przyciskiem myszy i od niej kopiujemy instancję.

9:17Następnie moja sugestia jest taka, żeby w

9:19stylach przejść sobie jeśli tylko mamy zamiar modyfikować style, a nie np.

9:23coś tutaj dodać dopisać w strukturze HTML.

9:26No to jeśli chcemy edytować style to teraz control Enter robimy np.

9:31nową klasę na cały ten button albo na jego poszczególne elementy.

9:35Tutaj znajdują się w środku i dodajemy nowe klasy.

9:39Tutaj mamy button small, ale możemy wpisać my button albo my Custom class

9:46i teraz zmodyfikować tylko ten jeden jedyny przycisk na naszej stronie.

9:50No chyba, że później użyjemy takiej combo

9:52klasy i dostosować wszystkie jego właściwości, czyli np.

9:56dać mu jakiś dodatkowy box shadow jakiś.

9:59Będzie się pojawiał pod przyciskiem i dostosować te wszystkie właściwości.

10:05Natomiast najczęściej rzeczywiście w

10:07przypadku guzików tego nie robimy, chyba że mamy jakiś jeden wyjątkowy CT, a na

10:11stronie staramy się raczej w całym systemie zmienić właściwości przycisku w

10:16ten sposób, żeby w tej sekcji custom już wszystko było ładnie zrobione.

10:21Te przyciski takie jak chcemy, a później używać gotowych komponentów i override.

10:25Mam nadzieję, że teraz lepiej rozumiesz przyciski System Flow.

10:27Do usłyszenia.