DynamicAdaptive

Описание плагина

Данный плагин позволяет перемещать DOM элементы в любую часть страницы при изменении размера экрана, что позволяет динамически изменять и адаптировать внешний вид сайта под любые требования дизайна.

Для наглядной демонстрации работы плагина, смотрите демо: https://codepen.io/arti-set-dev/pen/NWBwoqd

Загрузка и инициализация

Для загрузки введите следующую команду: npm i r-dynamicadaptive.

После загрузки перед инициализацией пропишите атрибут для работы плагина: data-dynamic-state. Данный атрибут принимает три обязательных параметра, разделённых через запятую и пробел:

1. Куда переместить элемент (цель). Необходимо указать css класс элемента, внутрь которого будет перемещён элемент.

2. Брейкпоинт. Данный параметр определяет на каком размере экрана будет перемещён элемент. Указывается в виде числа.

3. Позиция. Определяет положение элемента внутри цели. Данное значение можно задать цифрами, либо словами "first" или "last".

Пример:

<div class="block" data-dynamic-state="target-block, 1024, first"></div>

Для инициализации пропишите следующий код:

const dynamicAdaptive = new DynamicAdaptive('[data-dynamic-state]');

Настройки плагина

Данный плагин работает с медиавыражениями max-width или min-width. По умолчанию работа осуществляется в формате max-width. Если нужно сменить формат на противоположный - используйте следующую настройку:

const dynamicAdaptive = new DynamicAdaptive('[data-dynamic-state]', {
  typeMedia: 'min',
});