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.
| Directives | Type | Description | Example |
|---|---|---|---|
| simple-class | String | 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: <p simple-class="FridayClass">It's Friday!</p> CSS: .FridayClass{
animation: blinker 1s linear infinite;
background: #FF00FF;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
|
| simple-if | String | This 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: <p simple-if="{data.model_id}>Model Detected</p>
CSS: <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-show | String | This 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. <p simple-show="newDate().getDay()===5">It's Friday!</p> |
| simple-style | String | Use 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. <p simple-style="{background: '#FF0000'}">Attention please!</p>
|
