Merge pull request #496 from facultyai/update-examples

tcbegley · web-flow · commit 630679a92861 · 2020-12-14T20:31:51.000Z
Update examples to use new active matching feature of navlink
diff --git a/examples/multi-page-apps/collapsible-sidebar-with-icons/app.py b/examples/multi-page-apps/collapsible-sidebar-with-icons/app.py
@@ -4,8 +4,10 @@
 disappear and only the icons remain. Visit www.fontawesome.com to find
 alternative icons to suit your needs!
 
-dcc.Location is used to track the current location, setting the page content
-and the active menu item via callbacks.
+dcc.Location is used to track the current location, a callback uses the current
+location to render the appropriate page content. The active prop of each
+NavLink is set automatically according to the current pathname. To use this
+feature you must install dash-bootstrap-components >= 0.11.0.
 
 For more details on building multi-page Dash applications, check out the Dash
 documentation: https://dash.plot.ly/urls
@@ -38,23 +40,23 @@
                 dbc.NavLink(
                     [html.I(className="fas fa-home mr-2"), html.Span("Home")],
                     href="/",
-                    id="home-link",
+                    active="exact",
                 ),
                 dbc.NavLink(
                     [
                         html.I(className="fas fa-calendar-alt mr-2"),
                         html.Span("Calendar"),
                     ],
                     href="/calendar",
-                    id="calendar-link",
+                    active="exact",
                 ),
                 dbc.NavLink(
                     [
                         html.I(className="fas fa-envelope-open-text mr-2"),
                         html.Span("Messages"),
                     ],
                     href="/messages",
-                    id="messages-link",
+                    active="exact",
                 ),
             ],
             vertical=True,
@@ -70,7 +72,7 @@
 
 
 # set the content according to the current pathname
-@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
+@app.callback(Output("page-content", "children"), Input("url", "pathname"))
 def render_page_content(pathname):
     if pathname == "/":
         return html.P("This is the home page!")
@@ -88,23 +90,5 @@ def render_page_content(pathname):
     )
 
 
-# sets the active property on the navlink corresponding to the current page
-@app.callback(
-    [
-        Output(link_id, "active")
-        for link_id in ["home-link", "calendar-link", "messages-link"]
-    ],
-    [Input("url", "pathname")],
-)
-def toggle_active_links(pathname):
-    if pathname == "/":
-        return True, False, False
-    elif pathname == "/calendar":
-        return False, True, False
-    elif pathname == "/messages":
-        return False, False, True
-    return False, False, False
-
-
 if __name__ == "__main__":
     app.run_server(debug=True)
diff --git a/examples/multi-page-apps/navbar.py b/examples/multi-page-apps/navbar.py
@@ -1,11 +1,10 @@
 """
 This app uses NavbarSimple to navigate between three different pages.
 
-dcc.Location is used to track the current location. There are two callbacks,
-one uses the current location to render the appropriate page content, the other
-uses the current location to toggle the "active" properties of the navigation
-links. This means the link corresponding to the current page appears active,
-indicating to the user which page they are looking at.
+dcc.Location is used to track the current location. A callback uses the current
+location to render the appropriate page content. The active prop of each
+NavLink is set automatically according to the current pathname. To use this
+feature you must install dash-bootstrap-components >= 0.11.0.
 
 For more details on building multi-page Dash applications, check out the Dash
 documentation: https://dash.plot.ly/urls
@@ -23,9 +22,9 @@
         dcc.Location(id="url"),
         dbc.NavbarSimple(
             children=[
-                dbc.NavLink("Page 1", href="/page-1", id="page-1-link"),
-                dbc.NavLink("Page 2", href="/page-2", id="page-2-link"),
-                dbc.NavLink("Page 3", href="/page-3", id="page-3-link"),
+                dbc.NavLink("Home", href="/", active="exact"),
+                dbc.NavLink("Page 1", href="/page-1", active="exact"),
+                dbc.NavLink("Page 2", href="/page-2", active="exact"),
             ],
             brand="Navbar with active links",
             color="primary",
@@ -36,27 +35,14 @@
 )
 
 
-# this callback uses the current pathname to set the active state of the
-# corresponding nav link to true, allowing users to tell see page they are on
-@app.callback(
-    [Output(f"page-{i}-link", "active") for i in range(1, 4)],
-    [Input("url", "pathname")],
-)
-def toggle_active_links(pathname):
-    if pathname == "/":
-        # Treat page 1 as the homepage / index
-        return True, False, False
-    return [pathname == f"/page-{i}" for i in range(1, 4)]
-
-
 @app.callback(Output("page-content", "children"), [Input("url", "pathname")])
 def render_page_content(pathname):
-    if pathname in ["/", "/page-1"]:
-        return html.P("This is the content of page 1!")
+    if pathname == "/":
+        return html.P("This is the content of the home page!")
+    elif pathname == "/page-1":
+        return html.P("This is the content of page 1. Yay!")
     elif pathname == "/page-2":
-        return html.P("This is the content of page 2. Yay!")
-    elif pathname == "/page-3":
-        return html.P("Oh cool, this is page 3!")
+        return html.P("Oh cool, this is page 2!")
     # If the user tries to reach a different page, return a 404 message
     return dbc.Jumbotron(
         [
diff --git a/examples/multi-page-apps/responsive-collapsible-sidebar/sidebar.py b/examples/multi-page-apps/responsive-collapsible-sidebar/sidebar.py
@@ -7,10 +7,10 @@
 collapse when on a small screen, and the custom CSS to hide the toggle, and
 force the collapse to stay open when the screen is large.
 
-dcc.Location is used to track the current location. There are two callbacks,
-one uses the current location to render the appropriate page content, the other
-uses the current location to toggle the "active" properties of the navigation
-links.
+dcc.Location is used to track the current location, a callback uses the current
+location to render the appropriate page content. The active prop of each
+NavLink is set automatically according to the current pathname. To use this
+feature you must install dash-bootstrap-components >= 0.11.0.
 
 For more details on building multi-page Dash applications, check out the Dash
 documentation: https://dash.plot.ly/urls
@@ -89,9 +89,9 @@
         dbc.Collapse(
             dbc.Nav(
                 [
-                    dbc.NavLink("Page 1", href="/page-1", id="page-1-link"),
-                    dbc.NavLink("Page 2", href="/page-2", id="page-2-link"),
-                    dbc.NavLink("Page 3", href="/page-3", id="page-3-link"),
+                    dbc.NavLink("Home", href="/", active="exact"),
+                    dbc.NavLink("Page 1", href="/page-1", active="exact"),
+                    dbc.NavLink("Page 2", href="/page-2", active="exact"),
                 ],
                 vertical=True,
                 pills=True,
@@ -107,27 +107,14 @@
 app.layout = html.Div([dcc.Location(id="url"), sidebar, content])
 
 
-# this callback uses the current pathname to set the active state of the
-# corresponding nav link to true, allowing users to tell see page they are on
-@app.callback(
-    [Output(f"page-{i}-link", "active") for i in range(1, 4)],
-    [Input("url", "pathname")],
-)
-def toggle_active_links(pathname):
-    if pathname == "/":
-        # Treat page 1 as the homepage / index
-        return True, False, False
-    return [pathname == f"/page-{i}" for i in range(1, 4)]
-
-
 @app.callback(Output("page-content", "children"), [Input("url", "pathname")])
 def render_page_content(pathname):
-    if pathname in ["/", "/page-1"]:
-        return html.P("This is the content of page 1!")
+    if pathname == "/":
+        return html.P("This is the content of the home page!")
+    elif pathname == "/page-1":
+        return html.P("This is the content of page 1. Yay!")
     elif pathname == "/page-2":
-        return html.P("This is the content of page 2. Yay!")
-    elif pathname == "/page-3":
-        return html.P("Oh cool, this is page 3!")
+        return html.P("Oh cool, this is page 2!")
     # If the user tries to reach a different page, return a 404 message
     return dbc.Jumbotron(
         [
diff --git a/examples/multi-page-apps/responsive-sidebar/sidebar.py b/examples/multi-page-apps/responsive-sidebar/sidebar.py
@@ -7,10 +7,10 @@
 collapse when on a small screen, and the custom CSS to hide the toggle, and
 force the collapse to stay open when the screen is large.
 
-dcc.Location is used to track the current location. There are two callbacks,
-one uses the current location to render the appropriate page content, the other
-uses the current location to toggle the "active" properties of the navigation
-links.
+dcc.Location is used to track the current location, a callback uses the current
+location to render the appropriate page content. The active prop of each
+NavLink is set automatically according to the current pathname. To use this
+feature you must install dash-bootstrap-components >= 0.11.0.
 
 For more details on building multi-page Dash applications, check out the Dash
 documentation: https://dash.plot.ly/urls
@@ -76,9 +76,9 @@
         dbc.Collapse(
             dbc.Nav(
                 [
-                    dbc.NavLink("Page 1", href="/page-1", id="page-1-link"),
-                    dbc.NavLink("Page 2", href="/page-2", id="page-2-link"),
-                    dbc.NavLink("Page 3", href="/page-3", id="page-3-link"),
+                    dbc.NavLink("Home", href="/", active="exact"),
+                    dbc.NavLink("Page 1", href="/page-1", active="exact"),
+                    dbc.NavLink("Page 2", href="/page-2", active="exact"),
                 ],
                 vertical=True,
                 pills=True,
@@ -94,27 +94,14 @@
 app.layout = html.Div([dcc.Location(id="url"), sidebar, content])
 
 
-# this callback uses the current pathname to set the active state of the
-# corresponding nav link to true, allowing users to tell see page they are on
-@app.callback(
-    [Output(f"page-{i}-link", "active") for i in range(1, 4)],
-    [Input("url", "pathname")],
-)
-def toggle_active_links(pathname):
-    if pathname == "/":
-        # Treat page 1 as the homepage / index
-        return True, False, False
-    return [pathname == f"/page-{i}" for i in range(1, 4)]
-
-
 @app.callback(Output("page-content", "children"), [Input("url", "pathname")])
 def render_page_content(pathname):
-    if pathname in ["/", "/page-1"]:
-        return html.P("This is the content of page 1!")
+    if pathname == "/":
+        return html.P("This is the content of the home page!")
+    elif pathname == "/page-1":
+        return html.P("This is the content of page 1. Yay!")
     elif pathname == "/page-2":
-        return html.P("This is the content of page 2. Yay!")
-    elif pathname == "/page-3":
-        return html.P("Oh cool, this is page 3!")
+        return html.P("Oh cool, this is page 2!")
     # If the user tries to reach a different page, return a 404 message
     return dbc.Jumbotron(
         [
diff --git a/examples/multi-page-apps/sidebar-with-submenus/sidebar.py b/examples/multi-page-apps/sidebar-with-submenus/sidebar.py
@@ -2,10 +2,10 @@
 This app creates a simple sidebar layout using inline style arguments and the
 dbc.Nav component.
 
-dcc.Location is used to track the current location. There are two callbacks,
+dcc.Location is used to track the current location. There are three callbacks,
 one uses the current location to render the appropriate page content, the other
-uses the current location to toggle the "active" properties of the navigation
-links.
+two are used to toggle the collapsing sections in the sidebar. They control the
+collapse component and the CSS that rotates the chevron icon respectively.
 
 For more details on building multi-page Dash applications, check out the Dash
 documentation: https://dash.plot.ly/urls
@@ -52,6 +52,7 @@
             ],
             className="my-1",
         ),
+        style={"cursor": "pointer"},
         id="submenu-1",
     ),
     # we use the Collapse component to hide and reveal the navigation links
@@ -75,6 +76,7 @@
             ],
             className="my-1",
         ),
+        style={"cursor": "pointer"},
         id="submenu-2",
     ),
     dbc.Collapse(
diff --git a/examples/multi-page-apps/simple_sidebar.py b/examples/multi-page-apps/simple_sidebar.py
@@ -2,10 +2,10 @@
 This app creates a simple sidebar layout using inline style arguments and the
 dbc.Nav component.
 
-dcc.Location is used to track the current location. There are two callbacks,
-one uses the current location to render the appropriate page content, the other
-uses the current location to toggle the "active" properties of the navigation
-links.
+dcc.Location is used to track the current location, and a callback uses the
+current location to render the appropriate page content. The active prop of
+each NavLink is set automatically according to the current pathname. To use
+this feature you must install dash-bootstrap-components >= 0.11.0.
 
 For more details on building multi-page Dash applications, check out the Dash
 documentation: https://dash.plot.ly/urls
@@ -46,9 +46,9 @@
         ),
         dbc.Nav(
             [
-                dbc.NavLink("Page 1", href="/page-1", id="page-1-link"),
-                dbc.NavLink("Page 2", href="/page-2", id="page-2-link"),
-                dbc.NavLink("Page 3", href="/page-3", id="page-3-link"),
+                dbc.NavLink("Home", href="/", active="exact"),
+                dbc.NavLink("Page 1", href="/page-1", active="exact"),
+                dbc.NavLink("Page 2", href="/page-2", active="exact"),
             ],
             vertical=True,
             pills=True,
@@ -62,27 +62,14 @@
 app.layout = html.Div([dcc.Location(id="url"), sidebar, content])
 
 
-# this callback uses the current pathname to set the active state of the
-# corresponding nav link to true, allowing users to tell see page they are on
-@app.callback(
-    [Output(f"page-{i}-link", "active") for i in range(1, 4)],
-    [Input("url", "pathname")],
-)
-def toggle_active_links(pathname):
-    if pathname == "/":
-        # Treat page 1 as the homepage / index
-        return True, False, False
-    return [pathname == f"/page-{i}" for i in range(1, 4)]
-
-
 @app.callback(Output("page-content", "children"), [Input("url", "pathname")])
 def render_page_content(pathname):
-    if pathname in ["/", "/page-1"]:
-        return html.P("This is the content of page 1!")
+    if pathname == "/":
+        return html.P("This is the content of the home page!")
+    elif pathname == "/page-1":
+        return html.P("This is the content of page 1. Yay!")
     elif pathname == "/page-2":
-        return html.P("This is the content of page 2. Yay!")
-    elif pathname == "/page-3":
-        return html.P("Oh cool, this is page 3!")
+        return html.P("Oh cool, this is page 2!")
     # If the user tries to reach a different page, return a 404 message
     return dbc.Jumbotron(
         [
