我下面有一个 plotly dash 应用程序的工作示例,该应用程序在选项卡上显示下拉列表,然后在选择下拉列表中的项目时显示警报。
#!/usr/bin/env python3
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('Example', external_stylesheets=[dbc.themes.DARKLY])
app.title = 'Example'
app.layout = dbc.Tabs([
dbc.Tab(
dbc.Card([
dcc.Dropdown(id='dropdown',
options=[
{ 'label': 'Item 1', 'value': 'foo' },
{ 'label': 'Item 2', 'value': 'bar' },
],
),
html.Br(),
html.Div(id='item-display'),
], body=True), label='Tab 1')
])
@app.callback(
Output('item-display', 'children'),
[Input('dropdown', 'value')]
)
def display_item(v):
return dbc.Alert(f'You selected Item {value}', color='primary') if v else ''
if __name__ == '__main__':
app.run_server(debug=True)
我正在使用 bootswatch 深色主题。
dash_core_components.Dropdown
的样式。
dash_bootstrap_components
元素都是根据引导样式设计的,但Dropdown
不是,事实上,下拉时的文本几乎无法阅读非常浅的背景上的白色文本。
在深色样本中,下拉菜单如下所示:
将鼠标悬停在选项上时,背景是引导程序“主要”颜色:
如何根据引导样式设置
dcc.Dropdown
的样式?
我注意到您也将问题放在了 Plotly 论坛上,特别是,其中一个答案中链接的答案可能包含一个有用的起点。我自己做的是稍微修改这个答案:添加一个
assets/dropdown.css
,其中包含以下内容:
.Select-control {
background-color: #222 !important;
}
.Select.is-focused > .Select-control {
background-color: #222;
}
#school-input {
color: white;
}
.Select-value-label {
color: white;
}
.Select--single > .Select-control .Select-value, .Select-placeholder {
border: 1px solid grey;
border-radius: 4px;
}
.VirtualizedSelectOption {
background-color: #222;
color: white;
}
.VirtualizedSelectFocusedOption {
background-color: #222;
opacity: .7;
}
.Select.is-focused:not(.is-open) > .Select-control {
background-color: #222;
border-color: var(--primary);
box-shadow: none;
}
如此处所述,您可以通过将以下样式表添加到您的应用程序来解决此问题。
dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css"
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc_css])
然后将所有应根据您选择的主题设置样式的组件放入带有
html.Div
的 className="dbc"
中。请参阅此示例以获取下拉列表:
with_theme = html.Div(
[
dcc.Dropdown(["Apple", "Carrots", "Chips", "Cookies"], "Cookies"),
],
className="dbc",
)