diff --git a/Dash/components.py b/Dash/components.py index 844a2fc..d5f3c5d 100644 --- a/Dash/components.py +++ b/Dash/components.py @@ -7,7 +7,6 @@ import dash_core_components as dcc import dash_html_components as html import dash_bootstrap_components as dbc -from Dash.config import * # --------------------------------------------------------------------------------------- drop_down_list = [ @@ -55,7 +54,7 @@ {"label": "Option 1", "value": 1}, {"label": "Option 2", "value": 2}, ], value=1) -], style={"backgroundColor": color_success_light}) +], className="bg-light") checklist = dbc.FormGroup(children=[ dbc.Label("Choose a bunch"), @@ -63,7 +62,7 @@ {"label": "Option 1", "value": 1}, {"label": "Option 2", "value": 2}, ], values=[1, 2]), -], style={"backgroundColor": color_info_light}) +], className="bg-light") # --------------------------------------------------------------------------------------- @@ -73,7 +72,7 @@ {"label": "Option 1", "value": 1}, {"label": "Option 2", "value": 2}, ], value=1, inline=True), -], style={"backgroundColor": color_success_light}) +], className="bg-light") checklist_inline = dbc.FormGroup(children=[ dbc.Label("Choose a bunch"), @@ -81,7 +80,7 @@ {"label": "Option 1", "value": 1}, {"label": "Option 2", "value": 2}, ], values=[1, 2], inline=True), -], style={"backgroundColor": color_info_light}) +], className="bg-light") # --------------------------------------------------------------------------------------- diff --git a/Dash/config.py b/Dash/config.py index 2192fb2..17299ce 100644 --- a/Dash/config.py +++ b/Dash/config.py @@ -6,14 +6,6 @@ import pandas as pd -# 定义颜色值 -color_primary, color_primary_light = "#2d7df6", "#d0e4fc" -color_secondary, color_secondary_light = "#6e757c", "#e2e3e5" -color_success, color_success_light = "#53a451", "#d9ecdb" -color_info, color_info_light = "#49a0b5", "#d6ebf0" -color_warning, color_warning_light = "#f6c244", "#fdf3d1" -color_danger, color_danger_light = "#cb444a", "#f3d8da" - # 有用的数据 df = pd.read_csv("Dash/data.csv") markdown_text = """ @@ -25,3 +17,59 @@ Check out their [60 Second Markdown Tutorial](http://commonmark.org/help/) if this is your first introduction to Markdown! """ + +# https://getbootstrap.com/docs/4.0/utilities +""" +ALL: + sm / md / lg / xl + top / right / bottom / left + primary / secondary / success / danger / warning / info + +Borders: + border, border-top, border-primary, + border-light, border-dark, border-white + rounded, rounded-top, rounded-circle, rounded-0 + +Color: + Text: text-primary, text-light, text-dark, text-white, text-muted + Backgroud: bg-primary, bg-light, bg-dark, bg-white, bg-gradient-primary, bg-gradient-light, bg-gradient-dark + +Display: + d-[none/inline/inline-block/block/table/table-cell/table-row/flex/inline-flex] + d-[sm/md/lg/xl]-[none/inline...] + +Flex: + Display: d-flex, d-inline-flex + Direction: flex-row, flex-row-reverse, flex-column, flex-column-reverse + Justify content: justify-content-[start/end/center/between/around] + Align items: align-items-[start/end/center/baseline/stretch] + Align self: align-self-[start/end/center/baseline/stretch] + Align content: align-content-[start/end/center/around/stretch] + Wrap: flex-wrap, flex-nowrap + +Float: + float-left, float-right, float-none, float-sm-left + +Position: + position-static, position-relative, position-absolute, position-fixed, position-sticky + +Sizing: + w-25, w-50, w-75, w-100, mw-50, mw-100 + h-25, h-50, h-75, h-100, mh-50, mh-100 + +Spacing: + Margin: m-2, mt-1, mr-2, mb-3, ml-4, mx-3, my-2, m-auto + Padding: p-2, pt-1, pr-2, pb-3, pl-4, px-3, py-2, p-auto + +Text: + text-primary, text-light, text-dark, text-white, text-muted + text-left, text-center, text-right, text-sm-left, text-lg-left + text-lowercase, text-uppercase, text-capitalize + font-weight-[bold/normal/light], font-italic + +Vertical alignment: + align-baseline, align-top, align-middle, align-bottom, align-text-top, align-text-bottom + +Visibility: + visible, invisible +""" diff --git a/Dash/demo.py b/Dash/demo.py index f211147..e0b2cd4 100644 --- a/Dash/demo.py +++ b/Dash/demo.py @@ -8,7 +8,7 @@ import datetime from dash.dependencies import Output, Input, State from Dash.components import * - +from Dash.config import * # 创建应用 app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) @@ -17,20 +17,19 @@ # 创建布局 app.layout = html.Div(children=[ # DIV布局 ======================================================================================== - dbc.Row(children=dbc.Col(html.Div("单独的DIV", style={"backgroundColor": color_primary_light, "height": 100, "padding": 10, "margin": 5}))), + dbc.Row(children=dbc.Col(html.Div("单独的DIV", className="border border-primary bg-light rounded p-2 m-2"))), dbc.Row(children=[ - dbc.Col(html.Div("One of three columns", style={"backgroundColor": color_info_light, "padding": 10, "margin": 5})), - dbc.Col(html.Div("One of three columns", style={"backgroundColor": color_info_light, "padding": 10, "margin": 5})), - dbc.Col(html.Div("One of three columns", style={"backgroundColor": color_info_light, "padding": 10, "margin": 5})), + dbc.Col(html.Div("One of three columns", className="bg-secondary p-2 m-2")), + dbc.Col(html.Div("One of three columns", className="bg-secondary p-2 m-2")), + dbc.Col(html.Div("One of three columns", className="bg-secondary p-2 m-2")), ], no_gutters=True), - - dbc.Row(children=dbc.Col(html.Div("A single, half-width column, width=6", style={"backgroundColor": color_primary_light, "margin": 5}), width=6)), - dbc.Row(children=dbc.Col(html.Div("An automatically sized column", style={"backgroundColor": color_secondary_light, "margin": 5}), width="auto")), dbc.Row(children=[ - dbc.Col(html.Div("One of 4 columns", style={"backgroundColor": color_info_light, "padding": 10, "margin": 5}), width=3), - dbc.Col(html.Div("Two of 4 columns", style={"backgroundColor": color_info_light, "padding": 10, "margin": 5})), - dbc.Col(html.Div("One of 4 columns", style={"backgroundColor": color_info_light, "padding": 10, "margin": 5}), width=3), + dbc.Col(html.Div("One of 4 columns", className="bg-info p-2 m-2"), width=3), + dbc.Col(html.Div("Two of 4 columns", className="bg-info p-2 m-2")), + dbc.Col(html.Div("One of 4 columns", className="bg-info p-2 m-2"), width=3), ], no_gutters=True), + dbc.Row(children=dbc.Col(html.Div("A single, half-width column, width=6", className="bg-secondary p-2 m-2"), width=6)), + dbc.Row(children=dbc.Col(html.Div("An automatically sized column", className="bg-secondary p-2 m-2"), width="auto")), html.Br(), html.Br(), # 显示文字 ======================================================================================== @@ -40,9 +39,9 @@ html.H3(children="Hello Dash H3"), html.H4(children=["This is a heading with a badge! ", dbc.Badge("New!", color="success")]), html.P(children=html.A(children="这是一个百度链接", href="http://baidu.com")), - html.Label(children="这是一个Lable"), + html.Label(children="这是一个Lable", className="text-info"), dcc.Markdown(children=markdown_text), - ], style={"margin": 5}), + ], className="p-2 m-2"), html.Div(children=[ dbc.Alert("primary!", color="primary"), @@ -51,8 +50,7 @@ dbc.Alert("info!", color="info"), dbc.Alert("warning!", color="warning"), dbc.Alert("danger!", color="danger"), - # dbc.Alert("link!", color="link"), - ], style={"margin": 5}), + ], className="p-2 m-2"), html.Br(), html.Br(), # 卡片类 ======================================================================================== @@ -77,20 +75,21 @@ ]), dbc.CardFooter("Footer"), ], outline=True, color="danger")), - ]), style={"margin": 5}), + ]), className="p-2 m-2"), html.Br(), html.Br(), # 按钮触发类 ======================================================================================== - # className: mr-1, m代表margin，r代表right，1代表距离，一般用于一行中元素的排列(mt, mb, ml, mr) html.Div(children=[ - dbc.Button("Primary", color="primary", className="mr-1"), + dbc.Button("Primary", color="primary", className="mr-2"), dbc.Button("Secondary", color="secondary", className="mr-2"), - dbc.Button("Success", color="success", className="mr-3"), - dbc.Button("Info", color="info", className="mr-4"), - dbc.Button("Warning", color="warning", className="mr-3"), + dbc.Button("Success", color="success", className="mr-2"), + dbc.Button("Info", color="info", className="mr-2"), + dbc.Button("Warning", color="warning", className="mr-2"), dbc.Button("Danger", color="danger", className="mr-2"), - dbc.Button("outline", outline=True), - ], style={"margin": 5}), + dbc.Button("outline", size="sm", outline=True, className="mr-2"), + dbc.Button("outline", size="md", outline=True, className="mr-2"), + dbc.Button("outline", size="lg", outline=True, className="mr-2"), + ], className="p-2 m-2"), html.Div(children=[ dbc.Button("Open collapse", id="collapse-button"), @@ -98,52 +97,48 @@ dbc.Card(dbc.CardBody("This content is hidden in the collapse")), id="collapse" ) - ], style={"margin": 5, "marginTop": 20}), + ], className="p-2 m-2"), html.Div(children=[ dbc.Button("Toggle fade", id="fade-button"), dbc.Fade( dbc.Card(dbc.CardBody(dbc.CardText("This content fades in and out"))), - id="fade", - is_in=True, - appear=False, + id="fade", is_in=True, appear=False, ), - ], style={"margin": 5, "marginTop": 20}), + ], className="p-2 m-2"), html.Div(children=[ - html.P(["Click on the word ", html.Span("popover", id="popover-target")]), + html.P(["Click on the word ", html.Span("popover", id="popover-target", className="text-info")]), dbc.Popover([ dbc.PopoverHeader("Popover header"), dbc.PopoverBody("Popover body"), ], id="popover", is_open=False, target="popover-target"), - ], style={"margin": 5, "backgroundColor": color_secondary_light}), + ], className="p-2 m-2"), html.Div(children=[ html.P([ - "I wonder what ", - html.Span("floccinaucinihilipilification", id="tooltip-target", style={"color": color_info}), - " means?", + "I wonder what ", html.Span("floccinaucinihilipilification", id="tooltip-target", className="text-info"), " means?", ]), dbc.Tooltip( "Noun: rare, the action or habit of estimating something as worthless.", target="tooltip-target", placement="auto", # top, left, bottom, right ), - ], style={"margin": 5}), + ], className="p-2 m-2"), html.Div(children=dcc.ConfirmDialogProvider( id="confirm", children=dbc.Button("ConfirmDialogProvider", color="primary"), message="Danger danger! Are you sure you want to continue?" - ), style={"margin": 5, "marginBottom": 20}), + ), className="p-2 m-2"), html.Div(children=dbc.Row(children=[ dbc.Col(dbc.DropdownMenu(label="Menu-md", bs_size="md", children=drop_down_list)), dbc.Col(dbc.DropdownMenu(label="Menu-lg", bs_size="lg", children=drop_down_list)), dbc.Col(dbc.DropdownMenu(label="Menu-sm", bs_size="sm", children=drop_down_list)), - dbc.Col(dbc.DropdownMenu(label="Menu-down", bs_size="md", direction="down", children=drop_down_list)), - dbc.Col(dbc.DropdownMenu(label="Menu-left", bs_size="md", direction="left", children=drop_down_list)), - dbc.Col(dbc.DropdownMenu(label="Menu-right", bs_size="md", direction="right", children=drop_down_list)), + dbc.Col(dbc.DropdownMenu(label="Menu-down", direction="down", children=drop_down_list)), + dbc.Col(dbc.DropdownMenu(label="Menu-left", direction="left", children=drop_down_list)), + dbc.Col(dbc.DropdownMenu(label="Menu-right", direction="right", children=drop_down_list)), dbc.Col(dcc.Dropdown(options=[ {"label": "New York City", "value": "NYC"}, {"label": u"Montréal", "value": "MTL"}, @@ -154,48 +149,46 @@ {"label": u"Montréal", "value": "MTL"}, {"label": "San Francisco", "value": "SF"} ], value="MTL", multi=True), width=3) - ], no_gutters=True), style={"margin": 5, "backgroundColor": color_secondary_light}), + ], no_gutters=True), className="p-2 m-2"), html.Br(), html.Br(), # 输入类 ======================================================================================== html.Div(children=[ - dbc.Input(placeholder="A large input...", bs_size="lg", className="mb-3"), - dbc.Input(placeholder="A medium input...", className="mb-3"), - dbc.Input(placeholder="A small input...", bs_size="sm", className="mb-3"), - dbc.Input(placeholder="Valid input...", valid=True, className="mb-3"), - dbc.Input(placeholder="Invalid input...", invalid=True, className="mb-3"), - dbc.Input(value=10, type="number", className="mb-3"), - dcc.Textarea(placeholder="Enter a value...", style={"width": "50%"}), - ], style={"margin": 5}), + dbc.Input(placeholder="A medium(large, small) input...", bs_size="md", className="mb-2"), + dbc.Input(placeholder="Valid input...", valid=True, className="mb-2"), + dbc.Input(placeholder="Invalid input...", invalid=True, className="mb-2"), + dbc.Input(value=10, type="number", className="mb-2"), + dcc.Textarea(placeholder="Enter a value...", className="w-75"), + ], className="p-2 m-2"), html.Div(children=[ dbc.InputGroup([ dbc.InputGroupAddon("@", addon_type="prepend"), dbc.Input(placeholder="username, size=lg"), - ], size="lg", className="mb-3"), + ], size="lg", className="mb-2"), dbc.InputGroup([ dbc.Input(placeholder="username, size=md"), dbc.InputGroupAddon("@example.com", addon_type="append"), - ], className="mb-3"), + ], className="mb-2"), dbc.InputGroup([ dbc.InputGroupAddon("$", addon_type="prepend"), dbc.Input(placeholder="Amount, size=sm", type="number"), dbc.InputGroupAddon(".00", addon_type="append"), - ], size="sm", className="mb-3"), + ], size="sm", className="mb-2"), dbc.InputGroup([ dbc.InputGroupAddon(dbc.Button("Random name", id="input-group-button"), addon_type="prepend"), dbc.Input(id="input-group-button-input", placeholder="name"), - ], className="mb-3"), + ], className="mb-2"), dbc.InputGroup([ dbc.DropdownMenu(drop_down_list, label="Generate", addon_type="prepend"), dbc.Input(id="input-group-dropdown-input", placeholder="name"), ]), - ], style={"margin": 5}), + ], className="p-2 m-2"), html.Br(), html.Br(), # 表单类 ======================================================================================== - dbc.Form(children=[email_input, password_input], style={"margin": 5, "backgroundColor": color_secondary_light}), - dbc.Form(children=[email_input_row, password_input_row], style={"margin": 5, "backgroundColor": color_secondary_light}), + dbc.Form(children=[email_input, password_input], className="p-2 m-2 bg-light"), + dbc.Form(children=[email_input_row, password_input_row], className="p-2 m-2 bg-light"), dbc.Form(children=[ dbc.FormGroup([ dbc.Label("Email", className="mr-2"), @@ -213,7 +206,7 @@ dbc.Label("Date", className="mr-2"), dcc.DatePickerRange(id="date-picker-range", start_date=datetime.datetime(1997, 5, 3), end_date_placeholder_text="Select!") ], className="mr-3"), - ], inline=True, style={"margin": 5, "backgroundColor": color_secondary_light}), + ], inline=True, className="p-2 m-2 bg-light"), html.Br(), html.Br(), # 表单类 ======================================================================================== @@ -223,14 +216,16 @@ html.Br(), dbc.Label("RangeSlider", html_for="range-slider"), dcc.RangeSlider(count=1, min=-5, max=10, step=0.5, value=[-3, 7]) - ], style={"margin": 5}), + ], className="p-2 m-2"), html.Div(children=[ dbc.Label("Progress", html_for="progress"), dbc.Progress(id="progress", value=0, striped=True, animated=True), dcc.Interval(id="interval", interval=250, n_intervals=0), - ], style={"margin": 5}), - html.Div(children=[radioitems, checklist, radioitems_inline, checklist_inline], style={"margin": 5}), + ], className="p-2 m-2"), + html.Div(children=[ + radioitems, checklist, radioitems_inline, checklist_inline + ], className="p-2 m-2"), html.Br(), html.Br(), # 展示类 ======================================================================================== @@ -240,7 +235,7 @@ dbc.ListGroupItem("External link", href="https://google.com"), dbc.ListGroupItem("Disabled link", href="https://google.com", disabled=True), dbc.ListGroupItem("Button", id="button-item", n_clicks=0, action=True), - ], style={"margin": 5}), + ], className="p-2 m-2"), dbc.ListGroup(children=[ dbc.ListGroupItem("The primary item", color="primary"), @@ -249,7 +244,7 @@ dbc.ListGroupItem("A warning item", color="warning"), dbc.ListGroupItem("A dangerous item", color="danger"), dbc.ListGroupItem("An informative item", color="info"), - ], style={"margin": 5}), + ], className="p-2 m-2"), dbc.ListGroup(children=[ dbc.ListGroupItem([ @@ -260,14 +255,14 @@ dbc.ListGroupItemHeading("This item also has a heading"), dbc.ListGroupItemText("And some more text underneath too"), ]), - ], style={"margin": 5}), + ], className="p-2 m-2"), html.Br(), html.Br(), # Tab实例 ======================================================================================== html.Div(children=dbc.Tabs([ dbc.Tab(tab1_content, label="Tab 1"), dbc.Tab(tab2_content, label="Tab 2"), - ]), style={"margin": 5, "backgroundColor": color_secondary_light}), + ]), className="p-2 m-2"), html.Div(children=[ dbc.Tabs([ @@ -275,11 +270,11 @@ dbc.Tab(label="Tab 2", tab_id="tab-2"), ], id="tabs", active_tab="tab-1"), html.Div(id="content") - ], style={"margin": 5, "backgroundColor": color_secondary_light}), + ], className="p-2 m-2"), html.Br(), html.Br(), # 表格Table ======================================================================================== - html.Div(children=generate_table(df), style={"margin": 5}), + html.Div(children=generate_table(df), className="p-2 m-2"), ])