• Containers
• Labels
• Buttons
• Input Fields
Documentation
Components
Containers
Containers are the building blocks of your UI. They act like boxes that can hold other elements.
How to use Containers:
- Click the "Container" button in the sidebar to add a new container to your canvas.
- Drag the container to position it where you want.
- Resize the container by dragging its corners or edges.
- Use the properties panel to customize the container:
- Change the background color or image
- Adjust the layout (flex direction, justify content, align items)
- Set margins and padding
- Containers can hold other elements, including other containers, labels, and buttons.
Labels
Labels are used to display text and images in your UI. They're great for titles, descriptions, or any other text content as well as custom images.
How to use Labels:
- Click the "Labels" button in the sidebar to add a new label to your canvas.
- Drag the label to position it where you want.
- Click on the label to open the UI Editor, and then click on - Background - to edit its color, image, or text.
- Labels can be placed inside containers or directly on the canvas.
Buttons
Buttons are interactive elements that users can click. They're used to trigger actions in your UI.
How to use Buttons:
- Click the "Buttons" button in the sidebar to add a new button to your canvas.
- Drag the button to position it where you want.
- Use the properties panel to customize the button:
- Change the button color
- Adjust the text
- Set the button size
- Choose an action for the button (e.g., open links, show/hide another element, count clicks)
- Buttons can be placed inside containers or directly on the canvas.
- To make your button interactive, use the "Click Actions" dropdown in the properties panel to select what happens when the button is clicked.
You can always select any element on the canvas to see and edit its properties in the right-hand panel. Experiment with different combinations of containers, labels, and buttons to create your perfect UI!