Strony WWW z SystemFlow: Confetti

SystemFlow 1.0+

0:00Witaj w kolejnej lekcji, w której

0:01chciałbym pokazać Ci jak działa komponent Confetti.

0:03Poparł, więc przechodzę do zakładki List

0:05komponent I tutaj w Confetti Papier mamy informacje o tym, jak go używać.

0:09Jest to komponent, który nazywa się Ice Confetti i posiada dwa przyciski,

0:13domyślnie Confetti Start, który pozwala nam uruchomić Confetti i Confetti Stop,

0:17który pozwala nam zatrzymać, czyli ukryć konfetti.

0:20Jeśli wybierzemy confetti, start Confetti przeleci przez określony czas.

0:25I to w zasadzie tyle.

0:26Można powiedzieć, że tego komponentu można używać na dwa sposoby.

0:29Pierwszy sposób to taki, gdzie

0:31rzeczywiście mamy jakiś guzik, który uruchamia nam konfetti.

0:34Będzie to jakaś akcja użytkownika.

0:36Przykładowo, jeśli ktoś

0:37zapisuje się na nasz mailing i kliknie zapisz się, to możemy mu wyświetlić to

0:42konfetti i wtedy właśnie skorzystamy z tego domyślnego przycisku.

0:46Wystarczy go jakoś przez tyle.

0:49Natomiast konfetti stop przyda nam się w

0:51tej sytuacji, gdzie na przykład z pomocą Confetti Start wyświetlimy jakiś alert.

0:56Natomiast jeśli kliknie ktoś X na tym

0:59alert albo gdzieś obok, to tak naprawdę wywołamy tą akcję confetti Stop.

1:03Oprócz tego będziemy mogli odpalić sobie dwa tryby dla konfetti.

1:07Nie musimy uruchamiać go z przycisku,

1:10a możemy uruchomić go z pomocą takiej opcji jak Auto Load, dzięki czemu załaduje

1:15nam się konfetti na naszej stronie, niezależnie od kliknięcia w przycisk.

1:19Często chcemy też po prostu stronę z

1:21podziękowaniem, na przykład wyświetlić takim konfetti od razu, bez konieczności

1:25klikania gdziekolwiek, Więc skopiuję nazwę tego komponentu.

1:28Teraz przechodzę do web, a następnie używam tego komponentu standardowo i od

1:33linkował je ten komponent An link instance.

1:36Zobaczysz, że wewnątrz konfetti mamy coś takiego jak konfetti script.

1:40Jest on ukryty, czyli po prostu ma właściwość display na on, ale to nie

1:44przeszkadza nam w tym, żeby działał i nie przeszkadza nam

1:47przejść do jego ustawień, a następnie wybrać polecenie Open kod Editor.

1:51Tutaj znajdują się właśnie potrzebne właściwości.

1:55To jest właściwością Auto Load

1:57i jeśli zmienimy ją na true, to w tym momencie nasze konfetti

2:02będzie wyświetlane bez konieczności kliknięcia w przycisk.

2:06Wybierzmy teraz polecenie Save and close,

2:08a następnie musimy przypominam opublikować naszą stronę.

2:12Teraz już guziki nie będą nam zupełnie

2:14potrzebne, ponieważ ten konfetti skrypt automatycznie załaduje konfetti.

2:18A jeszcze jedna rzecz, którą chciałem Ci pokazać w międzyczasie to się publikuje,

2:22to mamy tutaj coś takiego jak duration i duration.

2:24Określa czas w sekundach ile nasze konfetti będzie trwało.

2:28Jeśli przykładowo chciałbyś, żeby trwało to prawie nieskończoność, możesz

2:34zrobić sobie aż tyle sekund i konfetti będzie cały czas odtwarzane.

2:37No i oczywiście działa to w momencie gdy auto load jest ustawione nie na false,

2:41czyli nie przyciski tylko na true czyli automatyczne uruchamianie konfetti.

2:46OK, no to jeśli to już wszystko wiemy to

2:48zobaczmy jak konfetti wygląda po załadowaniu od razu bez problemu

2:53to cztero sekundowa animacja konfetti jest widoczna.

2:57No i naturalnie nam są teraz niepotrzebne te przyciski.

2:59Moglibyśmy w zasadzie usunąć wszystko.

3:02Oczywiście pamiętaj o tym, żeby zostawić ten skrypt,

3:06jeżeli potrzebny jest nam tylko skrypt na tej stronie, więc możemy sobie

3:10nawet cały ten komponent konfetti usunąć, bo on nie ma żadnych atrybutów.

3:14Zostawić tylko konfetti skrypt i to już zadziała.

3:17Spróbujmy taką stronę jeszcze raz

3:18opublikować i zaraz pokażę Ci jak to działa właśnie z tą opcją auto load.

3:23Natomiast jeszcze jedna fajna rzecz jest

3:25taka, że jeśli skorzystamy z tego skryptu konfetti symbolu

3:30od nie kupimy go teraz to prawy przycisk myszy i link instance

3:33i mamy również na konkretnych przyciskach atrybuty, które możemy w zasadzie wstawić

3:38w dowolne elementy jakiś link, tekst czy cokolwiek.

3:41I one właśnie odpalają nam i zamykają to konfetti.

3:44Możemy w ogóle nie mieć Batmana, który nam

3:46stopuje konfetti, a jedynie mieć button, który rozpoczyna konfetti.

3:50Tutaj jeszcze jedna fajna rzecz.

3:52Jeśli zerkniesz na ustawienie to ma on ten atrybut data konfetti start ustawione na

3:583, ale gdybyśmy zmienili to na 0 i wybrali polecenie save.

4:02Nasze konfetti zamiast przelecieć w dosłownie kilka sekund będzie leciało

4:07całkiem długo i pokażę Ci jak to może wyglądać.

4:11Jeśli teraz ten skrypt sobie zobacz na najpierw jak wygląda ta

4:15opublikowana strona z tym skryptem tutaj czyli bez guzików.

4:19Jak widzisz konfetti działa i leci przez 4 sekundy, bo tak jest ustawione.

4:24Natomiast gdybym ten skrypt usunął i teraz

4:28na betonie daliśmy 0 będziemy mieli nieograniczony czas latania konfetti.

4:33Opublikujemy to na testowej domenie.

4:36I teraz podejrzewamy, ponieważ czas

4:38daliśmy na 0 będzie to leciało w nieskończoność.

4:41Poprzednio mieliśmy 3, czyli były to 3 sekundy.

4:44Czyli w tym jako walił tego atrybutu

4:46możesz wpisać dowolną wartość w sekundach i tyle będzie się to konfetti odtwarzał.

4:50Po kliknięciu na przycisk możemy dać 5 to

4:52będzie 5 sekund, 0 to będzie nieskończoność.

4:55Przypominam, że to robimy w przypadku przycisków czy jakiegoś linku, na który.

5:00Natomiast jeśli chcemy zmienić czas

5:01odtwarzania confetti w przypadku Auto load true to mamy ten drugi parametr duration,

5:07który definiuje nam to ile w sekundach będzie konfetti.

5:09Trwało to wszystko w tej lekcji i wszystko komponencie konfetti.

5:13Do usłyszenia.