Interactive accordion titles

Dash Python
1

I’m working on a financial dashboard and would like to show spending categories in an accordion style layout, but with additional components in the titles (as seen in the mockup).
What would be the best way to do this?
(I’m not set on using an Accordion object, any solution that looks reasonable is fine)

Thanks a bunch! :slight_smile:

image
image1241×151 24.7 KB

1 Like
2

The latest release (0.11.0a0) of Dash Mantine Components allows you to put components in “title” Here’s an example:

This is one of the breaking changes in the latest release, but it allows you to use components rather than just the label prop:

accordion

import dash_mantine_components as dmc
from dash import Dash

app = Dash(__name__)

def content(title, pct):
    return dmc.Grid(
        children=[
            dmc.Col(dmc.Text(f"{title}", weight=700), span=2 ),
            dmc.Col(dmc.Text(f"{pct}% budget used", align="center"), span=3),
            dmc.Col(dmc.Progress(value=pct, label=f"{pct}", size="xl", color="green"), span=7 ),
        ],
        gutter="sm",

)

accordion =  dmc.Accordion(
    dmc.AccordionItem(
        [
            dmc.AccordionControl(content("Transportation", 25)),
            dmc.AccordionPanel([content("Trains", 40), content("Planes", 75), content("Automobiles", 30)])
        ],
        value="1"
    ),

)

app.layout= dmc.Container(accordion)

if __name__ == "__main__":
    app.run(debug=True)
2 Likes
3

Amazing, Thanks!
I actually looked at the Mantime docs but I guess they weren’t updated yet.

This is an alpha release? Is that stable enough to use right now?

Lastly, are component libraries (core, bootstrap, mantime…) interchangeable? For example can I put a mantime accordion in a dbc col and use core components in the accordion?

4

@amihaio,
Yes, this is an alpha release, so there will still be changes. However, I expect that the Accordion component is stable.

I have mixed other libraries without any issues. In fact, the Dash Example Index is a Bootstrap app with a smattering of dmc comonents. (Just do a search for “.dmc” and you’ll see the sample apps with dmc components.) https://dash-example-index.herokuapp.com/

There may be conflicts with the layout components - so I would probably stick with one library for that.

2 Likes