Htmx-指标和 Bulma css

问题描述 投票:0回答:1

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 类。

html css sass bulma htmx
1个回答
0
投票

这是可能的。您需要像这样安装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”来过滤特定的请求..

© www.soinside.com 2019 - 2024. All rights reserved.