Upvote 1

Dynamic size and styling properties

Under Consideration Ingrid van Baast 5 years ago

It would save a lot of time is I could set the size and color properties of an element dynamically.

Usecase: In my prototype I have a canvas, with a tab-bar on top and two side-panes, one on the left the other on the right.

I don't want the panes to overlap the canvas or the tabbar, so I need to shrink/grow my canvas and move it to a new position when a pane is opened or closed.

This could be super easy if I could set the value of the x position and width of my canvas and tab-bar properties via a variable. I would then (re)calculate the variables whenever I opened or closed any of the panes.

Current sitation:

I have to recalculate the position and size for each element that I want to move (or resize) individually whenever I open or close a pane.


Another benefit of using a variable to set the position and size in an element is that I could see in the properties that the value is a variable rather than fixed.


I have the same issue with dynamic setting of a color. I use color coding in my prototype and want multiple elements to change color depending on the zone I'm in.

Replies (1)
photo
1

You're right that you can't resize the Canvas itself dynamically right now. However, you should be able to update an element's positioning and size based on a Variable currently. You could combine the value of the Variable along with "On Variable Change" events and conditions to create dynamic sizing. You could also do something similar with colors, though a Variable isn't able to store the color of an element.

photo
1

I created a variable to calculate the shift that I needed in either left or right (this is the difference between my closed and open pane width). But then I had to calculate the position of each component that I want to move individually.

Would have been nice if I could set a move event on a group.

photo
1

While you can't create an event on a Group directly, you can have a "Move" event for another element that moves an entire group.

photo
Leave a Comment
 
Attach a file