Skip to main content
Participant
November 18, 2022
Answered

Component with default, hover and toggle state + overlay interaction.

  • November 18, 2022
  • 1 reply
  • 358 views

I would like to be able to tap a compenent, open an overlay. compenent shows toggle state. Tap compenent again to close overlay end with compenent state as default. 

 

As of now I can open/close overlay but compenent state wont change when I tap again.

 

Can this be done? If so, what am I doing wrong? 

 

 

Thanks! 

 

-Tom

    This topic has been closed for replies.
    Correct answer AkinGn

    Hi @tomokeefe69, as you can use one trigger for one action, toggling the component and triggering overlay doesn't sound possible with a single tap trigger. However, I managed to do it by pasting the overlay content to component's toggle state (after selecting toggle state from the right sidebar and getting into the "inner" level of it by double clicking the button, and then pasting the overlay content to it. (I also suggest making an invisible, full width & full height rectangle at the very bottom layer of the overlay content to make it closable like a real overlay on tap) You can see the prototype here: https://xd.adobe.com/view/fe26aed7-3e62-424f-ab38-528d9c16edcd-ab75/ and the file here: https://www.dropbox.com/s/fbgfft55i0eeomq/toggle-overlay.xd?dl=0 
    Hope this helps!

    1 reply

    AkinGn
    Community Expert
    AkinGnCommunity ExpertCorrect answer
    Community Expert
    November 18, 2022

    Hi @tomokeefe69, as you can use one trigger for one action, toggling the component and triggering overlay doesn't sound possible with a single tap trigger. However, I managed to do it by pasting the overlay content to component's toggle state (after selecting toggle state from the right sidebar and getting into the "inner" level of it by double clicking the button, and then pasting the overlay content to it. (I also suggest making an invisible, full width & full height rectangle at the very bottom layer of the overlay content to make it closable like a real overlay on tap) You can see the prototype here: https://xd.adobe.com/view/fe26aed7-3e62-424f-ab38-528d9c16edcd-ab75/ and the file here: https://www.dropbox.com/s/fbgfft55i0eeomq/toggle-overlay.xd?dl=0 
    Hope this helps!