Versions Compared

Old Version 15

changes.mady.by.user editor

Saved on

compared with

New Version 16

changes.mady.by.user Dina Baksheeva

Saved on

Key

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

Use the following directives to modify the widgets. The directives can be added to any tag in the Template editing field on the Widget form.


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
friday-class">It's Friday!</p>

CSS:

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


simple-ifStringThis directive
enables
allows you to hide or show the widget, or
a
part of it
, if
. If the
set
specified condition is
met. Otherwise, the directive disables it
not satisfied, the elements are removed from the Document Object Model (DOM).

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>

Client script:

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


simple-showString

This directive

shows a set value if a condition is met

allows you to hide or show the widget, or part of it. If the specified condition is not

met

satisfied, the

value is not displayed, though it remains in DOM as hidden

hidden elements remain in the Document Object Model (DOM).

In this example,

 

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

Template:

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


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

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

Template:

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