如何在 Dash 中更新侧边栏布局？

Question

我根据示例制作了一个简单的侧边栏 https://dash-bootstrap-components.opensource.faculty.ai/examples/simple-sidebar/

现在我需要在用户更改页面时更改导航栏内容。我想让它动态和分层。

这意味着我应该在页面更改时更改侧边栏布局。加载普通页面内容时这很容易，但侧边栏组件不会因页面而异。

因此我认为关键问题是如何在用户点击新页面时刷新app.layout，并且脚本分别在下面的link_list中修改（modify_test）？

这是侧边栏代码的基本部分（！不工作！）：

link_list = [
            dbc.NavLink("Home", href="/", active="exact"),
            dbc.NavLink("Page 1", href="/page-1", active="exact"),
            dbc.NavLink("Page 2", href="/page-2", active="exact"),
            ]

def modify_test ():
    link_list.append(dbc.NavLink("Page 3", href="/page-3", active="exact"))

sidebar = html.Div(
[
    html.H2("Sidebar", className="display-4"),
    html.Hr(),
    html.P(
        "A simple sidebar layout with navigation links", className="lead"
    ),
    dbc.Nav(
        link_list,
        vertical=True,
        pills=True,
    ),
],
style=SIDEBAR_STYLE,
)

content = html.Div(id="page-content", style=CONTENT_STYLE)

app.layout = html.Div([dcc.Location(id="url"), sidebar, content])


@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def render_page_content(pathname):
if pathname == "/":
    return html.P("This is the content of the home page!")
elif pathname == "/page-1":
    modify_test ()
    return html.P("This is the content of page 1. Yay!")
elif pathname == "/page-2":
    return html.P("Oh cool, this is page 2!")
# 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..."),
    ]
)

Answer 1

现在我需要在用户更改页面时更改导航栏内容。我想让它动态和分层。

这意味着我应该在页面更改时更改侧边栏布局。加载普通页面内容时这很容易，但侧边栏组件不会因页面而异。

因此我认为关键问题是如何在用户点击新页面时刷新app.layout，并且脚本分别在下面的link_list中修改（modify_test）？

我不知道你到底想做什么，但我认为没有必要刷新整个布局。回调允许我们定位和更新页面上的特定元素，而无需更新整个页面。

由于您已经有一个在页面更改时运行的回调，因此您可以向侧边栏添加一个 id 和一个 Output，通过其 id 定位您的 sidenav 并以某种方式更新 sidenav 的某些属性。

例如可以将您的回调更改为这样的内容

@app.callback(
    Output("sidebar", "style"),
    Output("page-content", "children"),
    Input("url", "pathname"),
)
def render_page_content(pathname):
    if pathname == "/":
        return {"backgroundColor": "blue"}, html.P(
            "This is the content of the home page!"
        )
    elif pathname == "/page-1":
        return {"backgroundColor": "green"}, html.P(
            "This is the content of page 1. Yay!"
        )
    elif pathname == "/page-2":
        return {"backgroundColor": "purple"}, html.P("Oh cool, this is page 2!")
    # If the user tries to reach a different page, return a 404 message
    return {"backgroundColor": "red"}, dbc.Jumbotron(
        [
            html.H1("404: Not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognised..."),
        ]
    )

当页面发生变化时，上面的回调会改变页面内容和侧边栏的样式。

这只是为了让您了解如何解决问题。如果您想在页面更改时更改侧边栏的内容，您可能希望定位到侧边栏的children 属性而不是style。

完整版之前的例子

from dash import Dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input

app = Dash(__name__)

SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "16rem",
    "padding": "2rem 1rem",
    "backgroundColor": "#f8f9fa",
}

CONTENT_STYLE = {
    "marginLeft": "18rem",
    "marginRight": "2rem",
    "padding": "2rem 1rem",
}

link_list = [
    dbc.NavLink("Home", href="/", active="exact"),
    dbc.NavLink("Page 1", href="/page-1", active="exact"),
    dbc.NavLink("Page 2", href="/page-2", active="exact"),
]

sidebar = html.Div(
    id="sidebar",
    children=[
        html.H2("Sidebar", className="display-4"),
        html.Hr(),
        html.P("A simple sidebar layout with navigation links", className="lead"),
        dbc.Nav(
            link_list,
            vertical=True,
            pills=True,
        ),
    ],
    style=SIDEBAR_STYLE,
)

content = html.Div(id="page-content", style=CONTENT_STYLE)

app.layout = html.Div([dcc.Location(id="url"), sidebar, content])


@app.callback(
    Output("sidebar", "style"),
    Output("page-content", "children"),
    Input("url", "pathname"),
)
def render_page_content(pathname):
    if pathname == "/":
        return {"backgroundColor": "blue"}, html.P(
            "This is the content of the home page!"
        )
    elif pathname == "/page-1":
        return {"backgroundColor": "green"}, html.P(
            "This is the content of page 1. Yay!"
        )
    elif pathname == "/page-2":
        return {"backgroundColor": "purple"}, html.P("Oh cool, this is page 2!")
    # If the user tries to reach a different page, return a 404 message
    return {"backgroundColor": "red"}, 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()