Skip to content

Commit 1604c65

Browse files
xianhuxianhu
committed
update Dash
1 parent 1596e84 commit 1604c65

File tree

2 files changed

+43
-56
lines changed

2 files changed

+43
-56
lines changed

‎Dash/components.py‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@
3838

3939
# ---------------------------------------------------------------------------------------
4040
email_input_row = dbc.FormGroup(children=[
41-
dbc.Label("Email", html_for="example-email", width=2),
41+
dbc.Label("Email", html_for="example-email-row", width=2),
4242
dbc.Col(dbc.Input(type="email", id="example-email-row", placeholder="Enter email"), width=10)
4343
], row=True)
4444

4545
password_input_row = dbc.FormGroup(children=[
46-
dbc.Label("Password", html_for="example-password", width=2),
46+
dbc.Label("Password", html_for="example-password-row", width=2),
4747
dbc.Col(dbc.Input(type="password", id="example-password-row", placeholder="Enter password"), width=10)
4848
], row=True)
4949

@@ -62,7 +62,7 @@
6262
dbc.Checklist(options=[
6363
{"label": "Option 1", "value": 1},
6464
{"label": "Option 2", "value": 2},
65-
], values=[]),
65+
], values=[1, 2]),
6666
], style={"backgroundColor": color_info_light})
6767

6868

@@ -80,23 +80,21 @@
8080
dbc.Checklist(options=[
8181
{"label": "Option 1", "value": 1},
8282
{"label": "Option 2", "value": 2},
83-
], values=[], inline=True),
83+
], values=[1, 2], inline=True),
8484
], style={"backgroundColor": color_info_light})
8585

8686

8787
# ---------------------------------------------------------------------------------------
88-
tab1_content = dbc.Card(
89-
dbc.CardBody([
88+
tab1_content = dbc.Card(children=dbc.CardBody([
9089
dbc.CardText("This is tab 1!"),
9190
dbc.Button("Click here", color="success"),
92-
]), className="mt-1",
91+
])
9392
)
9493

95-
tab2_content = dbc.Card(
96-
dbc.CardBody([
94+
tab2_content = dbc.Card(children=dbc.CardBody([
9795
dbc.CardText("This is tab 2!"),
9896
dbc.Button("Don't click here", color="danger"),
99-
]), className="mt-1",
97+
])
10098
)
10199

102100

@@ -105,18 +103,16 @@ def generate_table(dataframe, max_rows=10):
105103
创建表
106104
"""
107105
# Header
108-
header = [html.Thead(html.Tr([html.Th(col) for col in dataframe.columns]))]
106+
header = html.Thead(children=html.Tr([html.Th(col) for col in dataframe.columns[:10]]))
109107

110108
# Row
111109
rows = []
112110
for i in range(max_rows):
113111
td_list = []
114-
for index, col in enumerate(dataframe.columns):
112+
for index, col in enumerate(dataframe.columns[:10]):
115113
if index == 1:
116114
td_list.append(html.Td(dcc.Link(dataframe.iloc[i][col], href=dataframe.iloc[i][col])))
117115
else:
118116
td_list.append(html.Td(dataframe.iloc[i][col]))
119117
rows.append(html.Tr(td_list))
120-
body = [html.Tbody(rows)]
121-
122-
return dbc.Table(header + body, striped=True, bordered=True, hover=True)
118+
return dbc.Table([header, html.Tbody(rows)], striped=True, bordered=True, hover=True)

‎Dash/demo.py‎

Lines changed: 32 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,10 @@
44
Dash实例
55
"""
66

7-
import datetime
87
import dash
9-
import dash_core_components as dcc
10-
import dash_html_components as html
11-
import dash_bootstrap_components as dbc
8+
import datetime
129
from dash.dependencies import Output, Input, State
13-
from Dash.config import *
14-
from Dash.components import drop_down_list
15-
from Dash.components import email_input, password_input, email_input_row, password_input_row
16-
from Dash.components import radioitems, checklist, radioitems_inline, checklist_inline
17-
from Dash.components import tab1_content, tab2_content
18-
from Dash.components import generate_table
10+
from Dash.components import *
1911

2012

2113
# 创建应用
@@ -25,35 +17,30 @@
2517
# 创建布局
2618
app.layout = html.Div(children=[
2719
# DIV布局 ========================================================================================
28-
dbc.Row(children=dbc.Col(
29-
html.Div("单独的DIV", style={"backgroundColor": color_primary_light, "height": 100, "padding": 20, "margin": 5})
30-
)),
20+
dbc.Row(children=dbc.Col(html.Div("单独的DIV", style={"backgroundColor": color_primary_light, "height": 100, "padding": 10, "margin": 5}))),
3121
dbc.Row(children=[
32-
dbc.Col(html.Div("One of three columns", style={"backgroundColor": color_info_light, "margin": 5})),
33-
dbc.Col(html.Div("One of three columns", style={"backgroundColor": color_info_light, "margin": 5})),
34-
dbc.Col(html.Div("One of three columns", style={"backgroundColor": color_info_light, "margin": 5})),
22+
dbc.Col(html.Div("One of three columns", style={"backgroundColor": color_info_light, "padding": 10, "margin": 5})),
23+
dbc.Col(html.Div("One of three columns", style={"backgroundColor": color_info_light, "padding": 10, "margin": 5})),
24+
dbc.Col(html.Div("One of three columns", style={"backgroundColor": color_info_light, "padding": 10, "margin": 5})),
3525
], no_gutters=True),
3626

37-
html.Div(children=[
38-
dbc.Row(dbc.Col(html.Div("A single, half-width column, width=6"), width=6), style={"backgroundColor": color_primary_light, "margin": 5}),
39-
dbc.Row(dbc.Col(html.Div("An automatically sized column"), width="auto"), style={"backgroundColor": color_secondary_light, "margin": 5}),
40-
dbc.Row([
41-
dbc.Col(html.Div("One of four columns"), width=3, style={"backgroundColor": color_danger_light}),
42-
dbc.Col(html.Div("Two of four columns"), style={"backgroundColor": color_info_light}),
43-
dbc.Col(html.Div("One of four columns"), width=3, style={"backgroundColor": color_warning_light}),
44-
], style={"margin": 5}),
45-
]),
27+
dbc.Row(children=dbc.Col(html.Div("A single, half-width column, width=6", style={"backgroundColor": color_primary_light, "margin": 5}), width=6)),
28+
dbc.Row(children=dbc.Col(html.Div("An automatically sized column", style={"backgroundColor": color_secondary_light, "margin": 5}), width="auto")),
29+
dbc.Row(children=[
30+
dbc.Col(html.Div("One of 4 columns", style={"backgroundColor": color_info_light, "padding": 10, "margin": 5}), width=3),
31+
dbc.Col(html.Div("Two of 4 columns", style={"backgroundColor": color_info_light, "padding": 10, "margin": 5})),
32+
dbc.Col(html.Div("One of 4 columns", style={"backgroundColor": color_info_light, "padding": 10, "margin": 5}), width=3),
33+
], no_gutters=True),
4634

4735
html.Br(), html.Br(),
4836
# 显示文字 ========================================================================================
4937
html.Div(children=[
5038
html.H1(children="Hello Dash H1"),
5139
html.H2(children="Hello Dash H2"),
5240
html.H3(children="Hello Dash H3"),
53-
html.H4(children="Hello Dash H4"),
41+
html.H4(children=["This is a heading with a badge! ", dbc.Badge("New!", color="success")]),
5442
html.P(children=html.A(children="这是一个百度链接", href="http://baidu.com")),
5543
html.Label(children="这是一个Lable"),
56-
html.H4(["This is a heading with a badge! ", dbc.Badge("New!", color="success")]),
5744
dcc.Markdown(children=markdown_text),
5845
], style={"margin": 5}),
5946

@@ -64,6 +51,7 @@
6451
dbc.Alert("info!", color="info"),
6552
dbc.Alert("warning!", color="warning"),
6653
dbc.Alert("danger!", color="danger"),
54+
# dbc.Alert("link!", color="link"),
6755
], style={"margin": 5}),
6856

6957
html.Br(), html.Br(),
@@ -88,7 +76,7 @@
8876
dbc.CardText("and some text, and a footer!"),
8977
]),
9078
dbc.CardFooter("Footer"),
91-
], outline=True, color="primary")),
79+
], outline=True, color="danger")),
9280
]), style={"margin": 5}),
9381

9482
html.Br(), html.Br(),
@@ -99,8 +87,9 @@
9987
dbc.Button("Secondary", color="secondary", className="mr-2"),
10088
dbc.Button("Success", color="success", className="mr-3"),
10189
dbc.Button("Info", color="info", className="mr-4"),
102-
dbc.Button("Warning", color="warning", className="mr-5"),
103-
dbc.Button("Danger", color="danger", className="mr-1"),
90+
dbc.Button("Warning", color="warning", className="mr-3"),
91+
dbc.Button("Danger", color="danger", className="mr-2"),
92+
dbc.Button("outline", outline=True),
10493
], style={"margin": 5}),
10594

10695
html.Div(children=[
@@ -119,7 +108,7 @@
119108
is_in=True,
120109
appear=False,
121110
),
122-
], style={"margin": 5}),
111+
], style={"margin": 5, "marginTop": 20}),
123112

124113
html.Div(children=[
125114
html.P(["Click on the word ", html.Span("popover", id="popover-target")]),
@@ -143,10 +132,10 @@
143132
], style={"margin": 5}),
144133

145134
html.Div(children=dcc.ConfirmDialogProvider(
146-
dbc.Button("ConfirmDialogProvider", color="primary"),
147135
id="confirm",
136+
children=dbc.Button("ConfirmDialogProvider", color="primary"),
148137
message="Danger danger! Are you sure you want to continue?"
149-
), style={"margin": 5}),
138+
), style={"margin": 5, "marginBottom": 20}),
150139

151140
html.Div(children=dbc.Row(children=[
152141
dbc.Col(dbc.DropdownMenu(label="Menu-md", bs_size="md", children=drop_down_list)),
@@ -175,6 +164,7 @@
175164
dbc.Input(placeholder="A small input...", bs_size="sm", className="mb-3"),
176165
dbc.Input(placeholder="Valid input...", valid=True, className="mb-3"),
177166
dbc.Input(placeholder="Invalid input...", invalid=True, className="mb-3"),
167+
dbc.Input(value=10, type="number", className="mb-3"),
178168
dcc.Textarea(placeholder="Enter a value...", style={"width": "50%"}),
179169
], style={"margin": 5}),
180170

@@ -204,8 +194,8 @@
204194

205195
html.Br(), html.Br(),
206196
# 表单类 ========================================================================================
207-
dbc.Form(children=[email_input, password_input], style={"margin": 20, "backgroundColor": color_secondary_light}),
208-
dbc.Form(children=[email_input_row, password_input_row], style={"margin": 20, "backgroundColor": color_secondary_light}),
197+
dbc.Form(children=[email_input, password_input], style={"margin": 5, "backgroundColor": color_secondary_light}),
198+
dbc.Form(children=[email_input_row, password_input_row], style={"margin": 5, "backgroundColor": color_secondary_light}),
209199
dbc.Form(children=[
210200
dbc.FormGroup([
211201
dbc.Label("Email", className="mr-2"),
@@ -223,9 +213,10 @@
223213
dbc.Label("Date", className="mr-2"),
224214
dcc.DatePickerRange(id="date-picker-range", start_date=datetime.datetime(1997, 5, 3), end_date_placeholder_text="Select!")
225215
], className="mr-3"),
226-
], inline=True, style={"margin": 20, "backgroundColor": color_secondary_light}),
216+
], inline=True, style={"margin": 5, "backgroundColor": color_secondary_light}),
227217

228218
html.Br(), html.Br(),
219+
# 表单类 ========================================================================================
229220
html.Div(children=[
230221
dbc.Label("Slider", html_for="slider"),
231222
dcc.Slider(min=0, max=9, marks={i: "Label {}".format(i) if i == 1 else str(i) for i in range(1, 6)}, value=5),
@@ -235,10 +226,10 @@
235226
], style={"margin": 5}),
236227

237228
html.Div(children=[
229+
dbc.Label("Progress", html_for="progress"),
238230
dbc.Progress(id="progress", value=0, striped=True, animated=True),
239231
dcc.Interval(id="interval", interval=250, n_intervals=0),
240232
], style={"margin": 5}),
241-
242233
html.Div(children=[radioitems, checklist, radioitems_inline, checklist_inline], style={"margin": 5}),
243234

244235
html.Br(), html.Br(),
@@ -249,7 +240,7 @@
249240
dbc.ListGroupItem("External link", href="https://google.com"),
250241
dbc.ListGroupItem("Disabled link", href="https://google.com", disabled=True),
251242
dbc.ListGroupItem("Button", id="button-item", n_clicks=0, action=True),
252-
], style={"margin": 20}),
243+
], style={"margin": 5}),
253244

254245
dbc.ListGroup(children=[
255246
dbc.ListGroupItem("The primary item", color="primary"),
@@ -258,7 +249,7 @@
258249
dbc.ListGroupItem("A warning item", color="warning"),
259250
dbc.ListGroupItem("A dangerous item", color="danger"),
260251
dbc.ListGroupItem("An informative item", color="info"),
261-
], style={"margin": 20}),
252+
], style={"margin": 5}),
262253

263254
dbc.ListGroup(children=[
264255
dbc.ListGroupItem([
@@ -269,7 +260,7 @@
269260
dbc.ListGroupItemHeading("This item also has a heading"),
270261
dbc.ListGroupItemText("And some more text underneath too"),
271262
]),
272-
], style={"margin": 20}),
263+
], style={"margin": 5}),
273264

274265
html.Br(), html.Br(),
275266
# Tab实例 ========================================================================================
@@ -344,4 +335,4 @@ def switch_tab(at):
344335

345336

346337
if __name__ == "__main__":
347-
app.run_server(debug=True)
338+
app.run_server(host="0.0.0.0", debug=True)

0 commit comments

Comments
 (0)