How to style a dom node
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.
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.
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.
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.
Update the needed settings with the hover-specific value. The overriden settings are marked with the star.