Skip to main content
tomokeefe69
Participant
Nov 18, 2022 5:49 PM UTC
Answered

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

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 is closed to new replies. Start a new post to keep the conversation going.
    AkinGn
    AkinGnCorrect answer
    Community Expert
    Nov 18, 2022 10:10 PM UTC

    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!

    View reply

    1 reply

    AkinGn
    Community Expert
    AkinGnCommunity ExpertCorrect answer
    Community Expert
    Nov 18, 2022 10:10 PM UTC

    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!

    Translate
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices