Dash 引导组件未显示

Question

I wanted to have progress bar in my Django project but it is not showing on page. I have installed django-dash and dash-bootstrap-components. Code:

import dash_html_components as html
import dash_bootstrap_components as dbc
from django_plotly_dash import DjangoDash

app = DjangoDash("Progress", add_bootstrap_links=True)
app.layout = html.Div(dbc.Progress(value=100))

and template

{% load plotly_dash %}
<div class="{% plotly_class name="Progress" %}">
    {% plotly_app_bootstrap name="Progress" %}
</div>

Answer 1

I had a hard time figuring out why dash-bootstrap-components are not loaded on my Django dash app. I figured out the problem using simple steps available at:

https://django-plotly-dash.readthedocs.io/en/latest/bootstrap.html#using-bootstrap

Answer 2

This can be tricky to set up - you have to follow all of the installation steps. There is a summary in the project documentation:

• add the various settings from the configuration section of the project documentation, particularly the STATICFILES_FINDERS , PLOTLY_COMPONENTS and MIDDLEWARE ones.
• install django-bootstrap 4 with pip install django-bootstrap4 and add bootstrap4 to INSTALLED_APPS in the project's settings.py file
• make sure that the settings for serving static files are set correctly, particularly STATIC_ROOT , as described in the Django documentation
• use the prepare_demo script or perform the equivalent steps, particularly the migrate and collectstatic steps