You configure a component by editing its properties. Some properties, such as position and size, can be changed directly on the canvas. Other properties must be changed using the Inspector. You can show and hide the Inspector using the Inspector button above the editor canvas:
The Show/Hide Inspector Button
Tip: You can also access the inspector by right-clicking a component and choosing Inspect Component from the context menu, or by using the associated keyboard shortcut.
The Inspector contains fields for editing the component properties. Some properties are unique to each component, while others are common to all components. In addition, some of the common properties do not apply to certain components. In those cases, the fields for those properties are disabled. See the Component Reference guide for descriptions of individual properties.
Text Values
Inspector Fields for Text Values
Some properties accept a single line or multiple lines of text. In a multiple-line text field, hitting the Enter key will start a new line, rather than applying your changes. To apply your changes, use the Tab key to move to the next field.
Numeric Values
Inspector Field for a Numeric Value
Some properties require a numeric value. The text in these fields is right-aligned, and depending on your web browser, there may be a small stepper on the right side. Clicking the stepper will increase or decrease the value by one.
Yes/No Values
Inspector Fields for Yes/No Values
Some properties require a simple yes or no value. These fields have a small checkbox on the left side, and their text represents the current value of the property.
Fixed Values
Inspector Field with Fixed Values
Some properties have a specific set of values that are allowed. These fields have a set of small arrows on the right side, and when clicked they reveal a menu to select from these values.
Recommended Values
Inspector Field with Recommended Values
Some properties have a specific set of recommended values, but also support free-form values. These fields have a small button on the left side.
Clicking that button allows you to pick from one of the recommended values. Other values can be used by typing directly into the field.
Color Values
Inspector Field for a Color
Components support stroke, fill and text colors. These fields have a small button on the left side that shows a swatch of the current value.
Clicking that button allows you to pick from a palette of built-in colors. Other colors can be used by typing their “hex code” values directly into the field.
Pickable Values
Inspector Fields that have Pop-Up Pickers
Some property values can be selected using a pop-up picker window. These fields have a small magnifying glass on the right side. Clicking the magnifying glass opens the pop-up picker window.
Some of these fields only accept values chosen from the picker, while others also include a field for entering a custom value.
Sub-Properties
Inspector Field for a Sub-Property
Some properties are dependent on the values of other properties. For example, the Only When field in the Visibility section is dependent on the Visibility property above it. The labels for sub-properties are right-aligned and begin with an ellipsis.