Props Panel
Editing Elements Props
To open the element props editor, select the desired element in one of the following ways:
  • Click on the element on the page.
  • Click on the element on the layers panel.
  • Set the сaret (text cursor) on the code element in the editor.
Once the element is selected, its props panel will appear on the right. There, you will see:
  • Element name.
  • Tab bar with styles and props.
Here, you can set the visual representation of the element. You can configure both default state and pseudo-class styles: hover, active, focused and more.
All style properties are grouped into the following tabs:
States (pseudo-classes)
To configure the styles for a pseudo-class, select the desired style in the tab and change it. Don't forget to go back to the default state. To check how it works, go to the preview mode.
The Props tab contains non-style properties that are defined by the component developer. There are various properties. For example, the GoogleMap component has the Query property which allows you to specify a place that will be shown in the center of the map.
Tips&Tricks of the element props panel
The ↓ and  ↑ keys let you minimize and maximize the numeric value in the input field by one. If you hold down the Shift key, the value changes by 10,  Cmd(Ctrl) — by 100, Alt — by 0.1.
You can use the following mathematical operations in the input field: +, -, *, /. For example, enter the 720px/2 value, click on Enter and get the 360px value.
If you enter an expression containing different units, the input field will reformat it into a calc value. For example, 100vh-60px will be converted to calc(100vh-60px).
All units of measurement available in CSS can be used.
Made on Quarkly