Togglers / Switcher style - How to do create a switcher with labels and squared

Dash Python
1

Hey Fellows,

I’m trying to build an application where I have a switcher like the one below:

image

How can I build something like this component using Dash or Dash bootstrap?

I have tried dash.daq and also the Checklist of dash bootstrap but no one of these components worked/seem like I need;

I would be very grateful if someone can help me with it

2

I have adapted a dcc.Tabs component to build it:

image

I would love to see a better solution, but as it is working for me, I will use it for now; Let me know if you have a better option !

tabs_styles = {
    'height': '35px',
    'border': "4px solid #5a5454",
    'borderRadius':"12px"
}
tab_style = {
    'padding': '3px',
    'backgroundColor': 'lightgrey',
    'fontWeight':'bold',
    'width': '50px',
    'height': '25px',
    'borderRadius':"12px"
}

tab_selected_style = {
    'backgroundColor': '#425572',
    'color': 'white',
    'padding': '3px',
    'width': '50px',
    'height': '27px',
    'border': "1px solid #5a5454",
    'borderRadius':"7px"
}

tab_switcher = dcc.Tabs(id="tabs-styled-with-inline", value='tab-1',
                        children=[
                            dcc.Tab(label='Count', value='tab-1', style=tab_style, selected_style=tab_selected_style, className="font-sm"),
                            dcc.Tab(label='%', value='tab-2', style=tab_style, selected_style=tab_selected_style, className="font-sm"),
                        ], style=tabs_styles)
1 Like