General techniques

Conditional formatting

You can use the expression below to achieve conditional formatting. It is very similar to conditional expression, or ternary operator.

${condition && exprIfTrue || exprIfFlase}

The ${} notation is an accessor that allows you to access data in your code. Inside the ${}, the conditional operator manages the conditional operation.

For example, if you want to set a font color to red if a certain condition is true, and black if it is false, you can use the expression like this:

${ isConditionTrue && "Red" || "Black"}

In this example, if the variable isConditionTrue is true, the expression will evaluate to "Red". If it is false, it will evaluate to "Black".

Basic Calculating in CSS styles

1. Using calc() : calc() is a built-in CSS function that allows you to perform simple arithmetic calculations on CSS property values. It works with various units like pixels, percentages, ems, rems, and more.

   Here's an example of how you can use calc() to calculate the width of an element as 100 pixel plus 20% of its parent element's width:

   calc(100px + 20%);

2. Using accessor :

   If you need to perform more complex calculations that are not possible with calc(), you can use JavaScript expressions inside CSS. To do this, you can use the ${} syntax in a template literal.

   Here's an example of how you can use a JavaScript expression to set the element size

   ${960-2*30}px;

   This will evaluate the JavaScript expression 960-2*30 to 900, and then append the "px" unit to the end, resulting in size of 900 pixels. Further more, you can conbine other data with it together. You may add custom variables in Data and use them here.

   ${#page.custom_width-2*#page.custom_margin}px;

   This will evaluate #page.custom_width-2*#page.custom_margin, and then append the "px" unit to the end. By using custom variables like this, you can easily change the CSS properties of a set of elements together by modifying the values of your data.

Interactive styling example

Here is a example to use the techniques above to highlight number of interest.

1. Create data node

   
2. Create a list element and drag a text element inside, set text to ${$item.n}

3. Create a page variable called number in Data Store

4. Create a input element to set page variable

   1. Set Config -> Property -> Input type to 'number'

   2. Add interactions, attention: Set Action Parameters as the image do.

      
5. Set text element styles parameters

   1. set width and height to 64px

   2. set background color to ${$item.n==#page.number&&'red'||'green'}

6. Click 'Preview' to see the final result. Enter any number between 1 to 10 in the input to activate highlight number.