Skip to main content
Question

Are custom variant shapes possible?

  • December 19, 2021
  • 2 replies
  • 667 views

iknowbryan

Is it possible to create custom shapes for the variant bounding box?

Or better yet, a way for triggering the various mouse interactions only when the mouse interacts with the internal contents rather than the variant bounding box.

Think of a circular button that only triggers the hover variant when the mouse is actually touching the circle (not just anywhere in the square that contains this)

I’m specifically having an issue with trying to create a submenu interaction on mouse-enter.
Each main item is its own component with two variants (open/closed).
On mouse enter, it opens the submenu via swap.
Ideally, when the mouse leaves the main item and enters the item below, the first submenu closes and the new submenu opens.
However, because the bounding box of the first item extends down/above the second item, it stays open as the second submenu opens.

Screen Shot 2021-12-19 at 3.01.05 PM

Is there a better way to make this happen?

Was thinking a custom variant shape would solve this and also probably solve lots of other issues.

This topic has been closed for replies.

2 replies

Gleb
  • Power Member
  • 4708 replies
  • December 19, 2021

No, bounding box of an element is always a rectangle, so to implement this you need multiple separate rectangles of different sizes.


  • 0 replies
  • January 18, 2022

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings