Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Aujourd'hui, je vais vous montrer comment utiliser le menu du tiroir dans Axure. Dans le menu du tiroir, deux effets interactifs doivent être obtenus, à savoir :

Interaction 1

L'effet de mise à l'échelle des éléments de menu de niveau 1 et de niveau 2 dans le menu du tiroir

Logique d'implémentation : réglage de l'état de commutation du panneau dynamique et implémentation "push/pull the original"

Interaction 2

Changer l'état sélectionné d'un élément de menu

Logique d'implémentation : définir l'état sélectionné dans la vue auxiliaire

Jetons un coup d'œil aux étapes de mise en œuvre :

Interaction 1 : effet de mise à l'échelle des éléments de menu de niveau 1 et de niveau 2 dans le menu du tiroir

étape 1

1. Faites glisser un panneau dynamique et ajustez la taille du panneau dynamique.

2. Double-cliquez sur le panneau dynamique, définissez le nom du panneau dynamique : "Menu 1", ajoutez 2 états du panneau dynamique, nommés respectivement : Réduire, Développer

Étape 2

1. Double-cliquez sur l'état plié pour accéder à la page d'état « plié »

2. Faites glisser un rectangle dans la page et définissez le nom sur "Menu 1-Réduire". Redimensionnez le Menu 1 et saisissez le texte "Menu 1".

3. Faites glisser l'image de la flèche déroulante et ajustez la taille

Étape 3

Ajoutez les styles de survol et de sélection de « Menu 1-Réduire » et définissez respectivement la couleur de la police : bleu et la couleur de remplissage : gris clair.

Étape 4

Cas d'utilisation lors du paramétrage du clic de souris du rectangle "Menu 1-Réduire" :

Sélectionnez l'action « Changer l'état du panneau », définissez « Menu 1 » pour passer à l'état « Étendu » et sélectionnez l'attribut « Composant Push/Pull ».

Étape 5

1. Copiez le contenu de l'état « effondrement » du panneau dynamique vers la page d'état « développé »

2. Dans la page d'état "Développer", remplacez le nom du rectangle par "Menu 1-Développer".

Interaction 2 : changement de l'état sélectionné des éléments de menu

Étape 6

1. Copiez "Menu 1-Expand" en tant que sous-menu, modifiez le texte du composant de nom et nommez-le : Sous-menu 1.

2. Définissez l'événement de clic de souris du sous-menu 1, sélectionnez l'action "Définir la sélection" et configurez le composant actuel à sélectionner.

Étape 7

1. Copiez plusieurs sous-menus par lots, modifiez le texte et nommez-les respectivement.

2. Après avoir sélectionné tous les sous-menus, définissez le nom du groupe de sélection : 1

Aperçu pour voir l'effet.