Значенияlink

Типы значений модификаторов в SF UI и примеры их использования.

Абсолютные размерыlink

Основной единицей измерения является rem, что позволяет создавать адаптивные интерфейсы, подстраивающиеся под используемые шрифты. В рамках фреймворка применяется система абсолютных размеров для фиксированных значений.

1. Примеры: w-0, w-px (1 пиксель).
2. Отрицательные значения: добавляется знак минус перед модификатором (-m-2, -left-a4).

Бинарные значенияlink

Используются для свойств, которые могут быть включены или выключены.

1. Примеры: italic (включено) и italic-none (выключено).
2. Другие примеры: visible, visible-none.

Градусыlink

Обозначаются числом, равным значению угла в градусах.

• Примеры: rotate-0, rotate-1, rotate-45, rotate-180.

Процентыlink

Обозначаются числом, равным значению процента.

1. Примеры: w-1, w-23, w-99, w-full.

Соразмерные значенияlink

Изменяются относительно друг друга (размеры текста, отступы). Параметры зависят от устройства — десктоп и мобильная версия могут отличаться.

1. Примеры нулевых значений: m-0, p-0.
2. Рост/уменьшение значения сохраняет пропорциональность.

Относительные размерыlink

Задаются в долях для размеров относительно родителя или экрана.

1. full — 100%, например w-full.
2. Относительно экрана: h-screen-1/2, h-screen-3/4.
3. Для сеток: fr — доля оставшегося пространства (auto-cols-fr, auto-rows-fr).