Оформление элемента разбитого на несколько строк

box-decoration-break
sm
md
lg
xl

В SIMAI Framework с помощью модификатора можно управлять отображением фрагментов элементов в нескольких строках, столбцах или страницах.

Классы

Класс Значение
box-slice box-decoration-break: slice;
box-clone box-decoration-break: clone;

Описание

Адаптивный модификатор. Позволяет управлять отображением фрагментов элементов в нескольких строках, столбцах или страницах, в зависимости от размера области просмотра.

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • box-slice - элемент изначально отображается так, как если бы его блок не был фрагментирован (как одно целое);
    • box-clone - каждый фрагмент блока визуализируется независимо с указанными рамками, отступами и полями, охватывающими каждый фрагмент.

box-slice

С помощью модификатора box-slice элемент изначально отображается так, как если бы его блок не был фрагментирован (как одно целое).

Hello
World 
<span class="box-slice bg-clip-text color-transparent gr-line-2 gr-to-top gr1-purple-5 gr2-red-5">
    Hello<br>
    World
</span>

box-clone

С помощью модификатора box-clone каждый фрагмент блока визуализируется независимо с указанными рамками, отступами и полями, охватывающими каждый фрагмент.

Hello
World 
<span class="box-clone bg-clip-text color-transparent gr-line-2 gr-to-top gr1-purple-5 gr2-red-5">
    Hello<br>
    World
</span>

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

Для управления отображением фрагментов элементов в нескольких строках, начиная с определенного размера области просмотра, добавьте к модификатору префикс контрольной точки (sm, md, lg, xl) через двоеточие (:).

Например, используйте модификатор md:decoration-slice для отображения фрагментов элемента как единое целое для экранов размером Medium и больше.

<div class="md:decoration-slice"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью