Créer un composant de navigation avec des variables

La navigation est essentielle dans toute interface numérique. Les composants intelligents nous permettent de créer des composants de navigation interactifs et personnalisés qui fonctionnent parfaitement avec le reste de votre prototype. Dans ce guide, nous aborderons les concepts d'imbrication des composants, d'ajout d'événements à des éléments d'un composant à l'aide de variables d'événement et de transmission de ces derniers à travers vos composants. L'un des principaux avantages de l'utilisation de composants imbriqués est qu'elle offre un contrôle total sur leurs états, comme les états de survol uniques d'éléments situés à l'intérieur d'un autre composant.

Commencer au niveau atomique

Framer vous permet de créer des composants entièrement interactifs et animés, et vous 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 contiendra une barre de navigation qui renferme 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, aura une incidence sur la façon dont nous concevons notre barre de navigation. C'est pourquoi un flux de travail optimal consiste à commencer par le composant imbriqué le plus « profond » et à construire à partir de là.

Imbrication de composants

Une fois que nos deux composants sont prêts, nous pouvons commencer à créer le composant dans lequel nous allons les imbriquer. Dessinez votre barre de navigation, sélectionnez-la sur la zone de travail et cliquez sur l'outil Composant dans la barre d'outils. Pour imbriquer un autre composant dans notre nouveau composant, il vous suffit de faire glisser n'importe quel autre composant sur la zone de travail du composant et de le placer dans la barre de navigation que vous avez conçue.

Déclenchement d'interactions à partir de la barre de navigation

De retour sur la zone de travail principale, nous aimerions pouvoir appuyer sur « Vêtements » et naviguer vers un tout nouvel écran. Si vous connectiez le composant à un nouvel écran à l'aide du connecteur de prototypage, nous pourrions configurer une interaction. Cependant, celle-ci serait déclenchée si nous appuyions 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 là qu'interviennent les variables d'événement, qui sont des types spéciaux de variables non pas rattachées à des propriétés (comme l'opacité ou le remplissage), mais plutôt à des événements.