abstra-docs
Search…
⌃K

Springs

Springs are used to specify how your pages and components should look like in different device sizes.

Default behavior

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

Adding springs

Hooks

Hooks between element and view
Hooks between elements

Spring shooter

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

Behavior

Springs make elements stretch and/or change position relative to different screen sizes.

Springs attached to the view

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

Fixed sizes

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.

Scrolling

You can find scrolling basics here: Scrolling
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.

Chaining elements

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.

Components

Make sure you understand Componentsbasics before proceeding.
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:

Breakpoints

Breakpoints can be used with springs to make fully responsive apps.
When you add a breakpoint to an element, you need to set its springs separately for each breakpoint.
Last modified 8mo ago