I'm trying to make a simple drop-down menu
I have a component ("Component 1") and it is a button in the default state.
When I click on it ("Tap") it shows the "menu" state, which makes visible a rectangle expanding down below it, like a dropdown. So:
Default state: Button
Tap Action: shows the menu below it. I called it the "Menu State"
Within the Menu State:
Each line of text, or menu item I had to make as it's own component. It works like this:
Default state: Just show the text
Hover state: Hilight the text
I couldn't figure out how to do that unless I made each line of text it's own component.
That works fine. Now what I want to do is when I click on that Hover state I want the whole menu to go away, and everything revert back to the initial Default Button state. So I go into prototype mode and click on the ">" attached to the hover state. Then I go to the right, elect the tap action. From there my options are:
Default state of the line of text (IOW, not highlighted)
The problem is that I cannot select specific states within "component 1." If I select "component 1" then what it does is revert me back to the last state of component 1, which is the show menu state. That's not what I want. I want it to revert back to the Default State of "Component 1." The Action needs to be able to target specific states of the components, not just the last state that it was in.
How do I do this?
To extrapolate this out further... The Button text in the default state of "Component 1" says "Click Here." Lets say my menu options are simply "This" "That" and "The Other." Now logic would dictate that in the master component, I could create a "This State" where the Click Here text now reads "This," a "That" state where the Click Me text now reads "That," etc.
For each of these states I would guess that I could either:
1) Change the actual text from "Click Here" to "This" etc., or
2) Have text that reads "This" "That" and "The Other" in the main state, with all 3 hidden, and the for the "This State" I would hide the "Click Me" text and unhide the "This" text.
But either approach depends upon me being able to click on the hover state of one of thoe menu text items and target specific states in that "Component 1" component, and I don't see a way to do so.
Am I missing something? Is there a better way to do this?
Copy link to clipboard
Thanks for reaching out. If I understood correctly, you are talking about this feature:https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/38959297-allow-com...
If yes, I am afraid, this feature is yet not available so I'd request you to upvote this feature request to add voice to this feature. Feel free to reach out if you need any other assistance.
Thanks, I just went there and voted and commented. Unfortunately, it looks like this issue was raised a year ago and no movement on it. For me, without the ability to affect other components, state changes are kinda useless. I don't need to prototype state changes to a toggle switch. Everyone know what it looks like on vs off. What I need to see is when I turn it on, what ELSE does it do? How does it affect the UI? Does it enable other parts of the UI? I can't do that right now. Ugh.