Ничего не найдено
Быстрый старт
CSS
Компоненты
Меню
Динамическое содержимое
SEO-паук
Социальные теги
Прочее
Установка
Категории v3
Категории v3: типы свойств

Создание Молекулы для Ева Блоков

Все молекулы Ева Блоков это компоненты. Для того, чтоб создать новую молекулу — достаточно создать компонент с определенным названием и описать его свойства. Все созданные подобным образом компоненты подчиняются всем основным правилам компонентов.

Для создания молекулы, создадим папку: /eva2/components/render/Evablock/Molecule/Test/. Внутри мы разместим файлы index.php и index.json.

index.php

Данный файл просто отвечает за вывод компонента. Об этом можно почитать в разделе общей информации о компонентах.

index.json

Рассмотрим подробнее данную json структуру:

  • type — должен быть равен evablock-molecule
  • icon — классы иконки. Можно взять отсюда: https://materialdesignicons.com/
  • name — название молекулы. Может быть любым, но не желательно делать слишком длинным
  • color — цвет фона под иконкой молекулы
  • hidden — скрыта ли данная молекула за кнопкой «показать все молекулы»
  • atoms — массив с описанием атомов (полей) молекулы. Может быть пустым массивом.

  1. Иконка берется из атрибута icon
  2. Фон под иконкой берется из атрибута color
  3. Если hidden == true, то молекула будет скрыта за этой кнопкой.

Рассмотрим подробнее структуру элемента массива atoms:

  1. code — отвечает за то, в какой индекс значение данного атома попадет. Например, если code == "test", то значение попадет в $props["code"]["value"]
  2. type — тип атома (изменяя этот параметр, атом может стать строкой, картинкой, цитатой и т.д.). О всех доступных типах смотрите ниже.
  3. name — любое название, чтоб пользователь понимал, за что отвечает данное поле
  4. hidden — если hidden === false, то данное свойство выводится в главной области редактора, если нет, то скрывается за кнопкой настроек. Рекомендуем только одно свойство оставлять с hidden = false.

Все типы атомов

text

textarea

Данное поле имеет дополнительную опцию. Например, если это поле для ввода CSS и ни для чего другого, то можно указать это:

  • mode — режим редактора:
    false — обычное текстовое поле
    html — редактор кода Ace
    wysiwyg — визуальный редактор
  • ace_mode — язык программирования в редакторе Ace

checkbox

videolink

map

image

У данного атома может быть дополнительное свойство add_fields, для его описания смотри поле gallery.

file

У данного атома может быть дополнительное свойство add_fields, для его описания смотри поле gallery.

gallery

У данного атома может быть дополнительное свойство add_fields. Ниже описаны все возможные значения:

files

У данного атома может быть дополнительное свойство add_fields, для его описания смотри поле gallery.

element_select

element_select_multi

evablock

multiple

У данного атома может быть дополнительное свойство add_fields, для его описания смотри поле gallery. У данного поля add_fields является обязательным.