Versions Compared

Old Version 13

changes.mady.by.user editor

Saved on

compared with

New Version 14

changes.mady.by.user editor

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

DirectivesTypeDescriptionExample
simple-classString

Create a class containing custom CSS style parameters, to easily apply it to your widgets.

Define the class in the CSS field of the Widget form.

To display a phrase with custom settings, do the following:

Template:

Code Block
<p simple-class="FridayClass">It's Friday!</p>


CSS:

Code Block
.FridayClass{
 animation: blinker 1s linear infinite;
 background: #FF00FF;
 } 
@keyframes blinker {
 50% {
  opacity: 0;
 }
}


simple-ifStringThis directive enables the widget or a part of it, if the set condition is met. Otherwise, the directive disables it.

The following example enables a block of a widget if a set condition is met.

Template:

Code Block
<p simple-if="{data.model_id}>Model Detected</p>

CSSClient script:

Code Block
<p simple-if="{data.model_id}>Model Detected</p> 

Client script: 
( () => { 
   const parameter = new URLSearchParams(window.location.search).get('model_id');
   s_widget.setFieldValue('model_id', parameter);
})();


simple-showStringThis directive shows a set value if a condition is met. If the condition is not met, the value is not displayed, though it remains in DOM as hidden.

In this example,  the directive defines the current day of the week and displays a corresponding phrase “It's Friday!” in the widget.

Code Block
<p simple-show="newDate().getDay()===5">It's Friday!</p>


simple-styleStringUse this directive to customize the widget layout: background color, font settings, pointer, etc.

In this example, you can see, how to customize the text style.

Code Block
<p simple-style="{background: '#FF0000'}">Attention please!</p>


...