代码之家 › 专栏 › 技术社区 › Steve Lorimer

使用深色主题引导css设计仪表板组件

plotly-dash twitter-bootstrap python

Steve Lorimer · 技术社区 · 7 年前

下面我举了一个有效的例子 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 theme .

我的问题是我不知道如何设计 dash_core_components.Dropdown 采用自举方式。

如下图所示 dash_bootstrap_components 元素都是根据bootstrap样式设计的,但是 Dropdown 事实并非如此,事实上,当文本被放下时,几乎不可能阅读,因为它是背景非常浅的白色文本。

在黑暗样本中,下拉列表如下所示:

当鼠标悬停在某个选项上时,背景为引导“主”色:

我该如何设计这件衣服 dcc.Dropdown 根据bootstrap风格?

0 回复 | 直到 7 年前

fuglede 5 年前

我注意到你提出了这个问题 on the Plotly forums as well 特别是 answer linked in one of the answers 可能包含一个有用的起点。我自己所做的只是对 this answer :添加一个 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;
}

结果如下: