Join us in Beta Testing the new Layouts component! (Rows / Columns for the Drag and Drop Interface)
You may have noticed a new beta component on your components panel: Layouts!
We’re excited to share a preview of Layouts to our most loyal and close Thunkers to test. This component will allow you to design screens in a way that’s more responsive to different screen dimensions. In the past, your components simply stretched to fill the screen. While this ensured that your end users could access all parts of the app across different devices, it didn’t always look the best. By combining Layouts with the Resize Mode property, you will be able to create dynamic layouts that look great across a range of devices.
Without Layouts
a) iPhone 12 Pro
b) Ipad Air
c) Samsung Galaxy S8+
a)b)c)
Desktop
With Layouts
a) Iphone 12
b) iPad Air
c) Samsung galaxy S8+
a) b) c)
Desktop
If you’ve ever used our ‘Snap to Place’ builder, then Layout components will feel familiar (in fact, it helps power our updated project converter - more information to come soon about this). The Layout component can house special Container components which define how components within them are arranged: horizontal containers place components side-by-side in a row and vertical containers stack components on top of one another. One of the great benefits of these containers is that you can set the alignment of components within the containers.
Using the Property Panel for a Layout or Container component, you can insert additional Container components, even nesting them within another Container component. If you need to change the order of containers, simply drag them within the Component Tree to the position you desire.
Please note that, at this time you must use the Component Tree to drag components into Layouts; however we plan to eventually allow creators to drop them directly into Layout components much like we do with Group components.
While we’re excited to share this new experimental feature with you, we want to remind you that it’s still in beta and therefore may still change before we release it more widely. This also means you may experience bugs which is why it’s still in beta. The most important thing we can ask you to do is clearly document and report any issues as they arise. This will allow us to fix, iterate upon, and then finally release this component out of beta faster!
We’d love your feedback on ways to simplify the experience! If you are not seeing this component but would like to take part in the beta testing and provide feedback please send a message to Cassandra with the message “I want to join beta testing” and the email you sign into thunkable with.
Happy Thunking,
Jared