update dbc-navbar

Author: xianhu

Dash/advcom/__init__.py

@@ -0,0 +1,5 @@
+# _*_ coding: utf-8 _*_
+
+"""
+高级组件
+"""

Dash/advcom/navbar.py

@@ -0,0 +1,51 @@
+# _*_ coding: utf-8 _*_
+
+"""
+导航栏
+"""
+
+import dash_html_components as html
+import dash_bootstrap_components as dbc
+PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png"
+
+# 通用组件
+nav_item1 = dbc.NavItem(children=dbc.NavLink("首页", href="/"))
+nav_item2 = dbc.NavItem(children=dbc.NavLink("Link2", href="#"))
+drop_down = dbc.DropdownMenu(children=[
+    dbc.DropdownMenuItem("More", header=True),
+    dbc.DropdownMenuItem("Entry app1", href="/app1"),
+    dbc.DropdownMenuItem("Entry app2", href="/app2"),
+    dbc.DropdownMenuItem(divider=True),
+    dbc.DropdownMenuItem("Entry app3", href="/app3"),
+    dbc.DropdownMenuItem("Entry app4", href="/app4"),
+], nav=True, in_navbar=True, label="Menu")
+
+# 定义不同的导航栏
+navbar_default = dbc.NavbarSimple(children=[nav_item1, nav_item2, drop_down], brand="Dash", brand_href="#", sticky="top")
+
+navbar_custom = dbc.Navbar(children=dbc.Container(children=[
+    dbc.NavbarBrand("Dash", href="#"),
+    # dbc.NavbarToggler(id="navbar-toggler1"),
+    dbc.Collapse(children=dbc.Nav([nav_item1, nav_item2, drop_down], className="ml-auto", navbar=True), navbar=True),
+]))
+
+navbar_logo = dbc.Navbar(children=dbc.Container(children=[
+    html.A(dbc.Row(children=[
+        dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
+        dbc.Col(dbc.NavbarBrand("Dash", className="ml-2")),
+    ], align="center", no_gutters=True), href="https://plot.ly"),
+    # dbc.NavbarToggler(id="navbar-toggler2"),
+    dbc.Collapse(children=dbc.Nav([nav_item1, nav_item2, drop_down], className="ml-auto", navbar=True), navbar=True),
+]), color="dark", dark=True)
+
+navbar_search = dbc.Navbar(children=dbc.Container(children=[
+    dbc.NavbarBrand("Search", href="#"),
+    # dbc.NavbarToggler(id="navbar-toggler3"),
+    dbc.Collapse(children=dbc.Row(children=[
+        dbc.Col(dbc.Input(type="search", placeholder="Search")),
+        # set width of button column to auto to allow search box to take up remaining space.
+        dbc.Col(dbc.Button("Search", color="primary", className="ml-2"), width="auto"),
+    ], align="center", no_gutters=True, className="ml-auto flex-nowrap"), navbar=True),
+    # keep button and search box on same row (flex-nowrap).
+    # align everything on the right with left margin (ml-auto).
+]))

Dash/apps/app3.py

@@ -33,8 +33,11 @@
                 "name": "Trace 2",
                 "mode": "markers",
                 "marker": {"size": 12}
-            }]
-        }
+            }],
+            "layout": {
+                "title": "Dash Data Visualization"
+            },
+        },
     ),
 
     html.Div(children=dbc.Row(children=[

Dash/index.py

@@ -11,7 +11,7 @@
 
 from Dash.app import app
 from Dash.apps import app1, app2, app3, app4
-
+from Dash.advcom.navbar import nav_item1, nav_item2, drop_down, PLOTLY_LOGO
 
 # 创建布局
 app.layout = html.Div([
@@ -23,16 +23,20 @@
     dcc.Store(id="session", storage_type="session"),
 
     dcc.Location(id="url", refresh=False),
-    dbc.Navbar(children=[
-        dbc.NavItem(dbc.NavLink("Link", href="#")),
-        dbc.DropdownMenu(children=[
-            dbc.DropdownMenuItem("Entry 1"),
-            dbc.DropdownMenuItem("Entry 2"),
-            dbc.DropdownMenuItem(divider=True),
-            dbc.DropdownMenuItem("Entry 3")
-        ], nav=True, in_navbar=True, label="Menu"),
-    ], brand="Demo", brand_href="/", sticky="top", color="light"),
-    html.Div(id="page-content")
+
+    # 定义一个较为复杂的导航栏
+    dbc.Navbar(children=dbc.Container(children=[
+        html.A(dbc.Row(children=[
+            dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
+            dbc.Col(dbc.NavbarBrand("DashDemo", className="ml-2")),
+        ], align="center", no_gutters=True), href="https://plot.ly"),
+        dbc.Collapse(children=dbc.Nav([nav_item1, nav_item2, drop_down], navbar=True), navbar=True),
+        dbc.Collapse(children=dbc.Row(children=[
+            dbc.Col(dbc.Input(type="search", placeholder="Search")),
+            dbc.Col(dbc.Button("Search", color="primary", className="ml-2"), width="auto"),
+        ], align="center", no_gutters=True, className="ml-auto flex-nowrap"), navbar=True),
+    ]), color="light", light=True),
+    html.Div(id="page-content"),
 ])
 
 
@@ -46,7 +50,7 @@ def display_page(pathname):
             html.Br(),
             dcc.Link("Navigate to '/app2'，组件相关", href="/app2"),
             html.Br(),
-            dcc.Link("Navigate to '/app3'，画图", href="/app3"),
+            dcc.Link("Navigate to '/app3'，画图相关", href="/app3"),
             html.Br(),
             dcc.Link("Navigate to '/app4'，dash-table", href="/app4"),
         ])