Créer un composant de navigation avec des variables

La navigation est essentielle à toute interface numérique. Les composants intelligents nous permettent de créer des composants de navigation interactifs personnalisés qui s'intègrent parfaitement au reste de votre prototype. Dans ce guide, nous aborderons les concepts d'imbrication de composants, l'ajout d'événements aux éléments d'un composant à l'aide de variables d'événement et leur transmission à vos composants. L'un des principaux avantages des composants imbriqués est qu'ils offrent un contrôle total sur leurs états, comme les états de survol uniques des éléments d'un autre composant.

Commencer au niveau atomique

SDCMG&C vous permet de créer des composants entièrement interactifs et animés, et même de les imbriquer dans d'autres composants. Nous développons un composant de barre de navigation pour un site web qui contiendra deux types de composants imbriqués différents, dotés de leurs propres interactions. Notre projet comportera une barre de navigation contenant divers composants imbriqués, à savoir cinq éléments de navigation et un composant de panier. La conception de nos composants imbriqués, l'élément de liste de navigation et le panier, influencera la conception de notre barre de navigation. C'est pourquoi un flux de travail optimal consiste à commencer par le composant imbriqué le plus profond et à développer à partir de là.

Imbrication de composants

Une fois nos deux composants prêts, nous pouvons commencer à créer celui qui les imbriquera. Dessinez votre barre de navigation, sélectionnez-la sur le canevas et cliquez sur l'outil Composant dans la barre d'outils. Pour imbriquer un autre composant dans notre nouveau composant, faites simplement glisser un autre composant sur le canevas et placez-le dans la barre de navigation que vous avez créée.

Déclenchement d'interactions depuis la barre de navigation

De retour sur le canevas principal, nous aimerions pouvoir appuyer sur « Vêtements » pour accéder à un nouvel écran. Si vous connectiez le composant à un nouvel écran via le connecteur de prototypage, nous pourrions configurer une interaction. Cependant, celle-ci serait déclenchée en appuyant n'importe où dans notre composant. Ce n'est pas ce que nous souhaitons faire, car nous souhaitons 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 liées à des propriétés (comme l'opacité ou le remplissage), mais à des événements.