Bulma css 本身提供了一个 is-loading 类,该类在应用该类时显示一个旋转图标。 https://bulma.io/documentation/elements/button/
Htmx 提供了一个指示器属性 - https://htmx.org/attributes/hx-indicator/ - 它为您提供了一个在网络请求进行时使用不透明度 0/1 的 htmx-indicator 类。
我想使用 Bulma 的 is-loading 类来修改按钮元素,而不是我在 htmx 中找到的示例,其中在某些图像/span 元素上使用指示器属性来显示微调器。
本质上,据我了解,我想知道当 htmx-indicator 类应用于我的按钮时是否可以串联应用 is-loading 类。
这是可能的。您需要像这样安装loading-states htmx-extension:
<script src="https://unpkg.com/htmx.org/dist/ext/loading-states.js"></script>
将其放入您的正文标签中:
hx-ext="loading-states"
例如,如果您想在单击按钮时加载模式,您的代码应如下所示:`
<button id="open-modal-button" hx-get="" hx-target="#modal" hx-trigger="click" hx-swap="innerHTML" class="button is-success" data-loading-target="#open-modal-button" data-loading-class="is-loading">Open Modal</button>
更多信息在这里:https://github.com/bigskysoftware/htmx-extensions/blob/main/src/loading-states/README.md
如果你有多个按钮,你可以使用“data-loading-path”来过滤特定的请求..