Логотип Tagix
Изображение Изображение

← Назад

tgx:ui#

Шорткат utility-стилей.

Синтаксис#

<div tgx:ui="df aic jcc"></div>

Пример 1: минимум (копипаст для старта)#

<div tgx:ui="df aic jcc"></div>

Пример 2: реальный сценарий#

<button tgx:ui="btn btn-primary px:4 py:2">Кнопка</button>

Разбор#

Собирает классы и responsive-модификаторы в короткой форме.

Когда использовать#

  • Когда нужно быстро описывать стили и responsive-варианты прямо в шаблоне без длинных CSS-классов.
  • Когда удобно управлять состояниями (hover, focus, и т.д.) короткими токенами в одном месте.

Поведение в runtime#

  • Тип: пользовательская директива.
  • В sandbox директива tgx:ui: разрешена.

Параметры#

Обязательные#

  • tgx:ui — строка из utility-токенов.

По умолчанию#

  • Токены конвертируются в CSS-классы runtime helper-ом.

Типы#

  • Строка: токены через пробел (например df aic gap:12).

Типы данных и приведение#

  • Базовый формат токена: [breakpoint=]property[:value][.state].
  • Брейкпоинты: mb|mobile, tb|tablet, lt|laptop, dt|desktop, wd|wide; можно перечислять через запятую (tb,lt=...).
  • Поддерживаются alias-диапазоны: mb+, tb+, lt+, dt+, wd+ и mb-, tb-, lt-, dt-, wd-.
  • Состояния задаются суффиксом .state (например .hover, .focus) и могут быть отрицательными через no- (.no-hover).
  • Для нескольких свойств используйте скобки: (px:4,py:2,bg:xfff).
  • Числа без единиц переводятся в rem с шагом 0.25rem (4 -> 1rem); модификаторы sm|md|lg|xl меняют множитель.
  • Цвет в формате xFFF/x112233 автоматически становится #FFF/#112233.
  • Значения с пробелами передавайте в обратных кавычках: `bg:linear-gradient(90deg,#000,#333) .
  • Невалидные токены пропускаются, поэтому опечатки в сокращениях приводят к отсутствию ожидаемого стиля.

Частые ошибки#

  • Путать разделители: для breakpoints используется =, для значения — :, для состояния — .state.
  • Передавать значения с пробелами без обратных кавычек: токен распадется и правило не применится.

Проверка перед публикацией#

  • Пример рендерится без ошибок в sandbox.
  • Значения по умолчанию обработаны (|fallback) там, где данные могут отсутствовать.
  • Проверено, что все токены tgx:ui записаны в формате [breakpoint=]property[:value][.state] без опечаток.
  • Проверены responsive и state-варианты (mb/tb/lt/dt/wd, .hover/.focus/.no-*`) на реальной странице.

См. также#