|
| 1 | + |
| 2 | +> ## Status: Multi-Page Dash App Plugin |
| 3 | +> #### Under active development: A plugin to simplify creating multi-page Dash apps. This is a preview of functionality that will be added to Dash 2.1. |
| 4 | +> **[See the community announcement for details and discussion](https://community.plotly.com/t/introducing-dash-pages-dash-2-1-feature-preview/57775/2)** |
| 5 | +
|
| 6 | + |
| 7 | + |
| 8 | +# Multi-Page Dash App Plugin Examples |
| 9 | + |
| 10 | +**Please see Chapter 08-MultiPageDashApp for an introduction to the Multi-Page Dash App Plugin** |
| 11 | + |
| 12 | +If you would like to add an example, feel free to create a pull request! For more information, see the documentation issue #xx. |
| 13 | + |
| 14 | +### Example: Nested Folders |
| 15 | +This example shows how `dash.register_page` handles |
| 16 | + - Using Nested folders in `pages/` |
| 17 | + - Storing icons as arbitrary keyword arguments |
| 18 | + |
| 19 | +See the code in `/demos/multi-page-nested-folders` |
| 20 | + |
| 21 | +In larger multi-page apps it's common to organize topics into categories. Each category may have it's own folder with multiple |
| 22 | +pages. This plugin automatically searches all subdirectories in `pages/` and includes all the apps. |
| 23 | +In our example the `heatmaps.py` is in `pages/` and `pie-chart.py` is in `pages/chapter/`. |
| 24 | +The `dash.page_registry` dictionary will include the subdirectory name(s) in the dict key and the module and path like this: |
| 25 | +```python |
| 26 | +OrderedDict([ |
| 27 | + ('pages.heatmaps', { |
| 28 | + 'module': 'pages.heatmap', |
| 29 | + 'path': '/heatmap', |
| 30 | + ... |
| 31 | + } |
| 32 | + ), |
| 33 | + ('pages.chapter.pie-chart', { |
| 34 | + 'module': 'pages.chapter.pie-chart', |
| 35 | + 'path': '/chapter/pie-chart', |
| 36 | + ... |
| 37 | + } |
| 38 | + ), |
| 39 | + ... |
| 40 | +]) |
| 41 | +``` |
| 42 | + |
| 43 | +In this example app, we will create a sidebar nav for the app pages located in the `chapter/` folder. We use a `dbc.Offcanvas()` component and open the sidebar nav with a button. |
| 44 | + |
| 45 | +Here is the `app.py` |
| 46 | + |
| 47 | +```python |
| 48 | +import dash |
| 49 | +from dash import dcc, html, Output, Input, State |
| 50 | +import dash_labs as dl |
| 51 | +import dash_bootstrap_components as dbc |
| 52 | + |
| 53 | + |
| 54 | +app = dash.Dash( |
| 55 | + __name__, |
| 56 | + plugins=[dl.plugins.pages], |
| 57 | + external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME], |
| 58 | +) |
| 59 | + |
| 60 | + |
| 61 | +navbar = dbc.NavbarSimple( |
| 62 | + dbc.DropdownMenu( |
| 63 | + [ |
| 64 | + dbc.DropdownMenuItem(page["name"], href=page["path"]) |
| 65 | + for page in dash.page_registry.values() |
| 66 | + if not page["path"].startswith("/chapter") |
| 67 | + ], |
| 68 | + nav=True, |
| 69 | + label="More Pages", |
| 70 | + ), |
| 71 | + brand="Multi Page App Plugin Demo", |
| 72 | + color="primary", |
| 73 | + dark=True, |
| 74 | + className="mb-2", |
| 75 | +) |
| 76 | + |
| 77 | +sidebar_button = dbc.Button(html.I(className="fa fa-bars"), id="sidebar-btn") |
| 78 | +sidebar = dbc.Offcanvas( |
| 79 | + dbc.Nav( |
| 80 | + [html.H3("Chapters")] |
| 81 | + + [ |
| 82 | + dbc.NavLink( |
| 83 | + [ |
| 84 | + html.I(className=page["icon"]), |
| 85 | + html.Span(page["name"], className="ms-2"), |
| 86 | + ], |
| 87 | + href=page["path"], |
| 88 | + active="exact", |
| 89 | + ) |
| 90 | + for page in dash.page_registry.values() |
| 91 | + if page["path"].startswith("/chapter") |
| 92 | + ], |
| 93 | + vertical=True, |
| 94 | + pills=True, |
| 95 | + ), |
| 96 | + id="offcanvas", |
| 97 | +) |
| 98 | + |
| 99 | +app.layout = dbc.Container( |
| 100 | + [ |
| 101 | + navbar, |
| 102 | + dbc.Row( |
| 103 | + [ |
| 104 | + dbc.Col([sidebar_button], width=1), |
| 105 | + dbc.Col([sidebar, dl.plugins.page_container]), |
| 106 | + ] |
| 107 | + ), |
| 108 | + ], |
| 109 | + fluid=True, |
| 110 | +) |
| 111 | + |
| 112 | + |
| 113 | +@app.callback( |
| 114 | + Output("offcanvas", "is_open"), |
| 115 | + Input("sidebar-btn", "n_clicks"), |
| 116 | + State("offcanvas", "is_open"), |
| 117 | +) |
| 118 | +def toggle_theme_offcanvas(n1, is_open): |
| 119 | + if n1: |
| 120 | + return not is_open |
| 121 | + return is_open |
| 122 | + |
| 123 | + |
| 124 | +if __name__ == "__main__": |
| 125 | + app.run_server(debug=True) |
| 126 | + |
| 127 | +``` |
| 128 | + |
| 129 | +Recall from the previous chapter that `dash.register_page` also accepts arbitrary keyword arguments. We use this |
| 130 | +feature to store the icon used in the nav for each page. |
| 131 | + |
| 132 | +Here is how we store the FontAwesome icon for `pages/chapter/pie-chart.py` |
| 133 | + |
| 134 | +```python |
| 135 | + |
| 136 | +dash.register_page(__name__, icon="fas fa-chart-pie") |
| 137 | +``` |
| 138 | + |
| 139 | +You can see how the icon is included in the sidebar navigation: |
| 140 | + |
| 141 | + |
0 commit comments