Skip to content

Instantly share code, notes, and snippets.

@glassresistor
Created September 10, 2020 17:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save glassresistor/996870bb9b89b1d94960d7d3e5bb6eaa to your computer and use it in GitHub Desktop.
Save glassresistor/996870bb9b89b1d94960d7d3e5bb6eaa to your computer and use it in GitHub Desktop.
Spliting a dash app into modules
from page_1 import *
from page_2 import *
server = app.server
if __name__ == '__main__':
app.run_server(debug=True)
from server import URL_TO_PAGE, app
URL_TO_PAGE['/page-1'] = html.Div([
html.H1('Page 1'),
dcc.Dropdown(
id='page-1-dropdown',
options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
value='LA'
),
html.Div(id='page-1-content'),
html.Br(),
dcc.Link('Go to Page 2', href='/page-2'),
html.Br(),
dcc.Link('Go back to home', href='/'),
])
@app.callback(dash.dependencies.Output('page-1-content', 'children'),
[dash.dependencies.Input('page-1-dropdown', 'value')])
def page_1_dropdown(value):
return 'You have selected "{}"'.format(value)
from server import URL_TO_PAGE, app
URL_TO_PAGE['/page-2'] = html.Div([
html.H1('Page 2'),
dcc.Dropdown(
id='page-1-dropdown',
options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
value='LA'
),
html.Div(id='page-1-content'),
html.Br(),
dcc.Link('Go to Page 2', href='/page-2'),
html.Br(),
dcc.Link('Go back to home', href='/'),
])
@app.callback(dash.dependencies.Output('page-2-content', 'children'),
[dash.dependencies.Input('page-2-dropdown', 'value')])
def page_2_dropdown(value):
return 'You have selected "{}"'.format(value)
import dash
import dash_core_components as dcc
import dash_html_components as html
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
# represents the URL bar, doesn't render anything
dcc.Location(id='url', refresh=False),
dcc.Link('Navigate to "/"', href='/'),
html.Br(),
dcc.Link('Navigate to "/page-1"', href='/page-1'),
dcc.Link('Navigate to "/page-2"', href='/page-2'),
# content will be rendered in this element
html.Div(id='page-content')
])
URL_TO_PAGE = {}
@app.callback(dash.dependencies.Output('page-content', 'children'),
[dash.dependencies.Input('url', 'pathname')])
def display_page(url):
return URL_TO_PAGE[url]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment