Skip to content

Commit 823a4ec

Browse files
authored
Merge pull request #539 from facultyai/theme-explorer
Theme explorer
2 parents fe89f81 + 8575415 commit 823a4ec

33 files changed

+1173
-9
lines changed

docs/content/docs/themes.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,9 @@ The easiest way to link a local stylesheet is to place it in a folder named `ass
115115

116116
There are numerous free to use Bootstrap stylesheets available on the web. The `dash_bootstrap_components.themes` module contains CDN links for Bootstrap and all of the [Bootswatch themes][bootswatch-themes]. Bootstrap also maintains its own [themes website][bootstrap-themes] which lists a number of free and premium themes that you could incorporate into your apps.
117117

118-
To start with, we recommend experimenting with some of the Bootswatch themes available in the `dash_bootstrap_components.themes` module. The full list of available themes is [`CERULEAN`](https://bootswatch.com/cerulean/), [`COSMO`](https://bootswatch.com/cosmo/), [`CYBORG`](https://bootswatch.com/cyborg/), [`DARKLY`](https://bootswatch.com/darkly/), [`FLATLY`](https://bootswatch.com/flatly/), [`JOURNAL`](https://bootswatch.com/journal/), [`LITERA`](https://bootswatch.com/litera/), [`LUMEN`](https://bootswatch.com/lumen/), [`LUX`](https://bootswatch.com/lux/), [`MATERIA`](https://bootswatch.com/materia/), [`MINTY`](https://bootswatch.com/minty/), [`PULSE`](https://bootswatch.com/pulse/), [`SANDSTONE`](https://bootswatch.com/sandstone/), [`SIMPLEX`](https://bootswatch.com/simplex/), [`SKETCHY`](https://bootswatch.com/sketchy/), [`SLATE`](https://bootswatch.com/slate/), [`SOLAR`](https://bootswatch.com/solar/), [`SPACELAB`](https://bootswatch.com/spacelab/), [`SUPERHERO`](https://bootswatch.com/superhero/), [`UNITED`](https://bootswatch.com/united/), [`YETI`](https://bootswatch.com/yeti/)
118+
To start with, we recommend experimenting with some of the Bootswatch themes available in the `dash_bootstrap_components.themes` module. The full list of available themes is [`CERULEAN`](https://bootswatch.com/cerulean/), [`COSMO`](https://bootswatch.com/cosmo/), [`CYBORG`](https://bootswatch.com/cyborg/), [`DARKLY`](https://bootswatch.com/darkly/), [`FLATLY`](https://bootswatch.com/flatly/), [`JOURNAL`](https://bootswatch.com/journal/), [`LITERA`](https://bootswatch.com/litera/), [`LUMEN`](https://bootswatch.com/lumen/), [`LUX`](https://bootswatch.com/lux/), [`MATERIA`](https://bootswatch.com/materia/), [`MINTY`](https://bootswatch.com/minty/), [`PULSE`](https://bootswatch.com/pulse/), [`SANDSTONE`](https://bootswatch.com/sandstone/), [`SIMPLEX`](https://bootswatch.com/simplex/), [`SKETCHY`](https://bootswatch.com/sketchy/), [`SLATE`](https://bootswatch.com/slate/), [`SOLAR`](https://bootswatch.com/solar/), [`SPACELAB`](https://bootswatch.com/spacelab/), [`SUPERHERO`](https://bootswatch.com/superhero/), [`UNITED`](https://bootswatch.com/united/), [`YETI`](https://bootswatch.com/yeti/).
119+
120+
Check out the [theme explorer](/docs/themes/explorer/) for a live demo of dash-bootstrap-components using all of the different available themes.
119121

120122
[dash-docs-external]: https://dash.plotly.com/external-resources/
121123
[bootstrapcdn]: https://www.bootstrapcdn.com/

docs/demos/__init__.py

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import os
2+
3+
import dash
4+
import dash_bootstrap_components as dbc
5+
6+
from .theme_explorer import app as theme_explorer
7+
8+
SERVE_LOCALLY = os.getenv("DBC_DOCS_MODE", "production") == "dev"
9+
FA = "https://use.fontawesome.com/releases/v5.15.3/css/all.css"
10+
11+
SHEETS = [
12+
("bootstrap", dbc.themes.BOOTSTRAP),
13+
("cerulean", dbc.themes.CERULEAN),
14+
("cosmo", dbc.themes.COSMO),
15+
("cyborg", dbc.themes.CYBORG),
16+
("darkly", dbc.themes.DARKLY),
17+
("flatly", dbc.themes.FLATLY),
18+
("journal", dbc.themes.JOURNAL),
19+
("litera", dbc.themes.LITERA),
20+
("lumen", dbc.themes.LUMEN),
21+
("lux", dbc.themes.LUX),
22+
("materia", dbc.themes.MATERIA),
23+
("minty", dbc.themes.MINTY),
24+
("pulse", dbc.themes.PULSE),
25+
("sandstone", dbc.themes.SANDSTONE),
26+
("simplex", dbc.themes.SIMPLEX),
27+
("sketchy", dbc.themes.SKETCHY),
28+
("slate", dbc.themes.SLATE),
29+
("solar", dbc.themes.SOLAR),
30+
("spacelab", dbc.themes.SPACELAB),
31+
("superhero", dbc.themes.SUPERHERO),
32+
("united", dbc.themes.UNITED),
33+
("yeti", dbc.themes.YETI),
34+
]
35+
36+
37+
def register_apps():
38+
apps = {}
39+
40+
for name, sheet in SHEETS:
41+
new_theme_explorer = dash.Dash(
42+
external_stylesheets=[FA, sheet, "/static/loading.css"],
43+
requests_pathname_prefix=f"/docs/themes/explorer/{name}/",
44+
suppress_callback_exceptions=True,
45+
serve_locally=SERVE_LOCALLY,
46+
update_title=None,
47+
)
48+
49+
new_theme_explorer.title = f"Theme explorer - {name} - dbc docs"
50+
new_theme_explorer.layout = theme_explorer.layout
51+
new_theme_explorer.callback_map = theme_explorer.callback_map
52+
new_theme_explorer._callback_list = theme_explorer._callback_list
53+
apps[f"/docs/themes/explorer/{name}"] = new_theme_explorer
54+
55+
return apps
Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import dash
2+
import dash_bootstrap_components as dbc
3+
from dash.dependencies import Input, Output, State
4+
5+
from .alert import alerts
6+
from .badge import badges
7+
from .button import buttons
8+
from .card import cards
9+
from .collapse import collapse
10+
from .fade import fade
11+
from .form import form
12+
from .input import checklist_items, input_, input_group, radio_items
13+
from .jumbotron import jumbotron
14+
from .list_group import list_group
15+
from .modal import modal
16+
from .navbar import navbar
17+
from .popover import popover
18+
from .progress import progress
19+
from .spinner import spinner
20+
from .table import table
21+
from .tabs import tabs
22+
from .toast import toast
23+
from .tooltip import tooltip
24+
25+
FONT_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"
26+
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, FONT_AWESOME])
27+
28+
app.layout = dbc.Container(
29+
[
30+
alerts,
31+
badges,
32+
buttons,
33+
cards,
34+
collapse,
35+
fade,
36+
dbc.Row(
37+
[
38+
dbc.Col([form, input_group], xs=12, md=6),
39+
dbc.Col([input_], xs=12, md=6),
40+
]
41+
),
42+
dbc.Row(
43+
[
44+
dbc.Col([checklist_items], xs=12, md=6),
45+
dbc.Col([radio_items], xs=12, md=6),
46+
]
47+
),
48+
jumbotron,
49+
list_group,
50+
modal,
51+
navbar,
52+
popover,
53+
progress,
54+
spinner,
55+
table,
56+
tabs,
57+
toast,
58+
tooltip,
59+
],
60+
fluid=True,
61+
className="px-4",
62+
)
63+
64+
65+
@app.callback(
66+
Output("collapse", "is_open"),
67+
[Input("collapse-button", "n_clicks")],
68+
[State("collapse", "is_open")],
69+
)
70+
def toggle_collapse(n, is_open):
71+
if n:
72+
return not is_open
73+
return is_open
74+
75+
76+
@app.callback(
77+
Output("fade", "is_in"),
78+
[Input("fade-button", "n_clicks")],
79+
[State("fade", "is_in")],
80+
)
81+
def toggle_fade(n, is_in):
82+
if n:
83+
return not is_in
84+
return is_in
85+
86+
87+
@app.callback(
88+
Output("popover", "is_open"),
89+
[Input("popover-target", "n_clicks")],
90+
[State("popover", "is_open")],
91+
)
92+
def toggle_popover(n, is_open):
93+
if n:
94+
return not is_open
95+
return is_open
96+
97+
98+
@app.callback(
99+
Output("modal", "is_open"),
100+
[Input("button", "n_clicks")],
101+
[State("modal", "is_open")],
102+
)
103+
def toggle_modal(n, is_open):
104+
if n:
105+
return not is_open
106+
return is_open
107+
108+
109+
@app.callback(
110+
Output("auto-toast", "is_open"), [Input("auto-toast-toggle", "n_clicks")]
111+
)
112+
def open_toast(_):
113+
return True
114+
115+
116+
if __name__ == "__main__":
117+
app.run_server(debug=True)

docs/demos/theme_explorer/alert.py

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import dash_bootstrap_components as dbc
2+
import dash_html_components as html
3+
4+
from .util import make_subheading
5+
6+
alerts1 = dbc.Col(
7+
[
8+
dbc.Alert("This is a primary alert", color="primary"),
9+
dbc.Alert("This is a secondary alert", color="secondary"),
10+
dbc.Alert("This is a success alert! Well done!", color="success"),
11+
dbc.Alert("This is a warning alert... be careful...", color="warning"),
12+
],
13+
md=6,
14+
xs=12,
15+
)
16+
17+
alerts2 = dbc.Col(
18+
[
19+
dbc.Alert("This is a danger alert. Scary!", color="danger"),
20+
dbc.Alert("This is an info alert. Good to know!", color="info"),
21+
dbc.Alert("This is a light alert", color="light"),
22+
dbc.Alert("This is a dark alert", color="dark"),
23+
],
24+
md=6,
25+
xs=12,
26+
)
27+
28+
alerts = html.Div(
29+
[make_subheading("Alert", "alert"), dbc.Row([alerts1, alerts2])],
30+
className="mb-4",
31+
)

docs/demos/theme_explorer/badge.py

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import dash_bootstrap_components as dbc
2+
import dash_html_components as html
3+
4+
from .util import make_subheading
5+
6+
badge = html.Div(
7+
[
8+
dbc.Badge("Primary", color="primary", className="mr-1"),
9+
dbc.Badge("Secondary", color="secondary", className="mr-1"),
10+
dbc.Badge("Success", color="success", className="mr-1"),
11+
dbc.Badge("Warning", color="warning", className="mr-1"),
12+
dbc.Badge("Danger", color="danger", className="mr-1"),
13+
dbc.Badge("Info", color="info", className="mr-1"),
14+
dbc.Badge("Light", color="light", className="mr-1"),
15+
dbc.Badge("Dark", color="dark"),
16+
],
17+
className="mb-2",
18+
)
19+
20+
badge_pills = html.Div(
21+
[
22+
dbc.Badge("Primary", color="primary", className="mr-1", pill=True),
23+
dbc.Badge("Secondary", color="secondary", className="mr-1", pill=True),
24+
dbc.Badge("Success", color="success", className="mr-1", pill=True),
25+
dbc.Badge("Warning", color="warning", className="mr-1", pill=True),
26+
dbc.Badge("Danger", color="danger", className="mr-1", pill=True),
27+
dbc.Badge("Info", color="info", className="mr-1", pill=True),
28+
dbc.Badge("Light", color="light", className="mr-1", pill=True),
29+
dbc.Badge("Dark", color="dark", pill=True),
30+
],
31+
)
32+
33+
badges = html.Div(
34+
[make_subheading("Badge", "badge"), badge, badge_pills],
35+
className="mb-4",
36+
)
Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import dash_bootstrap_components as dbc
2+
import dash_html_components as html
3+
4+
from .util import make_subheading
5+
6+
buttons1 = dbc.Col(
7+
[
8+
make_subheading("Button", "button"),
9+
html.Div(
10+
[
11+
dbc.Button("Primary", color="primary", className="mr-1 mt-1"),
12+
dbc.Button(
13+
"Secondary", color="secondary", className="mr-1 mt-1"
14+
),
15+
dbc.Button("Success", color="success", className="mr-1 mt-1"),
16+
dbc.Button("Warning", color="warning", className="mr-1 mt-1"),
17+
dbc.Button("Danger", color="danger", className="mr-1 mt-1"),
18+
dbc.Button("Info", color="info", className="mr-1 mt-1"),
19+
],
20+
className="mb-2",
21+
),
22+
html.Div(
23+
[
24+
dbc.Button(
25+
"Primary",
26+
outline=True,
27+
color="primary",
28+
className="mr-1 mt-1",
29+
),
30+
dbc.Button(
31+
"Secondary",
32+
outline=True,
33+
color="secondary",
34+
className="mr-1 mt-1",
35+
),
36+
dbc.Button(
37+
"Success",
38+
outline=True,
39+
color="success",
40+
className="mr-1 mt-1",
41+
),
42+
dbc.Button(
43+
"Warning",
44+
outline=True,
45+
color="warning",
46+
className="mr-1 mt-1",
47+
),
48+
dbc.Button(
49+
"Danger",
50+
outline=True,
51+
color="danger",
52+
className="mr-1 mt-1",
53+
),
54+
dbc.Button(
55+
"Info", outline=True, color="info", className="mr-1 mt-1"
56+
),
57+
],
58+
className="mb-2",
59+
),
60+
html.Div(
61+
[
62+
dbc.Button("Regular", color="primary", className="mr-1 mt-1"),
63+
dbc.Button(
64+
"Active",
65+
color="primary",
66+
active=True,
67+
className="mr-1 mt-1",
68+
),
69+
dbc.Button(
70+
"Disabled",
71+
color="primary",
72+
disabled=True,
73+
className="mr-1 mt-1",
74+
),
75+
],
76+
className="mb-2",
77+
),
78+
html.Div(
79+
[
80+
dbc.Button("Large button", size="lg", className="mr-1 mt-1"),
81+
dbc.Button("Regular button", className="mr-1 mt-1"),
82+
dbc.Button("Small button", size="sm", className="mr-1 mt-1"),
83+
],
84+
className="mb-2",
85+
),
86+
],
87+
lg=6,
88+
xs=12,
89+
)
90+
91+
buttons2 = dbc.Col(
92+
[
93+
make_subheading("ButtonGroup", "buttongroups"),
94+
html.Div(
95+
dbc.ButtonGroup(
96+
[
97+
dbc.Button("Success", color="success"),
98+
dbc.Button("Warning", color="warning"),
99+
dbc.Button("Danger", color="danger"),
100+
]
101+
),
102+
className="mb-2",
103+
),
104+
html.Div(
105+
dbc.ButtonGroup(
106+
[
107+
dbc.Button("First"),
108+
dbc.Button("Second"),
109+
dbc.DropdownMenu(
110+
[
111+
dbc.DropdownMenuItem("Item 1"),
112+
dbc.DropdownMenuItem("Item 2"),
113+
],
114+
label="Dropdown",
115+
group=True,
116+
),
117+
],
118+
vertical=True,
119+
),
120+
className="mb-2",
121+
),
122+
],
123+
lg=6,
124+
xs=12,
125+
)
126+
127+
buttons = dbc.Row([buttons1, buttons2], className="mb-4")

0 commit comments

Comments
 (0)