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

Общая информация

Весь сайт должен быть разработан с использованием компонентов. Компоненты могут быть сложными, а могут быть и очень простыми.

Для того, чтоб отобразить компонент на сайте — в любом php файле при разработке напишите следующее:

Разберем подробнее.

Component::create("test-counter") — компонент с названием test-counter. Название компонента определяет откуда он берет данные. В случае с test-counter это два варианта:

  1. /eva2/components/render/Test/Counter/index.php — данный вариант имеет смысл, если ваш компонент является сложным и имеет scss и js в своем составе.
  2. /eva2/components/render/Test/Counter.php — данный вариант имеет смысл использовать если компонент простой и состоит только из php файла.

PHP-файл

Рассмотрим сложный вариант. Создайте файл /eva2/components/render/Test/Counter/index.php. Пустой файл компонента должен выглядеть следующим образом:

JS-файл

id="<?=$this->getId()?>" — важная строка. Это является обязательным, если компонент имеет в составе js файл. Но рекомендуется всем компонентам давать id. Компонент не обязательно должен быть div-элементом, но корневой DOM-элемент компонента должен быть один.

В PHP-шаблон компонента, в переменную $props передаются все свойства переданные через setPropssetProps не является обязательным методом при создании компонента. Может быть такое, что ваш компонент не нуждается в свойствах.

Создайте /eva2/components/render/Test/Counter/index.js с содержимым:

Данная конструкция является обязательной.

JS-функция получает 3 параметра:

  1. Экземпляр EvaComponent
  2. CurComponentObject является ссылкой на DOM элемент с дополнительными свойствами (которые рассмотрим в следующем разделе).
  3. CurComponentProps является объектом со свойствами, переданными через setProps.

SCSS-файл

Создайте файл /eva2/components/render/Test/Counter/index.scss.

Если вашему компоненту нужны стили, то мы рекомендуем давать корневому элементу какой-то класс и строить scss файл используя конструкцию:

Итого

Мы создали пустой компонент из 3-х файлов. Имейте в виду, если вашему компоненту не нужен js или scss - данные файлы создавать не нужно. Каждый компонент можно подключать сколько угодно раз. Вполне нормальным будет отобразить несколько одинаковых компонентов рядом: