我正在使用以下代码，该代码使用Dash-Bootstrap-Components库在Dash Plotly中创建一个简单的侧边栏。我的目标是通过重用上面的代码来实现以下 gif 所示的collapsed sidebar。
我不是JavaScript、JQuery、CSS或其他允许我这样做的工具的专家。我感谢任何让我实现目标的帮助。
提前谢谢。
您可以查看dash-bootstrap-components示例。
我在示例中添加了两种 css 样式，并实现了响应式折叠侧边栏。
这是代码：
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
navbar = dbc.NavbarSimple(
children=[
dbc.Button("Sidebar", outline=True, color="secondary", className="mr-1", id="btn_sidebar"),
dbc.NavItem(dbc.NavLink("Page 1", href="#")),
dbc.DropdownMenu(
children=[
dbc.DropdownMenuItem("More pages", header=True),
dbc.DropdownMenuItem("Page 2", href="#"),
dbc.DropdownMenuItem("Page 3", href="#"),
],
nav=True,
in_navbar=True,
label="More",
),
],
brand="Brand",
brand_href="#",
color="dark",
dark=True,
fluid=True,
)
# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
"position": "fixed",
"top": 62.5,
"left": 0,
"bottom": 0,
"width": "16rem",
"height": "100%",
"z-index": 1,
"overflow-x": "hidden",
"transition": "all 0.5s",
"padding": "0.5rem 1rem",
"background-color": "#f8f9fa",
}
SIDEBAR_HIDEN = {
"position": "fixed",
"top": 62.5,
"left": "-16rem",
"bottom": 0,
"width": "16rem",
"height": "100%",
"z-index": 1,
"overflow-x": "hidden",
"transition": "all 0.5s",
"padding": "0rem 0rem",
"background-color": "#f8f9fa",
}
# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
"transition": "margin-left .5s",
"margin-left": "18rem",
"margin-right": "2rem",
"padding": "2rem 1rem",
"background-color": "#f8f9fa",
}
CONTENT_STYLE1 = {
"transition": "margin-left .5s",
"margin-left": "2rem",
"margin-right": "2rem",
"padding": "2rem 1rem",
"background-color": "#f8f9fa",
}
sidebar = html.Div(
[
html.H2("Sidebar", className="display-4"),
html.Hr(),
html.P(
"A simple sidebar layout with navigation links", className="lead"
),
dbc.Nav(
[
dbc.NavLink("Page 1", href="/page-1", id="page-1-link"),
dbc.NavLink("Page 2", href="/page-2", id="page-2-link"),
dbc.NavLink("Page 3", href="/page-3", id="page-3-link"),
],
vertical=True,
pills=True,
),
],
id="sidebar",
style=SIDEBAR_STYLE,
)
content = html.Div(
id="page-content",
style=CONTENT_STYLE)
app.layout = html.Div(
[
dcc.Store(id='side_click'),
dcc.Location(id="url"),
navbar,
sidebar,
content,
],
)
@app.callback(
[
Output("sidebar", "style"),
Output("page-content", "style"),
Output("side_click", "data"),
],
[Input("btn_sidebar", "n_clicks")],
[
State("side_click", "data"),
]
)
def toggle_sidebar(n, nclick):
if n:
if nclick == "SHOW":
sidebar_style = SIDEBAR_HIDEN
content_style = CONTENT_STYLE1
cur_nclick = "HIDDEN"
else:
sidebar_style = SIDEBAR_STYLE
content_style = CONTENT_STYLE
cur_nclick = "SHOW"
else:
sidebar_style = SIDEBAR_STYLE
content_style = CONTENT_STYLE
cur_nclick = 'SHOW'
return sidebar_style, content_style, cur_nclick
# this callback uses the current pathname to set the active state of the
# corresponding nav link to true, allowing users to tell see page they are on
@app.callback(
[Output(f"page-{i}-link", "active") for i in range(1, 4)],
[Input("url", "pathname")],
)
def toggle_active_links(pathname):
if pathname == "/":
# Treat page 1 as the homepage / index
return True, False, False
return [pathname == f"/page-{i}" for i in range(1, 4)]
@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def render_page_content(pathname):
if pathname in ["/", "/page-1"]:
return html.P("This is the content of page 1!")
elif pathname == "/page-2":
return html.P("This is the content of page 2. Yay!")
elif pathname == "/page-3":
return html.P("Oh cool, this is page 3!")
# If the user tries to reach a different page, return a 404 message
return dbc.Jumbotron(
[
html.H1("404: Not found", className="text-danger"),
html.Hr(),
html.P(f"The pathname {pathname} was not recognised..."),
]
)
if __name__ == "__main__":
app.run_server(debug=True, port=8086)