Versions Compared

Old Version 6

changes.mady.by.user Irina Grishina

Saved on

compared with

New Version 7

changes.mady.by.user Irina Grishina

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 different your widgets.

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

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-ifBooleanThis directive enables or disables the widget, or some part of it, if the set condition is met (true) or not (false).


Code Block
<div simple-if="{data.model_id}">

<p>Model Detected</p> 
</div> 
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 the condition is met. If the condition is not met, the value is hidden, but remains in DOM as hidden.


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


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


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


...