The property editor
Last updated
Last updated
The property editor is the main tool for configuring the elements on your page. When you double-click an element on the page or single-click it in the left-hand element tree, this draggable popup appears, displaying various fields for customization.
The top bar in the property editor consists of the element name, as well as a group of icons. The X on the right-hand side closes the element inspector.
The left-hand side shows the name of the currently selected element. Bubble will automatically generate a name that consists of the element type (i.e. Input or Button) and an alphabetical sequence (i.e. A, B, C).
This is an editable field where you can assign any name you want to an element:
The first icon shows a play symbol. Clicking this will expand a video tutorial relevant for the currently selected element. Note that not all elements have an associated tutorial – if the icon is not showing it means that there's no video available.
The second icon shows an information symbol. Clicking this opens the element inspector, which lets you inspect different ways in which this element interacts with the rest of your app.
In this case we have selected a button.
This shows all the that are stored on the current element, as well as their type and default value. From here, add new custom states, modify their names and default values, or remove them.
This section will list all the that are connected to this element. In the example in the above screenshot, we have one connected event (Button A is clicked). Clicking it will take you to the workflow editor and the associated workflow.
This section shows the that are connected to this element. In the example in the above screenshot we have one connected action (Show button A). Clicking it will take you to the workflow editor and the associated action.
This section shows the elements that are referencing the currently selected element in a dynamic expression. It will also list the parent container elements of those elements.
The icon showing a speech bubble icon will expand the for that element. This lets you take notes relevant for the currently selected element.
Right below the top bar of the you'll find the property editor tabs. Each one represents a category of properties that can be applied to the selected element.
The Appearance tab is where you set up the visual appearance of the element, such as its background style, borders, font, shadow, transparency and transitions. This is also where you can apply or detach .
For a detailed list and explanations of all appearance properties, refer to the core reference entry below:
Reference: Styling properties
The Layout tab is where you set up the responsive properties of an element, determining how the element behaves in relation to other elements on a responsive page. This includes properties like width/height, padding/margins and alignment.
For a detailed list and explanations of all responsive properties, refer to the core reference entry below. To learn more about responsive design, you can also check out the article.
Reference: Responsive properties Article series: Responsive design
The Conditional tab is where you set up that control the visibility and styling of the selected element. For example, you can make a button change color based on whether the user is logged in or not.
To learn more about how to set up dynamic expressions and use them in conditions, see the articles below:
Article: Dynamic expressions Article: Conditions
