Smart Flow в визуальной верстке

Smart Flow — это инструмент, который автоматически регулирует расположение и размеры элементов на странице при изменении контента. Он «толкает» элементы друг под другом, чтобы избежать наложений и сохранить нужные отступы, обеспечивая визуальную целостность макета.

Основные принципы работы Smart Flow

1. Адаптивность контента: Smart Flow автоматически определяет, какие элементы нужно переместить или изменить в размере, чтобы избежать перекрытий.
2. Каскадное смещение: Изменение одного элемента влечет за собой смещение других элементов, расположенных ниже, создавая каскадный эффект.
3. Режимы работы: Smart Flow может работать в разных режимах, чтобы лучше соответствовать различным сценариям использования.

Когда применяется Smart Flow

• Высота элемента изменяется: например, при раскрытии вертикального меню или добавлении контента.
• Элемент скрывается или удаляется, освобождая место на странице.

Условия отключения Smart Flow

• у элемента отключен Smart Flow в среде визуальной верстки;
• элемент скрыт;
• высота блока равна 0;
• у элемента включен параллакс;
• элемент ориентирован не по верху (по середине или по низу);
• присутствуют соседние элементы (при отрицательном смещении);
• элемент расположен в слайдере на десктопной версии (не относится к слайдеру с автоматическим выводом новостей/товаров);
• элемент является HTML-кодом или сниппетом, но не виджетом;
• элемент является меню, но не вертикальным;
• элемент является изображением, но без автовысоты;
• элемент является слайдером с высотой 100%.

Режимы работы Smart Flow

1. Strict (Строгий): Элемент всегда сохраняет заданное расстояние до следующего элемента или до конца блока. Это гарантирует, что определенные интервалы между элементами всегда будут выдержаны.
2. Adaptive (Адаптивный): Элемент смещает следующий элемент только тогда, когда достигает его. Этот режим более гибкий и позволяет элементам располагаться ближе друг к другу, если это необходимо.
3. Dynamic (Динамический): Элемент при рендеринге сохраняет заданное расстояние до следующего элемента или до конца блока, а при изменении контента смещает следующий элемент тогда, когда достигает его. Это внутренний режим, который включается автоматически без вмешательства пользователя, например, в вертикальном меню.

Специальные возможности

• Отрицательное смещение: Если элемент уменьшается в размере, Smart Flow может сместить расположенные ниже элементы вверх.
• Учет минимальной высоты: При отрицательном смещении Smart Flow учитывает минимальную высоту блока и не позволяет ему становиться меньше этого значения.
• Учет соседних элементов: По умолчанию при отрицательном смещении проверяется наличие соседних элементов слева и справа. Если они есть, Smart Flow не срабатывает, чтобы избежать нежелательных изменений в макете. Проверку можно отключить функцией «Игнорировать боковые элементы при отрицательном смещении».
• Автоматическое удаление блока: Если блок содержит только элементы с включенной функцией Smart Flow, он автоматически удаляется, если все элементы в блоке исчезают или имеют высоту 0. 
• Переход к относительному позиционированию: В административной панели все объекты по умолчанию абсолютные (absolute), но если в блоке находится только один элемент типа «виджет» (HTML-код, сниппет) или этот элемент является смарт-списком, тогда он становится относительным (relative), при условии, что его ориентация указана без отрицательных значений. Если элемент занимает 100% высоты блока, то relative-логика включается даже при наличии других элементов в блоке. Логика relative не срабатывает при наличии параллакс-эффектов и при нулевой высоте блока. Скрытые элементы, якорь, кнопка «Закрыть» и элемент «Статус» (категория товара) не мешают логике.
• Подгонка наложенных элементов на мобильных устройствах: На мобильных устройствах Smart Flow может подгонять размеры и положение наложенных элементов, чтобы они корректно отображались на экране. Например, подложка, расположенная под текстовым элементом, автоматически увеличит свою высоту, если произойдет увеличение объема текста.

Примеры работы

Пример #1: Smart-список товаров (режим Strict)

Предположим, у вас есть список товаров. Изначально отображается несколько товаров с кнопкой «Показать еще». При нажатии на кнопку «Показать еще» в смарт-список добавляются новые элементы (товары), увеличивая его высоту. Smart Flow в строгом режиме автоматически смещает все элементы, расположенные ниже списка, на высоту, необходимую для отображения новых товаров, сохраняя при этом заданный отступ между списком и следующим элементом.

Пример #2: Изменение размера элемента (режим Adaptive)

Представьте текстовый блок, высота которого меняется в зависимости от объема текста. В режиме Adaptive элементы, расположенные под этим блоком, не смещаются сразу при увеличении текста. Они остаются на месте, пока текстовый блок не достигнет границы расположенных ниже элементов. Как только текст увеличится до точки, где начинает «перекрывать» нижние элементы, Smart Flow автоматически сдвигает их вниз, обеспечивая аккуратное расположение и предотвращая наложение элементов. Регулировать допустимое расстояние можно настройкой «Безопасный отступ».

Пример #3: Удаление контента

Допустим, у вас есть блок с фото, текстом и кнопкой. Если текст полностью удаляется, Smart Flow поднимает кнопку вверх, занимая освободившееся пространство. При этом сохраняется отступ под фото и исчезает отступ под текстом, которого больше нет.