What's new in dash-bootstrap-components 1.4.0

Dash Python
1

Hey everyone,

There’s been a few new versions of dash-bootstrap-components released recently, and I want to share some of the new features with you! You can try all of this out now if you upgrade

pip install -U dash-bootstrap-components

These days it’s a relatively mature library, but we keep adding new features and squashing bugs that get requested / reported over on our issue tracker. Thanks to @AnnMarieW and @glsdown for their amazing contributions.

Here’s a summary of all the changes added in the last couple of months since version 1.2.1:

Added

Components as children

A bunch of components now accept other Dash components as children where previously they only accepted strings. Including DropdownMenu.label, NavbarSimple.brand, Toast.header, Offcanvas.title, and the label props of Checklist, RadioItems, RadioButton, Checkbox, and Switch components. (PR 940) (PR 938) (PR 917)

flights = html.Div([html.I(className="bi bi-airplane pe-1"), "Flights"])
car = html.Div([html.I(className="bi bi-car-front pe-1"), "Rental Car"])
hotel = html.Div([html.I(className="bi bi-house pe-1"), "Hotel"])

radioitems = html.Div(
    [
        dbc.Label("Booking"),
        dbc.RadioItems(
            options=[
                {"label": flights, "value": 1},
                {"label": car, "value": 2},
                {"label": hotel, "value": 3},
            ],
            value=1,
            id="radioitems-input",
        ),
    ]
)

image

Horizontal collapse

This was a much requested feature. You can how have a Collapse with horizontal animation. Just set horizontal=True. (PR 896)

ezgif-5-f17bed6315

Stack

The new Stack component makes it easier to control vertical layout of your components. It’s kind of like a vertical version of Row ((PR 897)

stack = html.Div(
    [
        dbc.Stack(
            [
                html.Div(
                    "This stack has no gaps", className="bg-light border"
                ),
                html.Div("Next item", className="bg-light border"),
                html.Div("Last item", className="bg-light border"),
            ]
        ),
        html.Hr(),
        dbc.Stack(
            [
                html.Div("This stack has gaps", className="bg-light border"),
                html.Div("Next item", className="bg-light border"),
                html.Div("Last item", className="bg-light border"),
            ],
            gap=3,
        ),
    ]
)

image
image1054×478 41.9 KB

Support for shorthand options

We now support the same shorthand syntax for specifying options in Checklist, RadioItems, Select that dash-core-components has ((PR 894). For example

dbc.Checklist(["Option 1", "Option 2", "Option 3"])
# equivalent to
dbc.Checklist(
    [
        {"label": "Option 1", "value": "Option 1"}, 
        {"label": "Option 1", "value": "Option 1"},
        {"label": "Option 1", "value": "Option 1"},
    ]
)

Numbered ListGroup

Add numbered prop to ListGroup for numbered list group support ((PR 895)

list_group = dbc.ListGroup(
    [
        dbc.ListGroupItem("Item 1"),
        dbc.ListGroupItem("Item 2"),
        dbc.ListGroupItem("Item 3"),
    ],
    numbered=True,
)

image
image914×284 18.3 KB

Placeholder

Add new Placeholder component which can be used as a loading component while waiting on a callback to populate content (PR 899)

Changed

  • We’ve updated to Bootstrap 5.2.3 ((PR 916), and Bootstrap Icons 1.10.3 (PR 940)
  • We no longer support Python 3.6 as it is EOL ((PR 913)

Bugfixes

For a full list of bugfixes, see our changelog

11 Likes
2

Great additions to a great library!

1 Like