Dash has been updated to version 0.22.0
What’s new ?
Assets include
Dash will now look for a folder named assets
on the current work directory, if one is found, it will walk that directory and include js and css files on the index.
Related configs:
import dash
app = dash.Dash()
# default values
app.config.include_asset_files = True # Include the files in the asset folder
app.config.assets_external_path = '' # The external prefix if serve_locally == False
Supported files:
-
.js
, javascript files will be included after the components libs and before the dash-render. -
.css
, stylesheets will be included as a<link>
in the head. -
favicon.ico
, include as a<link>
in the head.
The files are included in alphabetic order.
The directories can be nested.
Advanced use:
To host your assets content externally:
- set
app.scripts.config.serve_locally
andapp.css.config.serve_locally
toFalse
. - set
app.config.assets_external_path
to your base host url, eg:http://bucket.s3.amazonaws.com/
-
app.config.include_asset_files
must still be set toTrue
for the files to be indexed by dash. - Duplicate the file structure in your assets folder to your file hoster and the files will be loaded from there instead.
Index customization
Meta tags
It is now possible to add meta tags to the index of dash.
Example:
import dash
app = dash.Dash(meta_tags=[
{'name': 'description', 'content': 'My description'},
{'http-equiv': 'X-UA-Compatible', 'content': 'IE=edge'}
])
Customizing the index
Add an index_string
to change the default index dash use.
import dash
app = dash.Dash()
app.index_string = '''
<!DOCTYPE html>
<html>
<head>
{%metas%}
<title>{%title%}</title>
{%favicon%}
{%css%}
</head>
<body>
<div>My Custom header</div>
{%app_entry%}
<footer>
{%config%}
{%scripts%}
</footer>
<div>My Custom footer</div>
</body>
</html>
'''
The {%key%}
s will be formatted like in the default index.
Available keys:
{%metas%} # optional - The registered meta tags.
{%favicon%} # optional - A favicon link tag if found in `assets`.
{%css%} # optional - link tags to css resources.
{%title%} # optional - Page title.
{%config%} # required - Config generated by dash for the renderer.
{%app_entry%} # required - The container where dash react components are rendered.
{%scripts%} # required - Collected dependencies scripts tags.
You can also override Dash.interpolate_index
for more advanced use cases.
import dash
class CustomDash(dash.Dash):
def interpolate_index(self, **kwargs):
return '''
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="custom-header">My custom header</div>
{app_entry}
{config}
{scripts}
<div id="custom-footer">My custom footer</div>
</body>
</html>
'''.format(
app_entry=kwargs['app_entry'],
config=kwargs['config'],
scripts=kwargs['scripts'])