Толщина разделителя

divider-width

В SIMAI Framework с помощью модифкаторов можно задать толщину разделителя.

Классы

Класс Значение
divider-x-0>:not([hidden])~:not([hidden]) border-right-width: calc(var(--sf-0) * var(--sf-divider--reverse-x));
border-left-width: calc(var(--sf-0) * calc(1 - var(--sf-divider--reverse-x)));
divider-y-0>:not([hidden])~:not([hidden]) border-top-width: calc(var(--sf-0) * calc(1 - var(--sf-divider--reverse-y)));
border-bottom-width: calc(var(--sf-0) * var(--sf-divider--reverse-y));
divider-x-1>:not([hidden])~:not([hidden]) border-right-width: calc(var(--sf-a1) * var(--sf-divider--reverse-x));
border-left-width: calc(var(--sf-a1) * calc(1 - var(--sf-divider--reverse-x)));
divider-y-1>:not([hidden])~:not([hidden]) border-top-width: calc(var(--sf-a1) * calc(1 - var(--sf-divider--reverse-y)));
border-bottom-width: calc(var(--sf-a1) * var(--sf-divider--reverse-y));
divider-x-2>:not([hidden])~:not([hidden]) border-right-width: calc(var(--sf-a2) * var(--sf-divider--reverse-x));
border-left-width: calc(var(--sf-a2) * calc(1 - var(--sf-divider--reverse-x)));
divider-y-2>:not([hidden])~:not([hidden]) border-top-width: calc(var(--sf-a2) * calc(1 - var(--sf-divider--reverse-y)));
border-bottom-width: calc(var(--sf-a2) * var(--sf-divider--reverse-y));
divider-x-3>:not([hidden])~:not([hidden]) border-right-width: calc(var(--sf-a3) * var(--sf-divider--reverse-x));
border-left-width: calc(var(--sf-a3) * calc(1 - var(--sf-divider--reverse-x)));
divider-y-3>:not([hidden])~:not([hidden]) border-top-width: calc(var(--sf-a3) * calc(1 - var(--sf-divider--reverse-y)));
border-bottom-width: calc(var(--sf-a3) * var(--sf-divider--reverse-y));
divider-x-4>:not([hidden])~:not([hidden]) border-right-width: calc(var(--sf-a4) * var(--sf-divider--reverse-x));
border-left-width: calc(var(--sf-a4) * calc(1 - var(--sf-divider--reverse-x)));
divider-y-4>:not([hidden])~:not([hidden]) border-top-width: calc(var(--sf-a4) * calc(1 - var(--sf-divider--reverse-y)));
border-bottom-width: calc(var(--sf-a4) * var(--sf-divider--reverse-y));

Описание

Адаптивный модификатор. Задает толщину разделителя в зависимости от размера области просмотра.

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • divider-{x|y}-{0...4} - {x|y} - направление разделителя, {0...4} - толщина границы разделителя,

Внимание! Для корректной работы модифкатора необходимо одновременно указывать и модификатор толщины разделителя и модификатор направления разделителя.

Толщина разделителя по горизонтали

Используйте модификатор divider-x-{1...9} чтобы задать толщину разделителя по горизонтали..

1
2
3
<div class="grid grid-col-3 divider-x-1 divider-spare divider-surface-lowest radius-1/3 shadow-lg overflow-hidden bg-surface-0 shadow-3 text-center">
    <div class="p-1">1</div>
    <div class="p-1">2</div>
    <div class="p-1">3</div>
</div>

Толщина разделителя по вертикали

Используйте модификатор divider-y-{1...4} чтобы задать толщину разделителя по вертикали..

1
2
3
<div class="grid grid-row-3 divider-y-1 divider-spare divider-surface-lowest radius-1/3 shadow-lg overflow-hidden bg-surface-0 shadow-3 text-center">
    <div class="p-1">1</div>
    <div class="p-1">2</div>
    <div class="p-1">3</div>
</div>

Обратный порядок дочерних элементов

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

1
2
3
<div class="flex flex-col-reverse divider-y-1 divider-y-reverse divider-spare divider-surface-lowest radius-1/3 shadow-lg overflow-hidden bg-surface-0 shadow-3 text-center">
    <div class="p-1">1</div>
    <div class="p-1">2</div>
    <div class="p-1">3</div>
</div>

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