主页 / coding / 问题 / 79596151
Accepted
Free Palestine
Asked: 2025-04-28 17:29:59 +0800 CST

如何向 Dash Loading（dcc.Loading）组件添加文本

  • 772

我想使用其中一个内置微调器，dcc.Loading但在微调器/加载器处于活动状态时在其下方添加一些文本。

import time
import plotly.express as px
import dash_mantine_components as dmc
import dash
from dash import dcc, callback, Output, Input

dash.register_page(module=__name__)

layout = dmc.MantineProvider(
    children=[
        dmc.Select(
            id="dropdown",
            data=["bar", "scatter", "none"],
            value="bar",
        ),
        dcc.Loading(
            type="graph",
            children=dmc.Box(id="my_figure")
        )
    ]
)


@callback(
    Output("my_figure", "children"),
    Input("dropdown", "value")
)
def show_fig(value):
    if value == "bar":
        time.sleep(5)
        return dcc.Graph(figure=px.bar())
    elif value == "scatter":
        time.sleep(5)
        return dcc.Graph(figure=px.scatter())
    else:
        return []

这段代码只会显示“图形”旋转器，没有任何文本。我可以不使用参数向内置旋转器添加文本吗custom_spinner？还是我必须重新创建内置旋转器，添加文本，然后将其传递给custom_spinner？

python

1 个回答

  1. Best Answer

    您可以className向dcc.Loading组件添加一个，并将要显示的文本定义为针对相应 HTML 元素的 CSS 规则。

    className（字符串；可选）：内置微调器根 DOM 节点的附加 CSS 类。

    这个想法是（在 assets 文件夹下的 css 文件中）设置该节点的伪content元素::after。例如，假设你设置className="spinner"：

    .spinner::after { 
  content: "loading...";
}

    另请参阅将您自己的 CSS 和 JavaScript 添加到 Dash Apps。

    • 1

相关问题