Nawigacja jest kluczowa w każdym interfejsie cyfrowym. Inteligentne komponenty pozwalają nam tworzyć niestandardowe interaktywne komponenty nawigacyjne, które doskonale współpracują z resztą naszego prototypu. W tym przewodniku omówimy koncepcje zagnieżdżania komponentów, dodawania zdarzeń do elementów w komponencie za pomocą Zmiennych Zdarzeń oraz przekazywania ich przez nasze komponenty. Jednym z głównych korzyści używania zagnieżdżonych komponentów jest to, że zapewnia pełną kontrolę nad ich stanami, takimi jak unikalne stany najechania na elementy w innym komponencie.

Zaczynając od poziomu atomowego

Framer pozwala tworzyć w pełni interaktywne i animowane komponenty, a nawet pozwala zagnieżdżać komponenty w innych komponentach. Budujemy komponent paska nawigacyjnego dla strony internetowej, który będzie zawierać dwa różne rodzaje zagnieżdżonych komponentów, z własnymi unikalnymi interakcjami. Nasz projekt będzie zawierał pasek nawigacyjny zawierający różne zagnieżdżone komponenty, mianowicie pięć elementów nawigacyjnych oraz jeden komponent koszyka zakupów. Projektowanie naszych zagnieżdżonych komponentów, elementu listy nawigacyjnej i koszyka zakupów, wpłynie na to, jak zaprojektujemy nasz pasek nawigacyjny. Dlatego optymalny workflow polega na rozpoczęciu od 'najgłębszego' zagnieżdżonego komponentu i budowaniu w górę.

Zagnieżdżanie komponentów

Gdy mamy gotowe dwa komponenty, możemy zacząć tworzyć komponent, w którym będziemy je zagnieżdżać. Narysuj swój pasek nawigacyjny, zaznacz go na płótnie i kliknij narzędzie Komponentu w pasku narzędzi. Aby zagnieździć inny komponent w naszym nowym komponencie, po prostu przeciągnij inny komponent na płótnie komponentów i umieść go w zaprojektowanym pasku nawigacyjnym.

Wyzwalanie interakcji z paska nawigacyjnego

Z powrotem na głównym płótnie, chcielibyśmy móc kliknąć 'Odzież' i przejść do całkowicie nowego ekranu. Jeśli podłączylibyśmy komponent za pomocą Złącza Prototypowania do nowego ekranu, moglibyśmy skonfigurować interakcję. Jednakże, interakcja ta zostałaby wywołana po kliknięciu w dowolne miejsce w naszym komponencie. To nie jest to, czego chcemy, ponieważ chcemy wywołać ten przejście tylko z konkretnego elementu. Właśnie tutaj pojawiają się Zmienne Zdarzeń, które są specjalnymi rodzajami zmiennych nieprzypisanymi do właściwości (takich jak przezroczystość czy wypełnienie), a raczej do zdarzeń.