Construindo um Componente de Navegação com Variáveis

A navegação é fundamental em qualquer interface digital. Os Componentes Inteligentes nos permitem criar componentes de navegação interativos personalizados que funcionam perfeitamente com o resto do seu protótipo. Neste guia, vamos cobrir os conceitos de aninhamento de componentes, adicionar eventos a elementos em um componente usando Variáveis de Evento e passá-los pelos seus componentes. Um dos principais benefícios do uso de componentes aninhados é que ele fornece controle total sobre seus estados, como estados exclusivos de passagem do mouse sobre elementos dentro de outro componente.

Começando pelo nível atômico

O Framer permite que você crie componentes totalmente interativos e animados, e até permite que você aninhe componentes dentro de outros componentes. Estamos construindo um componente de barra de navegação para um site que conterá dois tipos diferentes de componentes aninhados, cada um com suas próprias interações únicas. Nosso projeto conterá uma barra de navegação que contém vários componentes aninhados, nomeadamente cinco itens de navegação e um componente de carrinho de compras. O design de nossos componentes aninhados, o item da lista de navegação e o carrinho de compras, impactará como projetamos nossa barra de navegação. Por isso, um fluxo de trabalho ideal inclui começar com o componente aninhado 'mais profundo' e construir a partir daí.

Aninhando componentes

Uma vez que temos nossos dois componentes prontos, podemos começar a criar o componente no qual vamos aninhá-los. Desenhe sua barra de navegação, selecione-a na tela e clique na ferramenta Componente na Barra de Ferramentas. Para aninhar um componente diferente em nosso novo componente, basta arrastar qualquer outro componente para o Canvas do Componente e colocá-lo dentro da sua barra de navegação projetada.

Disparando interações a partir da barra de navegação

De volta à tela principal, gostaríamos de poder tocar em 'Roupas' e navegar para uma nova Tela inteira. Se você conectasse o componente usando o Conector de Prototipagem a uma nova tela, poderíamos configurar uma Interação. No entanto, isso seria acionado se tocássemos em qualquer lugar dentro do nosso componente. Isso não é o que queremos fazer, já que queremos desencadear essa transição apenas de um elemento específico. É aí que entram as Variáveis de Evento, que são tipos especiais de Variáveis não atreladas a propriedades (como opacidade ou preenchimento) mas sim a eventos.