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

ДирективыТипОписаниеПример
simple-classString

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

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

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

Шаблон:

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

CSS:

.friday-class{
 animation: blinker 1s linear infinite;
 background: #FF00FF;
 } 
@keyframes blinker {
 50% {
  opacity: 0;
 }
}
simple-ifStringДанная директива позволяет скрыть или отобразить виджет, или его часть. Если заданное условие не удовлетворено, элементы убираются из объектной модели документа (DOM).

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

Шаблон:

<p simple-if="{data.model_id}">Модель обнаружена</p>

Клиентский скрипт:

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

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

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

Шаблон:

<p simple-show="new Date().getDay()===5">Ура, пятница!</p>
simple-styleStringИспользуйте эту директиву для настройки макета тега: цвет фона, настройки шрифта, указатель и т. д.

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

Шаблон:

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


  • No labels

© 2019-2024, SimpleOne

https://simpleone.ru