Strony WWW z SystemFlow: Warianty

SystemFlow 1.0+

0:00W tej lekcji chciałbym powiedzieć Ci o dwóch fajnych funkcjach firmy, które

0:03wykorzystujemy, czyli o funkcji złap owania symbolu, czyli instancji symbolu,

0:07czyli inaczej podmianę, a także o funkcji wariantów.

0:12Mówiłem Ci o tej funkcji słabo już przy lekcji z ikonami.

0:15Mamy tutaj ikony wypełnione cała biblioteka Material Dizajn tutaj jest.

0:20No i wspominałem o tym, że gdybyśmy korzystali z takiej ikony np.

0:23date range, oczywiście możemy ją skopiować stąd, a możemy też

0:28przy korzystaniu, przy tworzeniu naszego jakiegoś własnego layoutów assets po

0:31prostu wpisać jej nazwę i przeciągnąć na scenę.

0:34Wspominałem o tym, że bardzo łatwo ikony

0:37możemy podmienić za pomocą funkcji swap, która znajduje się tutaj.

0:41Jest to instancja symbolu date Range, ale

0:43my mamy dostęp do wszystkich wypełnianych ikon bardzo szybko.

0:46Teraz więc nie trzeba tutaj wyszukiwać, podmieniać i możemy sobie tę ikonę na np.

0:51zmienić na ikonę Compute.

0:53I ta funkcja przypominam, że działa też

0:56fajnie w ten sposób, że możemy zmienić kolor np.

1:00zmienić rozmiar i wszystkie inne

1:02parametry, a następnie zamienić to na inną ikonę i te parametry zostaną zachowane.

1:07Często funkcje będziemy używać właśnie w przypadku konkretnych ikon, np.

1:12z wypełnieniem, dlatego są one pogrupowane

1:14dzięki odpowiedniemu nazewnictwie z takimi rzeczami jak widzisz w kategorie

1:19czy mamy Ikon filter jest to odzwierciedlone tutaj w kategoriach.

1:23Tutaj jest widget, później będzie Icon, no i jeśli wyjdziemy z tego, możemy nawet

1:27przejść sobie do innych elementów i taką ikonę zastąpić na przykład przyciskiem.

1:32Rzadko będziemy to robić, ale czasem z

1:34tego korzystam, zwłaszcza wtedy, kiedy mam jakiś bardziej złożony komponent, czyli

1:39przykładowo HR u, sekcję i wybiorę sobie stąd jakąś sekcję Hero.

1:45Nie chcę szukać kolejnych sekcji, tylko po

1:47prostu biorę tę sekcję, pobieram ten komponent i korzystam z opcji swap.

1:53Zmieniam to sobie na inny komponent, np.

1:55z prawej strony czy z lewej.

1:57Często w ten sposób jest szybciej, natomiast to pozwala nam bardzo łatwo i

2:01szybko zamieniać instancje i też tak jak wspomniałem zachowywać ich ustawienia.

2:07Jeśli po zamianie chciałbyś te ustawienia zresetować też jak najbardziej możesz to

2:12zrobić, ponieważ gdy mamy instancję można zawsze kliknąć na tym poleceniu reset all

2:17over rights i wtedy ta podmieniona instancja można ją

2:21szybciutko zresetować albo zresetować jej rozmiar.

2:23Tutaj pojawi się specjalna opcja reset size.

2:25W momencie kiedy będziemy mieli jakiś trochę inny rozmiar, troszeczkę inny

2:28rozmiar tej słabszej instancji, może ona być lekko rozjechana.

2:32Wtedy trzeba właśnie zresetować ten rozmiar.

2:35Jeśli chodzi o drugą funkcję, którą chciałbym się tutaj pokazać, to może

2:39wróćmy na moment do tego menu, nad którym już pracowaliśmy, już ten komponent

2:46i teraz mamy tutaj sytuację, gdzie ten item jest w takim stanie, gdzie jest on

2:51podkreślony i ma inny kolor, czyli jest w stanie aktywnym.

2:55No i jak to jest zrobione?

2:56Jest to zrobione w ten sposób, że mamy

