Springs
Springs are used to specify how your pages and components should look like in different device sizes.
By default, any element will keep its size and position relative to the top-right corner of the view
Notice that the navbar bottom is not always aligned to the view bottom
Hooks between element and view
Hooks between elements
Using the spring shooter in the Responsivity Inspector tab, you can add springs on the interface without having to manually drag and drop them.
Spring shooter allows you to add springs very fast
Springs make elements stretch and/or change position relative to different screen sizes.
Attaching a spring from an element to one side of the view will make the element fixed relative to this side of the screen.
Fixing an element to both sides will make it stretch and compress horizontally.
You may also do this vertically, making the element adapt to the screen's height.
You may combine both of these behaviors
By enabling the option Fix width, elements won't have their width changed by springs, only their position. This can be used to center elements:
Once again, the same can be done vertically using Fix height.
Elements fixed to the view won't change positions on scroll. Note that horizontal and vertical scrolling are affected respectively by horizontal springs and vertical springs.
Use springs between two elements to maintain their distance from each other.
Chaining elements allows you to fix their position relative to the view, in this case, to the top right corner.
Anchoring both elements with springs will make them both flexible, changing their size according to the size of the view.
Springs inside components behave the same way as in pages.
You can use springs to make components responsive relative to the Subview used to display them:
You can also make a component inside another component, using the springs to constrain how these components behave:
When you add a breakpoint to an element, you need to set its springs separately for each breakpoint.
Last modified 1yr ago