tgx:loader — Маппинг в `data-hx-loader`
tgx:loader#
Маппинг в data-hx-loader.
Синтаксис#
<div tgx:loader="#spinner"></div>Пример 1: минимум (копипаст для старта)#
<div tgx:loader="#spinner"></div>Пример 2: реальный сценарий#
<button tgx:ajax-get="/api/v1/data" tgx:loader="#spinner">Обновить</button>Разбор#
Позволяет задать loader-индикатор на время запроса.Когда использовать#
- Когда нужно обновлять часть страницы без полной перезагрузки (формы, фильтры, списки, таблицы).
- Когда нужно контролировать UX запроса: куда вставить ответ, по какому событию отправить и как обработать подтверждение.
Поведение в runtime#
- Тип: пользовательская директива.
- В sandbox директива
tgx:loader: запрещена. - Это HTMX-мост: runtime маппит
tgx:в соответствующиеdata-hx-атрибуты.
Частые ошибки#
- Проверяйте синтаксис атрибута и кавычки: TGX чувствителен к незакрытым выражениям.
- Тестируйте изменения в подходящем окружении: sandbox для поддерживаемых директив, рабочая тестовая страница — для остальных.
Проверка перед публикацией#
- Пример корректно отрабатывает в рабочем шаблоне/тестовой странице проекта.
- Значения по умолчанию обработаны (
|fallback) там, где данные могут отсутствовать.
См. также#
Связанные статьи
tgx:loader — Маппинг в `data-hx-loader`
tgx:loader#
Маппинг в data-hx-loader.
Синтаксис#
<div tgx:loader="#spinner"></div>Пример 1: минимум (копипаст для старта)#
<div tgx:loader="#spinner"></div>Пример 2: реальный сценарий#
<button tgx:ajax-get="/api/v1/data" tgx:loader="#spinner">Обновить</button>Разбор#
Позволяет задать loader-индикатор на время запроса.Когда использовать#
- Когда нужно обновлять часть страницы без полной перезагрузки (формы, фильтры, списки, таблицы).
- Когда нужно контролировать UX запроса: куда вставить ответ, по какому событию отправить и как обработать подтверждение.
Поведение в runtime#
- Тип: пользовательская директива.
- В sandbox директива
tgx:loader: запрещена. - Это HTMX-мост: runtime маппит
tgx:в соответствующиеdata-hx-атрибуты.
Частые ошибки#
- Проверяйте синтаксис атрибута и кавычки: TGX чувствителен к незакрытым выражениям.
- Тестируйте изменения в подходящем окружении: sandbox для поддерживаемых директив, рабочая тестовая страница — для остальных.
Проверка перед публикацией#
- Пример корректно отрабатывает в рабочем шаблоне/тестовой странице проекта.
- Значения по умолчанию обработаны (
|fallback) там, где данные могут отсутствовать.