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?
Best answer by Pavel_Kiselev
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 😉
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
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.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
