search
Разрыв до элемента (break-before)
https://dev.ru.simai.io/ru/ui/utility/layout-break/break-before.php
Модификатор break-before в SIMAI Framework позволяет контролировать разрывы столбца или страницы до определённого
элемента. Это полезно при работе с многостраничными документами или макетами, где требуется точное управление разбиением
контента на колонки или страницы.
Синтаксис
Использование: {контрольная точка}:{модификатор} или просто {модификатор}
-
Контрольная точка (необязательный параметр):
Применяет модификатор начиная с определённого размера области просмотра. Может принимать значенияsm,md,lg,xl.
Если не указана, модификатор действует для всех размеров. -
Модификатор (обязательный параметр):
break-before-auto— равномерное распределение.break-before-avoid— отмена разрыва страницы до текущего элемента.break-before-all— принудительный разрыв страницы до текущего элемента.break-before-avoid-page— отмена разрыва страницы до текущего элемента.break-before-page— обязательный разрыв и переход к новой странице до текущего элемента.break-before-left— принудительная расстановка разрывов, следующий элемент располагается слева.break-before-right— принудительная расстановка разрывов, следующий элемент располагается справа.break-before-column— принудительный разрыв и переход к новой колонке перед текущим элементом.
Пример
Использование break-before-column для принудительного разрыва столбца до элемента:
<div class="layout-col-2">
<p>Что ж, позволь мне кое-что тебе сказать, ...</p>
<p class="break-before-column">Конечно, смейтесь...</p>
<p>Может быть, мы сможем жить без...</p>
<p>Смотреть. Если вы думаете, что это...</p>
</div>
В этом примере абзац с break-before-column начнёт новую колонку, а последующий контент будет идти уже в следующей
колонке.
Адаптивность
Чтобы модификатор начал действовать только с определённого размера области просмотра, добавьте префикс контрольной
точки. Например, md:break-before-column заставит применять принудительный разрыв столбца только на экранах с размером
Medium и больше:
<div class="md:break-before-column"></div>
Таким образом, модификатор break-before позволяет точно управлять разрывами до элементов, улучшая контроль над
адаптивными макетами и многостраничными документами.