forked from radovankavicky/dash-docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathexternal_css_and_js.py
More file actions
99 lines (69 loc) · 2.9 KB
/
Copy pathexternal_css_and_js.py
File metadata and controls
99 lines (69 loc) · 2.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
layout = html.Div([
dcc.Markdown('''
# External CSS and JavaScript
The component libraries that you use with dash, like `dash_core_components`
and `dash_html_components`, include JavaScript and CSS bundles. Dash
automatically checks which JavaScript and CSS bundles are necessary
to render the application.
Some of this functionality is customizable and extendable.
***
## Including custom CSS and JavaScript in your Dash app
'''.replace(' ', '')),
dcc.SyntaxHighlighter('''from dash import Dash
app = Dash()
# Append an externally hosted CSS stylesheet
my_css_url = "https://unpkg.com/normalize.css@5.0.0"
app.css.append_css({
"external_url": my_css_url
})
# Append an externally hosted JS bundle
my_js_url = 'https://unkpg.com/some-npm-package.js'
app.scripts.append_script({
"external_url": my_js_url
})''', language='python', customStyle={'borderLeft': 'thin solid lightgrey'}),
dcc.Markdown('''
Dash currently only supports loading CSS and JavaScript bundles
that are externally hosted.
***
### Default Styles
Currently, Dash does not include styles by default.
In future releases, Dash may include a default (removable) stylesheet.
For now, you can use or fork this [CSS stylesheet](https://codepen.io/chriddyp/pen/bWLwgP?editors=1100) hosted
on [Codepen](https://codepen.io).
You can embed this stylesheet with this URL
[https://codepen.io/chriddyp/pen/bWLwgP.css](https://codepen.io/chriddyp/pen/bWLwgP.css).
```
app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'})
```
Here is an embedded version of this stylesheet.
'''.replace(' ', '')),
html.Iframe(
src="//codepen.io/chriddyp/embed/bWLwgP/?height=265&"
"theme-id=light&default-tab=css,result&embed-version=2",
style={'height': 400, 'width': '100%', 'border': 'none'}
),
dcc.Markdown('''
***
## Rendering dash apps offline
The JavaScript and CSS bundles that are included in
Dash component libraries are hosted on the web
(on the unpkg CDN) and in the Python packages that you install.
By default, dash serves the JavaScript and CSS resources from the
online CDNs. This is usually much faster than loading the resources
from the file system.
However, if you are working in an offline or firewalled environment or
if the CDN is unavailable, then your dash app itself can serve these
files. These files are stored as part of the component's site-packages
folder.
Here's how to enable this option:
'''.replace(' ', '')),
dcc.SyntaxHighlighter('''from dash import Dash
app = Dash()
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True''',
language='python',
customStyle={'borderLeft': 'thin lightgrey solid'})
])