使用dash_bootstrap_components的搜索栏组件navbar

# -*- coding: utf-8 -*-
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

# 实例化dash
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
PLOTLY_LOGO = "http://logofaves.com/wp-content/uploads/2016/07/sun_m.jpg?9cf02b"

# 自定义搜索输入框和按钮
search_bar = dbc.Row(
    [
        dbc.Col(dbc.Input(type="search", placeholder="Search")),
        dbc.Col(
            dbc.Button("Search", color="primary", className="ml-2"),
            width="auto",
        ),
    ],
    no_gutters=True,
    className="ml-auto flex-nowrap mt-3 mt-md-0",
    align="center",
)

# 实例化dash_bootstrap_components的搜索栏组件
navbar = dbc.Navbar(
    [
        html.A(
            dbc.Row(
                [
                    dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
                    dbc.Col(dbc.NavbarBrand("Navbar", className="ml-2")),
                ],
                align="center",
                no_gutters=True,
            ),
            # 点击logo图标会跳转到plotly官网
            href="https://plot.ly",
        ),
        dbc.NavbarToggler(id="navbar-toggler"),
        dbc.Collapse(search_bar, id="navbar-collapse", navbar=True),
    ],
    color="dark",
    dark=True,
)

app.layout = navbar

if __name__=="__main__":
    app.run_server(debug=True, port=8090)