我一直在尝试结合构建多页面应用程序示例https://dash.plotly.com/urls使用 Dash 引导组件简单侧栏示例:https://dash-bootstrap-components.opensource.faculty.ai/examples/simple-sidebar/page-1 。它在第一次加载时工作并正确显示,但是每次我从一个页面导航到另一个页面时,主 div 被越来越向右推,相对填充似乎随着每次页面更改而增加。我该如何避免这种情况?
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import dash
from app import app
# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
"position": "fixed",
"top": 0,
"left": 0,
"bottom": 0,
"width": "16rem",
"padding": "2rem 1rem",
"background-color": "#f8f9fa",
}
# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
"margin-left": "18rem",
"margin-right": "2rem",
"padding": "2rem 1rem",
}
sidebar = html.Div(
[
dbc.Nav(
[
dbc.NavLink("Home", href="/", active="exact"),
dbc.NavLink("Page 1", href="/apps/app1", active="exact"),
dbc.NavLink("Page 2", href="/apps/app2", active="exact"),
],
vertical=True,
pills=True,
),
],
style=SIDEBAR_STYLE,
)
content = html.Div(id="page-content",
style=CONTENT_STYLE,
children = (html.P("I am the main div")
))
layout = html.Div([
sidebar,
content
])
最佳答案
我设法找到了解决方案。该应用程序遵循 Plotly 示例的结构。我已经包含了 app.py 和 app1.py,这应该是重现问题所需的全部内容。问题来自于 app1.py 中 ID 为“page-content”的 DIV 嵌套在 index.py 中 ID 为“page-content”的 DIV 中。重命名外部 DIV 解决了问题。
- app.py
- 索引.py
- 应用程序 |-- init.py |-- app1.py |-- app2.py
app1.py '''
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app
import dash
import dash_bootstrap_components as dbc
# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
"position": "fixed",
"top": 0,
"left": 0,
"bottom": 0,
"width": "16rem",
"padding": "2rem 1rem",
"background-color": "#f8f9fa",
}
# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
"margin-left": "18rem",
"margin-right": "2rem",
"padding": "2rem 1rem",
}
sidebar = html.Div(
[
dbc.Nav(
[
dbc.NavLink("Home", href="/", active="exact"),
dbc.NavLink("Page 1", href="/apps/app1", active="exact"),
dbc.NavLink("Page 2", href="/apps/app2", active="exact"),
],
vertical=True,
pills=True,
),
],
style=SIDEBAR_STYLE,
)
content = html.Div(id="page-content",
style=CONTENT_STYLE,
children = (html.P("I am the main div")
))
layout = html.Div([
sidebar,
content
])
@app.callback(
Output('app-1-display-value', 'children'),
Input('app-1-dropdown', 'value'))
def display_value(value):
return 'You have selected "{}"'.format(value)
index.py '''
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app
from apps import app1, app2
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content')
])
@app.callback(Output('page-content', 'children'),
Input('url', 'pathname'))
def display_page(pathname):
if pathname == '/apps/app1':
return app1.layout
elif pathname == '/apps/app2':
return app2.layout
else:
return '404'
if __name__ == '__main__':
app.run_server(debug=True)
应用程序.py '''
import dash
import dash_bootstrap_components as dbc
app = dash.Dash(__name__, suppress_callback_exceptions=True,external_stylesheets=[dbc.themes.BOOTSTRAP])
server = app.server
关于python - Dash 引导组件填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66644512/