Adding Components
Pick components from the UI Library and place them on the screen
2 min read
A screen is filled with Components. Layerz components are not pictures — they are the real native UI that the OS provides. So what you see on the canvas becomes the real app exactly as-is.
Placing Components
Open the UI Library and Drag and Drop the component you want onto a Page. Auto Layout is applied automatically based on where you drop it, so the component is always placed in a neatly arranged state.
If you just select a component in the Library without dragging, it is added to the exact center of the View that is currently selected in the editor.
Basic components like View can have other components as children, so you can nest them to build the screen's structure.
Component Categories
The components in the UI Library are divided as follows:
- Standard — View, Effect, Image, Label
- Container — List, Stack
- Control — Button, Text Field, Text View, Activity Indicator, Segmented Control, Slider, Toggle, Stepper, Page Control, Progress, Map, Color Well, Date Picker, Calendar, Web
The purpose, properties, and data binding of each component are covered in detail in All UI Components.
In addition, you can place your own custom components and built-in Templates from the Library as well.
Next Steps
Once placed, you edit a component's properties in the Inspector, bind it to data, or connect an Action Flow to an event to bring it to life.