Директивы API

Используйте следующие директивы для изменения виджетов. Директивы могут быть добавлены к любому тегу в поле редактирования Шаблона на форме Виджет.

simple-class

---

Тип: String

Создайте класс с пользовательскими параметрами CSS стиля, чтобы быстро применять его в виджетах.

Определите класс в поле CSS формы Виджет.

Для отображения фразы с пользовательскими настройками, следуйте примеру:

Шаблон

<p simple-class="friday-class">Ура, пятница!</p>

CSS

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

simple-if

---

Тип: String

Данная директива позволяет скрыть или отобразить виджет, или его часть. Если заданное условие не удовлетворено, элементы убираются из объектной модели документа (DOM).

В данном примере блок виджета включается, если выполняется заданное условие.

Шаблон

<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

Эта директива позволяет скрыть или отобразить виджет, или его часть. Если заданное условие не удовлетворено, скрытая часть остается в объектной модели документа (DOM).

В этом примере директива определяет текущий день недели и отображает соответствующую фразу "Ура, пятница!" в виджете.

Шаблон

<p simple-show="new Date().getDay()===5">Ура, пятница!</p>

simple-style

---

Тип: String

Используйте эту директиву для настройки макета тега: цвет фона, настройки шрифта, указатель и другое.

В этом примере вы можете увидеть, как настроить стиль текста.

Шаблон

<p simple-style="{background: '#FF0000'}">Внимание!</p>