Разрыв после колонки (break-after)link

https://dev.ru.simai.io/ru/ui/utility/layout-break/break-after.php

Модификатор break-after в SIMAI Framework позволяет контролировать разрывы столбцов или страниц после определённых элементов. Это особенно полезно при работе с многостраничными документами или макетами, где требуется точное управление расстановкой колонок и страниц.

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или просто {модификатор}

  • Контрольная точка (необязательный параметр):
    Применяет модификатор начиная с определённого размера области просмотра. Может принимать значения sm, md, lg, xl.
    Если не указана, модификатор действует на всех размерах.

  • Модификатор (обязательный параметр):

    • break-after-auto — равномерное распределение.
    • break-after-avoid — отменяет разрыв страницы.
    • break-after-all — принудительный разрыв страницы.
    • break-after-avoid-page — отменяет разрыв страницы после текущего элемента.
    • break-after-page — обязательный разрыв и переход к новой странице после текущего элемента.
    • break-after-left — принудительная расстановка разрывов, следующий элемент располагается слева.
    • break-after-right — принудительная расстановка разрывов, следующий элемент располагается справа.
    • break-after-column — принудительный разрыв колонок после текущего элемента.

Примерlink

Использование break-after-column для принудительного разрыва столбца:

<div class="layout-col-2">
  <p>Что ж, позволь мне кое-что тебе сказать, ...</p>
  <p class="break-after-column">Конечно, смейтесь...</p>
  <p>Может быть, мы сможем жить без...</p>
  <p>Смотреть. Если вы думаете, что это...</p>
</div>

В этом примере абзац с break-after-column гарантированно завершит текущую колонку, и последующий контент начнётся уже в следующей колонке.

Адаптивностьlink

Чтобы модификатор начал действовать только с определённого размера области просмотра, добавьте префикс контрольной точки. Например, md:break-after-column заставит применять принудительный разрыв колонок только на экранах с размером Medium и больше:

<div class="md:break-after-column"></div>

Таким образом, модификатор break-after обеспечивает гибкий контроль над разрывами после элементов, что упрощает настройку адаптивных макетов и многостраничных документов.