Costruire un Componente di Navigazione con Variabili

La navigazione è fondamentale in qualsiasi interfaccia digitale. I componenti intelligenti ci consentono di creare componenti di navigazione interattivi personalizzati che funzionano perfettamente con il resto del prototipo. In questa guida, affronteremo i concetti di nidificazione dei componenti, aggiunta di eventi agli elementi in un componente usando le Variabili Evento e passaggio di questi attraverso i tuoi componenti. Uno dei principali vantaggi nell'utilizzo di componenti nidificati è che fornisce pieno controllo sui suoi stati, come ad esempio gli stati hover unici degli elementi all'interno di un altro componente.

Partendo dal livello atomico

Framer ti consente di creare componenti interattivi e animati e ti permette anche di nidificare componenti all'interno di altri componenti. Stiamo costruendo un componente barra di navigazione per un sito web che conterrà due diversi tipi di componenti nidificati, con le proprie interazioni uniche. Il nostro progetto conterrà una barra di navigazione che contiene vari componenti nidificati, vale a dire cinque elementi di navigazione e un componente Carrello della spesa. Il design dei nostri componenti nidificati, l'elemento della lista di navigazione e il carrello della spesa, influenzerà il modo in cui progettiamo la nostra barra di navigazione. Per questo motivo, un flusso di lavoro ottimale include partire dal componente nidificato 'più profondo' e costruire da lì.

Nidificazione dei componenti

Una volta pronti i nostri due componenti, possiamo iniziare a creare il componente in cui li nidificheremo. Disegna la tua barra di navigazione, selezionala sulla tela e fai clic sullo strumento Componente nella barra degli strumenti. Per nidificare un diverso componente nel nostro nuovo componente, trascina semplicemente qualsiasi altro componente alla Tela dei componenti e posizionalo all'interno della tua barra di navigazione progettata.

Attivare interazioni dalla barra di navigazione

Tornando sulla tela principale, ci piacerebbe poter cliccare su 'Abbigliamento' e navigare verso una nuova schermata intera. Se collegheresti il componente utilizzando il Connettore di prototipazione a una nuova schermata, potremmo impostare un'interazione. Tuttavia, questo sarebbe attivato se clicchiamo ovunque all'interno del nostro componente. Questo non è ciò che vogliamo fare, poiché vogliamo attivare questa transizione solo da un elemento specifico. Qui entrano in gioco le Variabili Evento, che sono tipi speciali di variabili non collegate a proprietà (come opacità o riempimento) ma piuttosto a eventi.