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 style parameters, to easily apply it to different 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-if | Boolean | This 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-show | String | This 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-style | String | Use this directive, to customize the widget layout – background color, font settings, pointer, etc. |
| Code Block |
|---|
<p simple-style="{background: '#FF0000'}">Attention please!</p> |
|