При работе над адаптивом сайта нам постоянно приходится изменять внешний вид объекта. В неких вариантах нам нужно поменять порядок частей, когда при определенной ширине экрана некий блок обязан находиться в другом месте HTML-структуры.
Функционал динамического адаптива перемещает требуемый блок (на определенном расширении экрана) в другой блок. Перемещение отображается в разметке HTML. Когда ширина экрана меняется в большую сторону, объект возвращается на место.
Использование функционала
К блоку, который нужно переместить, добавляем атрибут data-fls-dynamic. Можно использовать снипет da. Подключение JS функционала произойдет автоматически
Вот возможные значения атрибута:
data-fls-dynamic="селектор блока, ширина экрана, позиция, селектор родительского блока"Где:
- селектор блока – (обязательно) селектор объекта куда надо переместить
- ширина экрана – (обязательно, по умолчанию 767,98) ширина экрана при которой сработает магия перемещения
- позиция – (по умолчанию 0, то есть первая) позиция, которую займет перемещенный объект среди уже присутствующих
- селектор родительского блока – селектор объекта в котором находится селектор блока . Используется для уточнения места, куда надо переместить. Если указано, то компонент будет искать селектор блока , который вложен в селектор родительского блока