Summary
This panel appears as soon as you have selected any element (screen, component, or widget). This is where you can find all the settings that you need to customize the element. On top of the panel, you can find alignment settings for your elements. You can change the appearance of components and screens in the "Design" View, and you can add Data Binding (Variables) and Actions in the "Data & Logic" View. When you have a Widget selected, you can open the configuration of the widget in the right panel.
The settings in the right panel depend on the type of element you have selected:
For Screens
You can change the screen's name, background color, or image. Additionally, you can adjust the following settings:
- Start Screen: Mark the selected screen as the starting point of your application.
- Overlay: Display the selected screen as an overlay.
- Fixed as Overlay: Prevent the selected screen from scrolling when shown as an overlay.
- Blur Background: Blur the background image of this screen.
- Show Background: Display the selected background color or image instead of the default color.
Additionally, you can add a Master Screen to the selected screen, allowing you to add repeating elements like navigation bars easily. Learn more here.
For Components
The settings in the right panel vary for different components. For example, you can adjust the placeholder text for text fields, add options for radio buttons and checkboxes, or edit the label for sliders. However, some options apply to all or most components:
| Change the name of the component. |
| Adjust the position, size and corner radius of the component. |
| Adjust the responsive positioning of the component. Learn more below. |
| Change the background color or gradient. |
| Change the border color and size. |
| Edit any text (font, size, look, spacing and alignment) in the component. |
| Add a shadow to the component. |
| Switch component states to adjust the appearance in different states. Learn more below. |
Responsive Positioning:
- coming soon -
Component States:
Different components offer different states in which they might appear differently. Change the state you are editing at the bottom of the settings panel. For example, a text field can have the states: Normal, Hover, Focus, and Error.
For Widgets
For most widgets, you use the right panel to change their name and open the configuration, which causes a window to pop up with all the relevant settings for each widget. Learn more in the widget article.
The "OR" Widget is the only exception. This widget is configured by adding connections to and from screens. You can do this in the "Data & Logic" view by dragging on the handles of widgets, components, and screens. Once you have connected the "OR" Widget with target screens, use the right panel to set the rule that determines in which case this target screen is entered. Learn more about how to use the "OR" Widget to create conditional navigation here.