使用破折号 python 更改 bootstrap nav-pills 样式
Changing boostrap nav-pills styles using dash python
Dash 允许使用我们自己的 CSS 样式表。但是，如果您在科学领域并且不熟悉 CSS，您可以使用 Bootstrap 组件，这使得样式和页面布局非常容易组合在一起。
这是在 dash 中创建侧边栏的标准示例：
"""
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 导航丸是导航栏中的元素。它们是导航组件，允许用户浏览布局中的各种选项。 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 脚本更新它。我确实通过设置样式参数成功覆盖了 CSS 样式。
根据 Dash Bootstrap components 我可以按如下所述将药丸样式设置为导航项：
pills（布尔值，可选）：将药丸样式应用于导航项。活动项目将由药丸指示。
我已经这样编辑了代码：
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.
我最接近更改药丸样式的方法是更改可用的 bootstrap 样式表：
app = dash.Dash(external_stylesheets=[dbc.themes.FLATLY])
您可以在htmlhere
中查看各种主题及其代码
我强烈建议您在 css 样式表中采用处理伪 class 样式的方法，例如 :hover 和 :active。
要包含 css 样式表，请参阅文档 here。基本上你只需要在根目录中有一个 assets 文件夹，然后将 .css 个文件放在里面。
因此您可以向每个 NavLink 添加 className 属性，在样式表中使用 class 定位元素并添加 :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)
Dash 允许使用我们自己的 CSS 样式表。但是，如果您在科学领域并且不熟悉 CSS，您可以使用 Bootstrap 组件，这使得样式和页面布局非常容易组合在一起。
这是在 dash 中创建侧边栏的标准示例： """
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 导航丸是导航栏中的元素。它们是导航组件，允许用户浏览布局中的各种选项。 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 脚本更新它。我确实通过设置样式参数成功覆盖了 CSS 样式。
根据 Dash Bootstrap components 我可以按如下所述将药丸样式设置为导航项：
pills（布尔值，可选）：将药丸样式应用于导航项。活动项目将由药丸指示。
我已经这样编辑了代码：
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.
我最接近更改药丸样式的方法是更改可用的 bootstrap 样式表：
app = dash.Dash(external_stylesheets=[dbc.themes.FLATLY])
您可以在htmlhere
中查看各种主题及其代码我强烈建议您在 css 样式表中采用处理伪 class 样式的方法，例如 :hover 和 :active。
要包含 css 样式表，请参阅文档 here。基本上你只需要在根目录中有一个 assets 文件夹，然后将 .css 个文件放在里面。
因此您可以向每个 NavLink 添加 className 属性，在样式表中使用 class 定位元素并添加 :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)