Binding Data to UI

Binding means connecting data to a UI component. Once you bind, the data shows up on screen, and when the data changes, the screen updates on its own. This is the core technique that makes your design come alive in Layerz.

Binding a value to a component

Select a component and connect the data you want to display from the Inspector.

• Bind a Label's text to a title field, and it shows that value.
• Bind a Toggle's state to a done field, and the data decides whether it's on or off.
• You can bind an Image to image-type data.

Input components like Text Field, Slider, and Toggle bind two-way. The data not only appears on screen, but whatever the user enters or adjusts is also written back to the data.

Binding an array to a List

The most powerful binding is connecting an array to a List.

1. Select the List and bind array data (for example, a Todo array).
2. Cells repeat automatically, one per array item.
3. Bind the components inside a cell (Label, Toggle, etc.) to each item's fields.

In the editor, mirror cells appear to preview the array count, so you can immediately see how the real data will fill in.

Data sources

You can pull the data you bind from three scopes.

• Project — data shared across the whole project
• Page — data that belongs to the current screen
• Cell — the item data for each individual List cell