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)

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

在CSS脚本example中，药丸具有不同的成分，可以是如下样式：

/* 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脚本进行更新。通过设置style参数，我确实成功覆盖了CSS样式。

根据破折号Bootstrap components，我可以按照以下说明将药丸样式设置为导航项目：

药丸（布尔值，可选）：将药丸样式应用于导航项。有效项将由药丸指示。

我已经这样修改了代码：

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。

我最接近更改药丸样式的方法是更改可用的引导程序样式表：

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

您可以在html here

中查看各种主题及其代码

Answer 1

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

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

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

在你的 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)

使用破折号python更改boostrap nav-pills样式

1 个答案: