Dash-bootstrap-components v01.6.0

[tcbegley]

Dash Bootstrap Components 1.6.0 Release

Version 1.6.0 of dash-bootstrap-components is now available! This version makes some improvements to Accordion, Modal and Progress as well as updating CDN links. Please continue to report problems on our issue tracker.

Added

• The title property of AccordionItem can now be an arbitrary Dash component (PR 988)
• You can now set enforceFocus=False on a Modal to allow components in the background to receive focus while the Modal is open (PR 1001)
• The documentation now has a dark mode (PR 984)

Fixed

• The min and max properties of a Progress bar are propagated to its children (PR 986)
• Fixed console errors originating from Tooltip component (PR 1008)
• Fix error caused by Tooltip closing as component unmounts (PR 1008)

Changed

• Drop support for Python 3.7 as it is EOL (PR 995)
• The themes module now links to Bootstrap 5.3.3 (PR 1013)

Thanks @arthur-FD, @arunsathiya and @AnnMarieW for contributing to this release!

Example: Color Mode Selector & Accordion with Icons

This example shows off the changes to Accordion as well as how to create a dark mode dropdown like the one we have in our documentation. Note the icons in the AccordionItems.

import dash
from dash import Dash, html, dcc, Input, Output, callback, clientside_callback, ctx

import dash_bootstrap_components as dbc

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP])


sun = html.I(className="bi bi-sun me-1")
moon = html.I(className="bi bi-moon-stars me-1")
auto = html.I(className="bi bi-circle-half me-1")

dropdown = dbc.DropdownMenu(
    id="dd-color-mode",
    label=sun,
    children=[
        dbc.DropdownMenuItem([sun, "Light"], id="light", n_clicks=0),
        dbc.DropdownMenuItem([moon, "Dark"], id="dark", n_clicks=0),
        dbc.DropdownMenuItem([auto, "Auto"], id="auto", n_clicks=0),
    ],
    color="link",
    className="ms-auto"
)

accordion = html.Div(
    dbc.Accordion(
        [
            dbc.AccordionItem(
                [
                    html.P("This is the content of the first section"),
                    dbc.Button("Click here"),
                ],
                title=html.Div([html.I(className="bi bi-info-circle-fill me-2"), "Item 1" ])
            ),
            dbc.AccordionItem(
                [
                    html.P("This is the content of the second section"),
                    dbc.Button("Don't click me!", color="danger"),
                ],
                title=html.Div([html.I(className="bi bi-check-circle-fill me-2"), "Item 2" ])
            ),
            dbc.AccordionItem(
                "This is the content of the third section",
                title=html.Div([html.I(className="bi bi-exclamation-triangle-fill me-2"), "Item 3" ])
            ),
        ],
    )
)


app.layout = dbc.Container(
    [
        dcc.Store(id="store-color-mode", data="light"),
        dbc.Stack(["Color Mode Demo ", dropdown],direction="horizontal", className="mb-4 h4"),
        accordion
    ],
)

@callback(
    Output("dd-color-mode", "label"),
    Output("store-color-mode", "data"),
    Input("light", "n_clicks"),
    Input("dark", "n_clicks"),
    Input("auto", "n_clicks")
)
def update_colormode_label(*_):
    if ctx.triggered_id == "light":
        return sun, "light"
    if ctx.triggered_id == "dark":
        return moon, "dark"
    if ctx.triggered_id == "auto":
        return auto, "auto"
    return dash.no_update


clientside_callback(
    """
    (mode) => {
      if (mode === 'auto') {
        mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'    
      } 
       document.documentElement.setAttribute('data-bs-theme', mode);  
       return window.dash_clientside.no_update
    }
    """,
    Output("store-color-mode", "id"),
    Input("store-color-mode", "data"),
)


app.run(debug=True)

Light and Dark Color Modes

Also check out the new light/dark/auto colour mode in the dash-bootstrap-components Documentation:

---

You can learn more about applying the Bootstrap Color Modes to your Dash app here.

Adding Themes/Light Dark Color Modes

Finally thanks to @AnnMarieW for helping me with this announcement

[AIMPED]

Thanks for the work you’re putting into dbc!

[Tobs]

I love working with your library, thanks for the great work over the years!