FlipOnHover Property for flip content reactive
166
Views
2
Comments
New
OutSystems UI

As of now in order to achieve functionality  of flipping content when mouse is on it we have to use forge components and custom JavaScript. These methods are buggy in some cases. 


Suggestion:

Flip content UI component should have property for OnHover event which flips the content when cursor is on it. 


Hi @Aman Singh Rajput ,

With newest version of FlipContent, you don't need any extra Forge components, and you don't need to write any javascript.

A possible implementation :

  • wrap the FlipContent in a container
  • set the flipOnClick to False
  • add actions to the onmouseenter and onmouseleave events of that container
  • use FlipContentBack client action in the OnMouseEnter handler
  • use FlipContentFront client action in the OnMouseLeave handler

above implementation will only flip to the back content as long as mouse is over it, and then go back to front.  Dependent on what exactly you want, your implementation might have to be a bit different.

I haven't tried out the deprecated version, but it looks like you can do the same thing (adding events to a wrapper container) and inside them, instead of calling the flip client actions, manipulate the boolean that is set as the IsFlipped variable of that widget.

Dorine

PS: alternatively to wrapping the whole widget in a container, you can wrap the content of both branches in a container (maybe they already are) and put the events at that level, a matter of taste, you will have to add event to 2 containers, but you won't have to deal with making sure the enclosing container isn't larger than the actual flipcontents.  I personally would go for that. 

I think, no matter where you put the events, it can only work well if both the front and the back take up the same space on your screen, otherwise it will either not work, or confuse the user.

Changed the category to
OutSystems UI