Editing Properties (Inspector)

The Inspector is the panel for editing the properties of the selected component, located on the right side of the editor. When you select a component, its properties are shown here.

What you can edit

It varies by component, but you can generally work with the following.

• Position and size — placement based on Auto Layout
• Colors — background color, text color, and more. Every color can have separate Light/Dark mode values. (See Color)
• Font — text size, weight, and alignment
• Component-specific properties — for example, the text of a Label, the default state of a Toggle, or the min/max values of a Slider

You can check which properties each component has in All UI Components.

Light / Dark mode

When setting a color, you can define separate values for Light mode and Dark mode. If you use system colors for background and text colors, Dark Mode is supported right away with no extra work.

Connecting data and behavior

In the Inspector you set up not only properties but also binding the component to data and connecting an Action Flow to an event. What makes Layerz distinctive is that design, data, and behavior all come together in the same place.