Расширение loading-states

Это расширение позволяет легко управлять состояниями загрузки во время выполнения запроса, включая отключение элементов и добавление и удаление CSS-классов.

Установка

<script src="https://unpkg.com/htmx.org/dist/ext/loading-states.js"></script>

Использование

Добавьте атрибут hx-ext="loading-states" в тег body или в любой родительский элемент, содержащий ваши атрибуты htmx.

Добавьте следующий класс в ваш стиловый файл, чтобы убедиться, что элементы по умолчанию скрыты:

[data-loading] {
  display: none;
}

Поддерживаемые атрибуты

• data-loading

  Показывает элемент. По умолчанию стиль — inline-block, но можно использовать любой стиль отображения, указав его в значении атрибута.

  <div data-loading>loading</div>
  <div data-loading="block">loading</div>
  <div data-loading="flex">loading</div>
  

• data-loading-class

  Добавляет, затем удаляет CSS-классы к элементу:

  <div class="transition-all ease-in-out duration-600" data-loading-class="bg-gray-100 opacity-80">
  ...
  </div>
  

• data-loading-class-remove

  Удаляет, затем добавляет обратно CSS-классы из элемента.

  <div class="p-8 bg-gray-100 transition-all ease-in-out duration-600" data-loading-class-remove="bg-gray-100">
  ...
  </div>
  

• data-loading-disable

  Отключает элемент на время запроса.

  <button data-loading-disable>Submit</button>
  

• data-loading-aria-busy

  Добавьте атрибут aria-busy="true" к элементу на время запроса.

  <button data-loading-aria-busy>Submit</button>
  

• data-loading-delay

  Некоторые действия могут обновляться быстро, и показ состояния загрузки в таких случаях может быть более отвлекающим. Этот атрибут гарантирует, что изменения состояния загрузки применяются только через 200 мс, если запрос не завершен. Значение атрибута позволяет изменить значение по умолчанию и выразить его в миллисекундах:

  <button type="submit" data-loading-disable data-loading-delay="1000">Submit</button>
  

  Вы можете разместить атрибут data-loading-delay непосредственно на элементе, который нужно отключить, или в любом родительском элементе.

• data-loading-target

  Позволяет задать другой целевой объект для применения состояний загрузки. Значение атрибута может быть любым допустимым CSS-селектором. Пример ниже отключает кнопку отправки и показывает состояние загрузки при отправке формы.

  <form hx-post="/save"
  data-loading-target="#loading"
  data-loading-class-remove="hidden">
    <button type="submit" data-loading-disable>Submit</button>
  </form>
  <div id="loading" class="hidden">Loading ...</div>
  

• data-loading-path

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

  <form hx-post="/save">
    <button type="submit" data-loading-disable data-loading-path="/save">Submit</button>
  </form>
  

  Вы можете разместить атрибут data-loading-path непосредственно на элементе состояния загрузки или в любом родительском элементе.

  <form hx-post="/save" data-loading-path="/save">
    <button type="submit" data-loading-disable>Submit</button>
  </form>
  

• data-loading-states

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

  <div data-loading-states>
    <div hx-get=""></div>
    <div data-loading>loading</div>
  </div>
  <div data-loading-states>
    <div hx-get=""></div>
    <div data-loading>loading</div>
  </div>
  <form data-loading-states hx-post="">
    <div data-loading>loading</div>
  </form>