Skip to main content

Hello,

I have created a Button component. Now I would like to optionally add a drop shadow.


With the Boolean Properties it’s possible to show or hide elements. I would like to show or hide the drop shadow. The background of my button is not a separate element, it just the colored background of the text. I have no option to set the Boolean setting on the layer with the shadow.


Does anyone have a tip?

Well, just make a background as a separate layer, place it absolutely, set constraints to take the whole space and bind boolean prop to it. Done 😉

Hi @Cherryblossom36, Thank you for reaching out about Boolean Properties. I understand how handy that the drop shadow in a component has a boolean property.


I completely agree with the @Pavel_Kiselev method (Thank you so much!) so please give it a try!

Below is a visual supplement for you, and you can check the details for Absolute position here:Explore auto layout properties

Screenshot 2024-02-15 at 12.48.40


I hope this information sheds some additional light for you! Please let us know if we are missing any additional points!


Thanks,

Thank you so much! I didn’t know about the absolute position in auto layout! That’s the solution. 🙂

Thanks for the background tip! I, however don’t think this is a long-term solution. We build our components to better align with code and have as few layers as possible. Buttons, don’t have separate backgrounds in CSS; the color is set as a box (aka the Frame) style, as is the drop shadow. So, at some point, including effects for booleans (along with a number of other things) would be better than having to create separate background, particularly for components more complex than a button.

edit: booleans for effects.

Reply


Terms & ConditionsCookie settings