Theme explorer

docs/content/docs/themes.md

@@ -115,7 +115,9 @@ The easiest way to link a local stylesheet is to place it in a folder named `ass
 
 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.
 
-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/)
+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/).
+
+Check out the [theme explorer](/docs/themes/explorer/) for a live demo of dash-bootstrap-components using all of the different available themes.
 
 [dash-docs-external]: https://dash.plotly.com/external-resources/
 [bootstrapcdn]: https://www.bootstrapcdn.com/

docs/demos/__init__.py

@@ -0,0 +1,55 @@
+import os
+
+import dash
+import dash_bootstrap_components as dbc
+
+from .theme_explorer import app as theme_explorer
+
+SERVE_LOCALLY = os.getenv("DBC_DOCS_MODE", "production") == "dev"
+FA = "https://use.fontawesome.com/releases/v5.15.3/css/all.css"
+
+SHEETS = [
+    ("bootstrap", dbc.themes.BOOTSTRAP),
+    ("cerulean", dbc.themes.CERULEAN),
+    ("cosmo", dbc.themes.COSMO),
+    ("cyborg", dbc.themes.CYBORG),
+    ("darkly", dbc.themes.DARKLY),
+    ("flatly", dbc.themes.FLATLY),
+    ("journal", dbc.themes.JOURNAL),
+    ("litera", dbc.themes.LITERA),
+    ("lumen", dbc.themes.LUMEN),
+    ("lux", dbc.themes.LUX),
+    ("materia", dbc.themes.MATERIA),
+    ("minty", dbc.themes.MINTY),
+    ("pulse", dbc.themes.PULSE),
+    ("sandstone", dbc.themes.SANDSTONE),
+    ("simplex", dbc.themes.SIMPLEX),
+    ("sketchy", dbc.themes.SKETCHY),
+    ("slate", dbc.themes.SLATE),
+    ("solar", dbc.themes.SOLAR),
+    ("spacelab", dbc.themes.SPACELAB),
+    ("superhero", dbc.themes.SUPERHERO),
+    ("united", dbc.themes.UNITED),
+    ("yeti", dbc.themes.YETI),
+]
+
+
+def register_apps():
+    apps = {}
+
+    for name, sheet in SHEETS:
+        new_theme_explorer = dash.Dash(
+            external_stylesheets=[FA, sheet, "/static/loading.css"],
+            requests_pathname_prefix=f"/docs/themes/explorer/{name}/",
+            suppress_callback_exceptions=True,
+            serve_locally=SERVE_LOCALLY,
+            update_title=None,
+        )
+
+        new_theme_explorer.title = f"Theme explorer - {name} - dbc docs"
+        new_theme_explorer.layout = theme_explorer.layout
+        new_theme_explorer.callback_map = theme_explorer.callback_map
+        new_theme_explorer._callback_list = theme_explorer._callback_list
+        apps[f"/docs/themes/explorer/{name}"] = new_theme_explorer
+
+    return apps

docs/demos/theme_explorer/__init__.py

@@ -0,0 +1,117 @@
+import dash
+import dash_bootstrap_components as dbc
+from dash.dependencies import Input, Output, State
+
+from .alert import alerts
+from .badge import badges
+from .button import buttons
+from .card import cards
+from .collapse import collapse
+from .fade import fade
+from .form import form
+from .input import checklist_items, input_, input_group, radio_items
+from .jumbotron import jumbotron
+from .list_group import list_group
+from .modal import modal
+from .navbar import navbar
+from .popover import popover
+from .progress import progress
+from .spinner import spinner
+from .table import table
+from .tabs import tabs
+from .toast import toast
+from .tooltip import tooltip
+
+FONT_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"
+app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, FONT_AWESOME])
+
+app.layout = dbc.Container(
+    [
+        alerts,
+        badges,
+        buttons,
+        cards,
+        collapse,
+        fade,
+        dbc.Row(
+            [
+                dbc.Col([form, input_group], xs=12, md=6),
+                dbc.Col([input_], xs=12, md=6),
+            ]
+        ),
+        dbc.Row(
+            [
+                dbc.Col([checklist_items], xs=12, md=6),
+                dbc.Col([radio_items], xs=12, md=6),
+            ]
+        ),
+        jumbotron,
+        list_group,
+        modal,
+        navbar,
+        popover,
+        progress,
+        spinner,
+        table,
+        tabs,
+        toast,
+        tooltip,
+    ],
+    fluid=True,
+    className="px-4",
+)
+
+
+@app.callback(
+    Output("collapse", "is_open"),
+    [Input("collapse-button", "n_clicks")],
+    [State("collapse", "is_open")],
+)
+def toggle_collapse(n, is_open):
+    if n:
+        return not is_open
+    return is_open
+
+
+@app.callback(
+    Output("fade", "is_in"),
+    [Input("fade-button", "n_clicks")],
+    [State("fade", "is_in")],
+)
+def toggle_fade(n, is_in):
+    if n:
+        return not is_in
+    return is_in
+
+
+@app.callback(
+    Output("popover", "is_open"),
+    [Input("popover-target", "n_clicks")],
+    [State("popover", "is_open")],
+)
+def toggle_popover(n, is_open):
+    if n:
+        return not is_open
+    return is_open
+
+
+@app.callback(
+    Output("modal", "is_open"),
+    [Input("button", "n_clicks")],
+    [State("modal", "is_open")],
+)
+def toggle_modal(n, is_open):
+    if n:
+        return not is_open
+    return is_open
+
+
+@app.callback(
+    Output("auto-toast", "is_open"), [Input("auto-toast-toggle", "n_clicks")]
+)
+def open_toast(_):
+    return True
+
+
+if __name__ == "__main__":
+    app.run_server(debug=True)

docs/demos/theme_explorer/alert.py

@@ -0,0 +1,31 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+from .util import make_subheading
+
+alerts1 = dbc.Col(
+    [
+        dbc.Alert("This is a primary alert", color="primary"),
+        dbc.Alert("This is a secondary alert", color="secondary"),
+        dbc.Alert("This is a success alert! Well done!", color="success"),
+        dbc.Alert("This is a warning alert... be careful...", color="warning"),
+    ],
+    md=6,
+    xs=12,
+)
+
+alerts2 = dbc.Col(
+    [
+        dbc.Alert("This is a danger alert. Scary!", color="danger"),
+        dbc.Alert("This is an info alert. Good to know!", color="info"),
+        dbc.Alert("This is a light alert", color="light"),
+        dbc.Alert("This is a dark alert", color="dark"),
+    ],
+    md=6,
+    xs=12,
+)
+
+alerts = html.Div(
+    [make_subheading("Alert", "alert"), dbc.Row([alerts1, alerts2])],
+    className="mb-4",
+)

docs/demos/theme_explorer/badge.py

@@ -0,0 +1,36 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+from .util import make_subheading
+
+badge = html.Div(
+    [
+        dbc.Badge("Primary", color="primary", className="mr-1"),
+        dbc.Badge("Secondary", color="secondary", className="mr-1"),
+        dbc.Badge("Success", color="success", className="mr-1"),
+        dbc.Badge("Warning", color="warning", className="mr-1"),
+        dbc.Badge("Danger", color="danger", className="mr-1"),
+        dbc.Badge("Info", color="info", className="mr-1"),
+        dbc.Badge("Light", color="light", className="mr-1"),
+        dbc.Badge("Dark", color="dark"),
+    ],
+    className="mb-2",
+)
+
+badge_pills = html.Div(
+    [
+        dbc.Badge("Primary", color="primary", className="mr-1", pill=True),
+        dbc.Badge("Secondary", color="secondary", className="mr-1", pill=True),
+        dbc.Badge("Success", color="success", className="mr-1", pill=True),
+        dbc.Badge("Warning", color="warning", className="mr-1", pill=True),
+        dbc.Badge("Danger", color="danger", className="mr-1", pill=True),
+        dbc.Badge("Info", color="info", className="mr-1", pill=True),
+        dbc.Badge("Light", color="light", className="mr-1", pill=True),
+        dbc.Badge("Dark", color="dark", pill=True),
+    ],
+)
+
+badges = html.Div(
+    [make_subheading("Badge", "badge"), badge, badge_pills],
+    className="mb-4",
+)

docs/demos/theme_explorer/button.py

@@ -0,0 +1,127 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+from .util import make_subheading
+
+buttons1 = dbc.Col(
+    [
+        make_subheading("Button", "button"),
+        html.Div(
+            [
+                dbc.Button("Primary", color="primary", className="mr-1 mt-1"),
+                dbc.Button(
+                    "Secondary", color="secondary", className="mr-1 mt-1"
+                ),
+                dbc.Button("Success", color="success", className="mr-1 mt-1"),
+                dbc.Button("Warning", color="warning", className="mr-1 mt-1"),
+                dbc.Button("Danger", color="danger", className="mr-1 mt-1"),
+                dbc.Button("Info", color="info", className="mr-1 mt-1"),
+            ],
+            className="mb-2",
+        ),
+        html.Div(
+            [
+                dbc.Button(
+                    "Primary",
+                    outline=True,
+                    color="primary",
+                    className="mr-1 mt-1",
+                ),
+                dbc.Button(
+                    "Secondary",
+                    outline=True,
+                    color="secondary",
+                    className="mr-1 mt-1",
+                ),
+                dbc.Button(
+                    "Success",
+                    outline=True,
+                    color="success",
+                    className="mr-1 mt-1",
+                ),
+                dbc.Button(
+                    "Warning",
+                    outline=True,
+                    color="warning",
+                    className="mr-1 mt-1",
+                ),
+                dbc.Button(
+                    "Danger",
+                    outline=True,
+                    color="danger",
+                    className="mr-1 mt-1",
+                ),
+                dbc.Button(
+                    "Info", outline=True, color="info", className="mr-1 mt-1"
+                ),
+            ],
+            className="mb-2",
+        ),
+        html.Div(
+            [
+                dbc.Button("Regular", color="primary", className="mr-1 mt-1"),
+                dbc.Button(
+                    "Active",
+                    color="primary",
+                    active=True,
+                    className="mr-1 mt-1",
+                ),
+                dbc.Button(
+                    "Disabled",
+                    color="primary",
+                    disabled=True,
+                    className="mr-1 mt-1",
+                ),
+            ],
+            className="mb-2",
+        ),
+        html.Div(
+            [
+                dbc.Button("Large button", size="lg", className="mr-1 mt-1"),
+                dbc.Button("Regular button", className="mr-1 mt-1"),
+                dbc.Button("Small button", size="sm", className="mr-1 mt-1"),
+            ],
+            className="mb-2",
+        ),
+    ],
+    lg=6,
+    xs=12,
+)
+
+buttons2 = dbc.Col(
+    [
+        make_subheading("ButtonGroup", "buttongroups"),
+        html.Div(
+            dbc.ButtonGroup(
+                [
+                    dbc.Button("Success", color="success"),
+                    dbc.Button("Warning", color="warning"),
+                    dbc.Button("Danger", color="danger"),
+                ]
+            ),
+            className="mb-2",
+        ),
+        html.Div(
+            dbc.ButtonGroup(
+                [
+                    dbc.Button("First"),
+                    dbc.Button("Second"),
+                    dbc.DropdownMenu(
+                        [
+                            dbc.DropdownMenuItem("Item 1"),
+                            dbc.DropdownMenuItem("Item 2"),
+                        ],
+                        label="Dropdown",
+                        group=True,
+                    ),
+                ],
+                vertical=True,
+            ),
+            className="mb-2",
+        ),
+    ],
+    lg=6,
+    xs=12,
+)
+
+buttons = dbc.Row([buttons1, buttons2], className="mb-4")