La navigation est essentielle dans toute interface numérique. Les composants intelligents nous permettent de créer des composants de navigation interactifs sur mesure qui fonctionnent parfaitement avec le reste de votre prototype. Dans ce guide, nous allons aborder les concepts de l'imbrication des composants, l'ajout d'événements aux éléments d'un composant à l'aide de variables d'événements, et le passage de ceux-ci à travers vos composants. L'un des principaux avantages de l'utilisation de composants imbriqués est qu'ils offrent un contrôle complet de leurs états, tels que les états de survol uniques d'éléments dans un autre composant.

Commencer au niveau atomique

Framer vous permet de créer des composants entièrement interactifs et animés, et permet même d'imbriquer des composants dans d'autres composants. Nous construisons un composant de barre de navigation pour un site Web qui contiendra deux types différents de composants imbriqués, avec leurs propres interactions uniques. Notre projet comprendra une barre de navigation contenant divers composants imbriqués, à savoir cinq éléments de navigation et un composant de panier d'achat. La conception de nos composants imbriqués, l'élément de liste de navigation et le panier d'achat, influencera la façon dont nous concevons notre barre de navigation. Pour cette raison, un flux de travail optimal consiste à commencer par le composant imbriqué le 'plus profond' et à construire à partir de là.

Imbrication des composants

Une fois que nous avons nos deux composants prêts, nous pouvons commencer à créer le composant dans lequel nous allons imbriquer ceux-ci. Dessinez votre barre de navigation, sélectionnez-la sur la toile et cliquez sur l'outil Composant dans la barre d'outils. Pour imbriquer un autre composant dans notre nouveau composant, faites simplement glisser tout autre composant sur le canevas du composant et placez-le dans votre barre de navigation conçue.

Déclenchement des interactions depuis la barre de navigation

De retour sur le canevas principal, nous aimerions pouvoir appuyer sur 'Vêtements' et naviguer vers un tout nouvel écran. Si vous connectiez le composant à l'aide de la connexion de prototypage à un nouvel écran, nous pourrions configurer une interaction. Cependant, cela serait déclenché si nous touchons n'importe où dans notre composant. Ce n'est pas ce que nous voulons faire, car nous voulons déclencher cette transition uniquement à partir d'un élément spécifique. C'est ici que les variables d'événements entrent en jeu, qui sont des types spéciaux de variables non attachées aux propriétés (comme l'opacité ou le remplissage) mais plutôt aux événements.