plotly-dash - 使用 dash python 更改 bootstrap nav-pills 样式

Question

Dash 允许使用我们自己的 CSS 样式表。但是，如果您在科学领域并且不熟悉 CSS，则可以使用 Bootstrap 组件，这使得样式和页面布局非常容易组合在一起。

这是在破折号中创建侧边栏的标准示例: """

This app creates a simple sidebar layout using inline style arguments and the
dbc.Nav component.
dcc.Location is used to track the current location. There are two callbacks,
one uses the current location to render the appropriate page content, the other
uses the current location to toggle the "active" properties of the navigation
links.
For more details on building multi-page Dash applications, check out the Dash
documentation: https://dash.plot.ly/urls
"""
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

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

# 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(
    [
        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,
        ),
    ],
    style=SIDEBAR_STYLE,
)

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

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


# 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(port=8888)

Bootstrap nav pills 是导航栏中的元素。它们是导航组件，允许用户浏览布局中的各种选项。 example

在 CSS 脚本中 example , pills 有不同的组件，可以是样式，例如:

/* CSS used here will be applied after bootstrap.css */
body {
  background: #000;
}
.nav-pills a {
    color: #ffffff
}

.nav-pills a:hover {
    color: #560000;
    border-radius: 0px;
}

.nav-pills .active a:hover {
    color: #560000;
    border-radius: 0px;
}
.nav>li>a:hover, 
.nav>li>a:focus {
    color: #560000;
    border-radius: 0px;
}

我想通过我的 python 脚本更新药丸样式，并在悬停时更改药丸的颜色，当它处于事件状态时，我想更改字体类型及其文本颜色。我仍然熟悉 CSS，因此我宁愿通过 python 脚本更新它。通过设置样式参数，我确实成功地覆盖了 CSS 样式。

根据 Dash Bootstrap components我可以按如下所述将药丸样式设置为导航项目:

pills( bool 值，可选):将 pill 样式应用于导航项。事件项目将由药丸指示。

我已经这样编辑了代码:

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.NavItem(dbc.NavLink("Page 1", href="/page-1", id="page-1-link"), style={"background-color": "grey"}),
                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,

           # className="nav navbar-nav",#"nav nav-pills hidden-sm",
            #style ={"li:hover" =""}

        ),
    ],
    style=SIDEBAR_STYLE,
)

这只会改变背景颜色，而不会在鼠标悬停或处于事件状态时改变药丸颜色和字体颜色。 python中的语法是什么？我在代码中尝试了很多选项，并且在 python 中搜索了样式语法，但我仍然没有遇到等效的 python 样式语法 example .

我最接近更改 pill 样式的方法是更改​​可用的 Bootstrap 样式表:

app = dash.Dash(external_stylesheets=[dbc.themes.FLATLY])

您可以在 html 中查看各种主题及其代码 here

Answer 1

我强烈建议您在 css 样式表中采用处理伪类样式的方法，例如 :hover 和 :active。

要包含 css 样式表，请参阅文档 here .基本上你只需要在你的根目录中有一个 assets 文件夹，并将 .css 文件放在里面。

因此，您可以向每个 NavLink 添加一个 className 属性，使用样式表中的类定位元素并添加 :hover 和 :active 根据需要设置样式。

在你的 Dash 布局中:

dbc.NavLink("Page 1", href="/page-1", id="page-1-link", className="page-link"),

在您的 assets 目录中的一个 css 文件中:

.page-link:hover {
  background-color: green;
}

.page-link:active {
  background-color: blue;
}

您还可以在 assets 文件夹中包含脚本，并使用 Javascript 设置元素样式(如果您需要以 css 无法实现的方式使其动态化)。

为什么您的方法无法按照您对内联样式的预期方式工作，请参阅 CSS Pseudo-classes with inline styles .

现在可以使用 Location监听路由变化并根据当前路由改变每个 NavLink 的事件状态。我再次推荐更简单且更易于扩展的 css 方法，以下方法也不适用于悬停，但您可以执行类似的操作来更改单击时的样式:

from dash 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

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

links = [
    {"id": "page-1-link", "href": "/page-1", "link-text": "Page 1"},
    {"id": "page-2-link", "href": "/page-2", "link-text": "Page 2"},
    {"id": "page-3-link", "href": "/page-3", "link-text": "Page 3"},
]

sidebar = html.Div(
    [
        dcc.Location(id="url", refresh=False),
        html.H2("Sidebar", className="display-4"),
        html.Hr(),
        html.P("A simple sidebar layout with navigation links", className="lead"),
        dbc.Nav(
            [
                dbc.NavItem(
                    dbc.NavLink(link["link-text"], href=link["href"], id=link["id"])
                )
                for link in links
            ],
            vertical=True,
            pills=True,
        ),
    ],
)

app.layout = sidebar


@app.callback(
    [Output(link["id"], "active") for link in links],
    Input("url", "pathname"),
    prevent_initial_call=True,
)
def display_page(pathname):
    actives_list = [False for link in links]

    if pathname == "/":
        return actives_list

    actives_list[int(pathname[-1]) - 1] = True

    return actives_list


if __name__ == "__main__":
    app.run_server(port=8888)