LS 2.0. Компоненты


Немного о компонентах

Научимся расширять, дополнять и делегировать компоненты.
А так же делать всякие прикольные штучки.

Конструктивная критика приветствуется!
Так же буду рад любой дискуссии по теме.





Расширяем и дополняем компоненты

Речь пойдет о добавлении своих темплейтов, стилей, модификаций в существующие компоненты и как это делать правильно.

Создание модификации

На примере компонента alert
В этом копмоненте разработчики «из коробки» реализовали 4 цветовых модификации. Они показаны на картинке справа от этого текста.

Многие бутстрап юзеры, как и я, возможно почувствовали нехватку еще одного стиля!)
Давайте добавим его.

Новая модификация будет называться у нас warning, исходя из этого нам нужно описать css класс, который будет соответствовать ей. (По умолчанию имеет вид название-компонента--название-модификации).

Итак, стиль готов:
.ls-alert.ls-alert--warning {
    background-color: #fcf8e3;
    color: #8a6d3b;
    border-color: #faebcc;
}


Теперь мы можем вызывать alert с модом warning:
{component 'alert' text='Это уведомление с модификацией warning' mods='warning'}


Получаем результат:


Почти готово. Осталось понять куда пристроить наш css?

P.S. Всё, что описано ниже — можно не читать, а css код засунуть хоть инлайном в код — будет работать.

Оформление кода, красиво и правильно(?)
Правильно с точки зрения (моей!) логики и удобства, которое чувствуется когда расширяемый компонент начинает толстеть и мешаться\теряться в общем потоке стилей проекта.

Итак по порядку.
В своем проекте (будь то шаблон, плагин или шаблон внутри плагина) создаем папку компонента:
— для шаблона — /шаблон/components/alert
— для плагина — /плагин/frontend/components/alert
— для шаблона в плагине — /плагин/frontend/skin/шаблон/components/alert

Создаем любое количество стилевых файлов (на Ваше усмотрение, можете создать 1 а можете для каждой модификации создать отдельный), укладываем их в папку css, что нужно создать внутри папки компонента.

Рядом создаем файлик component.json с кодом:
{
    "styles": {
        "alert-warning": "css/alert-warning.css"
    }
}


Структура файлов у меня получилась следующая:
|- css\
|-|- alert-warning.css
|- component.json


Теперь когда движок будет загружать компонент alert, он будет загружать и ваши стили так же.
Не надо полностью копировать себе в проект папку компонента со всеми его файлами! Копируйте только те файлы, которые вы хотите модифицировать.

Это упростит дальнейшую поддержку вашего проекта.

Создание темплейтов


Старый пример компонента найти можно тут:
telegra.ph/LS2-Statichno-dinamicheskij-komponent-03-13
сам компонент, может кому-то пригодится
yadi.sk/d/vrU_i4CP3FKzBQ

Уже пишу, пишу...

4 комментария

avatar
Спасибо за советы по работе с новым движком. А есть какой-то споосб автоматизировать создание компонентов, gulp может или еще что, чтобы задал название компонентов, и получил папки с готовой структурой подпапок и json
avatar
Круто, спасибо за статью.
avatar
Новый компонент мне создавать лень. Если у меня проект — плагин, это надо целый хук вызывать описывать, божемойкакмуторнотовсё, поэтому я возьму существующий.
вредный совет
  • ort
  • 0
avatar
Это ни в коем случае не совет, а описание процесса создания «примера».
Я очень уставший это писал.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.