0.0.5 • Published 3 years ago
common-front v0.0.5
Динамический адаптив (Dynamic Adapt)
TS функция для комфортной адаптивной верстки. Позволяет "перебрасывать" объекты DOM в зависимости от потребностей.
Применение.
Для перещаемого объекта пишем HTML атрибут - data-da и указываем параметры.
В JavaScript или TypeScript создаем объект класса DynamicAdapt;
new DynamicAdapt();Параметры
data-da="куда,когда,какой,тип,удаляемый_класс->назначаемый_класс,children:удаляемый_класс->назначаемый_класс" - Блок перемещенияdata-da="куда,когда,какой,тип,удаляемый_класс->назначаемый_класс;куда,когда,какой,тип,удаляемый_класс->назначаемый_класс" Может быть несколько, через точку с запятой (Пробелы допускаются)
| Название | Значение по-умолчанию | Описание |
|---|---|---|
куда (имя класса) | [обязательный] | Класс блока, в который нужно будет "перебросить" текущий объект. Если класс не уникален, объек перебросится в первый элемент с этим классом. |
когда | [обязательный] | Брейкпоинт при котором перемещать объект. |
какой | last | Позиция на которую нужно переместить объект внутри родителя куда. Кроме цифр можно указать слова first (в начало блока) или last (в конец блока) |
тип срабатывания брейкпоинта. (min или max) | max | |
удаляемый_класс->назначаемый_класс;children-changed | нет | 'удаляемый класс' заменяется на 'назначаемый класс' children-changed - изменять в дочерних классах (да - по-умочанию) |
children:level:удаляемый_класс->назначаемый_класс | нет | 'удаляемый класс у дочерних элементов' заменяется на 'назначаемый класс у дочерних элементов' , level - уровень вложенности, при отсутствии по всем уровням может присутствовать сразу для нескольких дочерних классов на нескольких уровнях, через запятую |
Примеры
<div data-da=".content__column-garden,992,max" class="content__block">Я Коля</div>
<div data-da=".content__column-garden,992,2,min" class="content__block">Я Коля</div>
<div data-da=".content__column-garden,992,2,min" class="content__block">Я Коля</div>
<div data-da=".content__column-garden,992,2,min,content__block->content_new__block" class="content__block">Я Коля</div>
<div data-da=".content__column-garden,992,2,min;.content__column-river,767,last,max" class="content__block">Я Коля</div>