Ниже приведен рабочий пример приложения 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 darkly .
У меня проблема в том, что я не знаю, как стилизовать dash_core_components.Dropdown
с помощью стиля начальной загрузки.
Как видно на изображениях ниже, все элементы dash_bootstrap_components
оформлены в соответствии со стилем начальной загрузки, а Dropdown
- нет, и фактически текст, который выпадает, почти равен невозможно прочитать, так как это белый текст на очень светлом фоне.
![enter image description here](https://i.stack.imgur.com/9I11G.png)
В темных образцах выпадающий список выглядит так:
![enter image description here](https://i.stack.imgur.com/1rK6a.png)
При наведении курсора на опцию фон является «основным» цветом начальной загрузки:
![enter image description here](https://i.stack.imgur.com/mdlTC.png)
Как мне оформить dcc.Dropdown
в соответствии со стилем начальной загрузки?