2:59tutaj coś takiego jak stan i mogę zmienić dla każdego takiego item a

3:04instancji tego komponentu stance in active na karę czyli aktywne.

3:10No i jak widzisz został zmieniony właśnie zgodnie z tym stylem.

3:14I to jest fajna opcja i nazywa się właśnie Variant.

3:17Będziemy mogli przygotować szereg wariantów takiego samego komponentu.

3:20We Will tego nie mamy, ale tutaj jak najbardziej.

3:23I tutaj w tym menu Item Horizontal za każdym razem jak widzisz przerywane

3:27kreski to właśnie są zrobione warianty jednego komponentu.

3:31To jest jeden komponent na zmień item

3:33horizontal, ale w środku ma zdefiniowane dwa różne stany i te stany będą

3:39odpowiedzialne za właśnie przełączanie przy wariantach.

3:41Zresztą stany możemy tutaj zmienić na naszą dowolną nazwę.

3:45Mamy Current oraz in Active jest zdefiniowane jako Stany

3:51jako warianty tego komponentu i będziemy dzięki temu mogli się łatwo przełączać.

3:55Za pomocą plusa możemy dodawać kolejne, kolejne itd.

3:58I jak zaczniesz przeklikać się po

4:01tych naszych stronach to zobaczysz, że bardzo dużo różnych elementów ma swoje

4:05stany i bardzo typowe są formularze gdzie mamy np.

4:08checkbox, który ma stan checked i and check.

4:11Tak samo radio button wszędzie gdzie jest to wymagane i może nam się przydać.

4:16Mamy te stany również zrobione w filmie, a np.

4:19ciekawym komponentem, który ma stany jest

4:22avatar, ponieważ możesz tutaj sobie spróbować za prototypowania.

4:26Jak widzisz ten avatar ma sporo jakiś różnych wariantów, które są zdefiniowane.

4:31Jest to rozmiar label i layout.

4:33I korzystając z takiego komponentu Avatar

4:36no może weźmy sobie na naszą stronę główną.

4:38Utwórzmy tutaj jakiegoś frame a przejdźmy do assetów.

4:41Wpiszmy avatar i skorzystajmy z komponentu Avatar.

4:44No właśnie, jeśli się wyszukuje w ten

4:46sposób assetów, to też jakby trzeba najechać, żeby zobaczyć tą nazwę Avatar.

4:50Więc ja wolę ten widok listy, bo już wiem,

4:53że o właśnie o ten avatar główny mi chodzi.

4:55I teraz mając go na głównej scenie mogę wybrać.

5:00Różne warianty single label i layout.

5:02Label zobaczy, że jest zrobiony jako true

5:04false, więc można go po prostu włączyć i wyłączyć i wtedy pokazuje nam label.

5:10Co ciekawe, można te stany ze sobą miksować i np.

5:13w stanie small label będzie wyświetlał nam

5:15tylko imię i nazwisko, a już nie ten podtytuł.

5:18Możemy wybrać default trochę większy,

5:21large największy i wtedy rzeczywiście ten pod tytuł się też mieści.

5:25Chyba, że go wyłączymy.

5:27A możemy też zmienić layout z

5:29horyzontalnego na wertykalny i wtedy będziemy mieli wszystko w pionie.

5:32Możemy wyłączyć albo ustawić sam awatar, albo go włączyć.

5:36I oczywiście w pionie też będzie działał ten miks.

5:38Czyli możemy np.

5:39zmienić size na small i wtedy mieć mały avatar albo default, czyli średni.

5:43Więc tu jest trochę bardziej złożona specyfika wariantów.

5:46Ale pamiętaj o tym, że jak korzystasz z

5:48symboli, to warianty będą się znajdowały tutaj i możesz zawsze ich użyć.

5:52A zatem warianty oraz łapanie, czyli podmiana instancji to są dwie kolejne

5:56fajne rzeczy, które mamy dostępne we frameworku.

5:59A jeśli chodzi o rozszerzenie komponentów,

6:01chciałbym powiedzieć Ci o nich więcej w następnej lekcji.

6:04Do usłyszenia.