1 | import grasia_dash_components
|
2 | import dash
|
3 | import dash_html_components as html
|
4 | import dash_core_components as dcc
|
5 | from dash.dependencies import Input, Output
|
6 | from threading import Timer
|
7 |
|
8 | app = dash.Dash('')
|
9 |
|
10 | app.scripts.config.serve_locally = True
|
11 |
|
12 |
|
13 | def generate_card():
|
14 | card_data = [
|
15 | {'label': 'Contributors', 'data': '2 000 000'},
|
16 | {'label': 'Editions', 'data': '90 000 000'},
|
17 | {'label': 'Pages', 'data': ' 200 000'}
|
18 | ]
|
19 |
|
20 | card_style = {'backgroundColor': '#004481',
|
21 | 'color': 'white',
|
22 | 'border': '1px lightgrey solid'}
|
23 |
|
24 | return grasia_dash_components.Card(
|
25 | id='test-card',
|
26 | img='https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png',
|
27 | data=card_data,
|
28 | style=card_style,
|
29 | url="https://www.wikipedia.org/",
|
30 | description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam mi, vehicula mollis libero at, congue tristique purus. Vivamus rhoncus tincidunt luctus.'
|
31 | );
|
32 |
|
33 |
|
34 | app.layout = html.Div([
|
35 |
|
36 | grasia_dash_components.Import(src='https://codepen.io/akronix/pen/pVqzLZ.js'),
|
37 |
|
38 | html.H2('Loading dialog'),
|
39 | html.Button('Show Loading Dialog', id='button'),
|
40 | grasia_dash_components.LoadingDialog(id="dialog", text="test", show=False),
|
41 |
|
42 | html.Hr(),
|
43 |
|
44 | html.H2('Card with image'),
|
45 | generate_card(),
|
46 |
|
47 | html.Hr(),
|
48 |
|
49 | html.H2('Simple Accordions'),
|
50 | grasia_dash_components.Accordion(
|
51 | id="test-tree-view1",
|
52 | label="See Options",
|
53 | children=[
|
54 | html.P('Option 1'),
|
55 | html.P('Option 2'),
|
56 | html.P('Option 3')
|
57 | ]
|
58 | ),
|
59 | grasia_dash_components.Accordion(
|
60 | id="test-tree-view2",
|
61 | label="See Other Options",
|
62 | children=[
|
63 | html.P('Option 4'),
|
64 | html.P('Option 5'),
|
65 | html.P('Option 6')
|
66 | ]
|
67 | ),
|
68 | html.Hr(),
|
69 |
|
70 | html.H2('Accordion with a Checklist inside'),
|
71 | grasia_dash_components.Accordion(
|
72 | id="test-tree-view-2",
|
73 | label="Checklist",
|
74 | children=[
|
75 | dcc.Checklist(
|
76 | id='checklist',
|
77 | options=[
|
78 | {'label': 'New York City', 'value': 'NYC'},
|
79 | {'label': 'Montréal', 'value': 'MTL'},
|
80 | {'label': 'San Francisco', 'value': 'SF'}
|
81 | ],
|
82 | values=['MTL', 'SF']
|
83 | )
|
84 | ]
|
85 | ),
|
86 |
|
87 | html.Hr(),
|
88 |
|
89 | html.H2('Accordion with Cards inside'),
|
90 | grasia_dash_components.Accordion(
|
91 | id="test-tree-view-3",
|
92 | label="Cards",
|
93 | children=[
|
94 | generate_card(),
|
95 | generate_card(),
|
96 | generate_card(),
|
97 | ],
|
98 | defaultCollapsed=True
|
99 | ),
|
100 |
|
101 | html.Hr(),
|
102 |
|
103 | html.Div(
|
104 | grasia_dash_components.Tabs(
|
105 | tabs=[{'label': '123456789 More-text', 'value': 1},
|
106 | {'label': '1234567890A More-text', 'value': 2}],
|
107 | value=1,
|
108 | id='tabs',
|
109 | style={'font-weight':'bold'}
|
110 | )
|
111 | )
|
112 | ])
|
113 |
|
114 | def hide_loading_dialog(show):
|
115 | print('foo')
|
116 |
|
117 |
|
118 | @app.callback(Output('dialog', 'show'),
|
119 | [Input('button', 'n_clicks')])
|
120 | def show_loading_dialog(n_clicks):
|
121 | print(n_clicks);
|
122 | return n_clicks != None and n_clicks % 2 == 1
|
123 |
|
124 | if __name__ == '__main__':
|
125 | print('Using version ' + dcc.__version__ + ' of Dash Core Components.')
|
126 | print('Using version ' + grasia_dash_components.__version__ + ' of Grasia Dash Components.')
|
127 |
|
128 | app.run_server(debug=True)
|