Construyendo un Componente de Navegación con Variables
La navegación es clave en cualquier interfaz digital. Los Componentes Inteligentes nos permiten crear componentes de navegación interactivos personalizados que funcionan perfectamente con el resto de tu prototipo. En esta guía, cubriremos los conceptos de anidar componentes, agregar eventos a los elementos dentro de un componente utilizando Variables de Evento, y pasar estas variables a través de tus componentes. Uno de los principales beneficios de usar componentes anidados es que proporciona control total sobre sus estados, como los estados únicos de hover (al pasar el cursor) de los elementos dentro de otro componente.
Comenzando desde el nivel más básico
Framer te permite crear componentes completamente interactivos y animados, e incluso permite anidar componentes dentro de otros componentes. Estamos construyendo un componente de barra de navegación para un sitio web que contendrá dos tipos diferentes de componentes anidados, cada uno con sus propias interacciones únicas. Nuestro proyecto contendrá una barra de navegación que contiene varios componentes anidados, específicamente cinco elementos de navegación y un componente de carrito de compras. El diseño de nuestros componentes anidados, el elemento de lista de navegación y el carrito de compras, afectará cómo diseñamos nuestra barra de navegación. Por esta razón, un flujo de trabajo óptimo incluye comenzar con el componente anidado más "profundo" y construir desde allí.
Anidando componentes
Una vez que tengamos nuestros dos componentes listos, podemos comenzar a crear el componente en el que los anidaremos. Dibuja tu barra de navegación, selecciónala en el lienzo y haz clic en la herramienta de Componente en la barra de herramientas. Para anidar un componente diferente en nuestro nuevo componente, simplemente arrastra cualquier otro componente al lienzo del componente y colócalo dentro de la barra de navegación diseñada.
Activando interacciones desde la barra de navegación
De vuelta en el lienzo principal, nos gustaría poder tocar "Ropa" y navegar a una pantalla completamente nueva. Si conectamos el componente utilizando el conector de prototipado a una nueva pantalla, podríamos configurar una interacción. Sin embargo, esto se activaría si tocamos en cualquier parte dentro de nuestro componente. Esto no es lo que queremos, ya que queremos activar esta transición solo desde un elemento específico. Aquí es donde entran las Variables de Evento, que son un tipo especial de variable no asociada a propiedades (como opacidad o relleno), sino a eventos.
