html.Button: how to use data-activates?

Dash Python
1

Hello,

Im trying to build a sidebar like the one presented here: Bootstrap Sidenav - examples & tutorial

I Currently have this button:

                html.Button(
                    #html.Span([html.I(className="fas fa-plus-circle ml-2")]),
                    
                    [html.Span(className="fas fa-cog fa-lg")],
                    id="buttonModel50",
                    className="button-collapse",
                    data-activates="slide-out",
                    n_clicks=0
                ),

But I get the following error:
data-activates=“slide-out”,
^
SyntaxError: keyword can’t be an expression

How to use data-activates properly?

2

Did you find the way how to use MDB components in Dash? I’m new in frontend, i can’t find how to use it :frowning:

3

For anyone looking for how to use the data-* attributes in Python, you can unpack a dictionary in the arguments of the Dash component:

html.Button(
    [html.Span(className="fas fa-cog fa-lg")],
    id="buttonModel50",
    className="button-collapse",
    n_clicks=0,
    **{"data-activates": "slide-out"},
),