How to style a dom node

How to style a dom node

How to style a dom node and bind a CSS setting value to different sources.

· 1 minute read

When you select a DOM-node in the component editor on the right sidebar you see the panel with CSS settings.

Styling can be static or dynamic. If static - you explicitely define a value for a CSS property.

Screen Shot 2021-11-23 at 23.05.27

The value can be dynamic, coming from:

  • Method
  • Component data
  • Store
  • Component prop

To change the value source, click on the arrow near the CSS setting and pick a needed type.

Screen Shot 2021-11-23 at 23.08.09

Screen Shot 2021-11-23 at 23.08.13

When you use data, prop or store as a value source you can specify the JSON data path to the value if the store or data is a nested object and the value is located somewhere deep inside.

Screen Shot 2021-11-23 at 23.13.34

If data, prop or the store is the value - you can leave the path empty.

You can choose a syncronous method to be used as a source for the value. The method can make computations based on the components data, props or the store, and return a value which will be reactively recalculated once the data, prop or store is updated by another method.

You can set up specific styling for the hover mode of the dom-node. Click on the "pointer" button on the right sidebar. You will see the same CSS settings, but specific for the mouse-over mode.

Screen Shot 2021-11-23 at 23.22.49

Update the needed settings with the hover-specific value. The overriden settings are marked with the star.