|
1
|
|
|
import dash |
|
2
|
|
|
import dash_core_components as dcc |
|
3
|
|
|
import dash_html_components as html |
|
4
|
|
|
|
|
5
|
|
|
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] |
|
6
|
|
|
|
|
7
|
|
|
app = dash.Dash(__name__, external_stylesheets=external_stylesheets) |
|
8
|
|
|
|
|
9
|
|
|
app.layout = html.Div([ |
|
10
|
|
|
html.Label('Dropdown'), |
|
11
|
|
|
dcc.Dropdown( |
|
12
|
|
|
options=[ |
|
13
|
|
|
{'label': 'New York City', 'value': 'NYC'}, |
|
14
|
|
|
{'label': u'Montréal', 'value': 'MTL'}, |
|
15
|
|
|
{'label': 'San Francisco', 'value': 'SF'} |
|
16
|
|
|
], |
|
17
|
|
|
value='MTL' |
|
18
|
|
|
), |
|
19
|
|
|
|
|
20
|
|
|
html.Label('Multi-Select Dropdown'), |
|
21
|
|
|
dcc.Dropdown( |
|
22
|
|
|
options=[ |
|
23
|
|
|
{'label': 'New York City', 'value': 'NYC'}, |
|
24
|
|
|
{'label': u'Montréal', 'value': 'MTL'}, |
|
25
|
|
|
{'label': 'San Francisco', 'value': 'SF'} |
|
26
|
|
|
], |
|
27
|
|
|
value=['MTL', 'SF'], |
|
28
|
|
|
multi=True |
|
29
|
|
|
), |
|
30
|
|
|
|
|
31
|
|
|
html.Label('Radio Items'), |
|
32
|
|
|
dcc.RadioItems( |
|
33
|
|
|
options=[ |
|
34
|
|
|
{'label': 'New York City', 'value': 'NYC'}, |
|
35
|
|
|
{'label': u'Montréal', 'value': 'MTL'}, |
|
36
|
|
|
{'label': 'San Francisco', 'value': 'SF'} |
|
37
|
|
|
], |
|
38
|
|
|
value='MTL' |
|
39
|
|
|
), |
|
40
|
|
|
|
|
41
|
|
|
html.Label('Checkboxes'), |
|
42
|
|
|
dcc.Checklist( |
|
43
|
|
|
options=[ |
|
44
|
|
|
{'label': 'New York City', 'value': 'NYC'}, |
|
45
|
|
|
{'label': u'Montréal', 'value': 'MTL'}, |
|
46
|
|
|
{'label': 'San Francisco', 'value': 'SF'} |
|
47
|
|
|
], |
|
48
|
|
|
values=['MTL', 'SF'] |
|
49
|
|
|
), |
|
50
|
|
|
|
|
51
|
|
|
html.Label('Text Input'), |
|
52
|
|
|
dcc.Input(value='MTL', type='text'), |
|
53
|
|
|
|
|
54
|
|
|
html.Label('Slider'), |
|
55
|
|
|
dcc.Slider( |
|
56
|
|
|
min=0, |
|
57
|
|
|
max=9, |
|
58
|
|
|
marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)}, |
|
59
|
|
|
value=5, |
|
60
|
|
|
), |
|
61
|
|
|
], style={'columnCount': 2}) |
|
62
|
|
|
|
|
63
|
|
|
if __name__ == '__main__': |
|
64
|
|
|
app.run_server(debug=True) |
|
65
|
|
|
|