Styling BooleanSwitch... can it look like this?

📊 Plotly Python
1

Hi,

can we somehow have toggle/boolean Switch to look like the picture shows?

I am aiming to the right part of the image.
For example, on dash-daq/BooleanSwitch.py at master · plotly/dash-daq · GitHub it is said:
"

  • label (dict; optional): Description to be displayed alongside the control. To control styling,
    pass an object with label and style properties. label has the following type: string | dict containing keys ‘style’, ‘label’.
    Those keys have the following types:
    • style (dict; optional)
    • label (string; optional)
  • labelPosition (a value equal to: ‘top’, ‘bottom’; default ‘top’): Where the component label is positioned.
  • className (string; optional): Class to apply to the root component element.
  • style (dict; optional): Style to apply to the root object.
    "

Can I use label + style properties in order to have label left aligned and BooleanSwitch right aligned, as right part of image shows?

Regards.

2

Hi @gluperegistracije

Apparently you can only set the label “top” or “bottom”, to do what you want, you can add a html.P to each daq.BooleanSwitch.

daq.BooleanSwitch(
        id='my-boolean-switch',
        on=True,
        color="Green"
    ),
html.P("On", id="my_label")

You can change each id to set the color “Red” and the label “Off” using a callback.

3

Hi @Eduardo,

it kind of works, but label is vertically under BooleanSwitch.
I ended up creating a table and putting labels in left columns and BooleanSwitches in right one.

row1 = html.Tr([html.Td("Label1"), html.Td(
    daq.BooleanSwitch(
        id='show_poll_level_toggleswitch',
        on=True,
    )
)])
row2 = html.Tr([html.Td("Label2"), html.Td(
    daq.BooleanSwitch(
        id='show_dep_level_toggleswitch',
        on=True,
    )
)])
row3 = html.Tr([html.Td("Label3"), html.Td(daq.BooleanSwitch(
    id='show_emp_level_toggleswitch',
    on=True,
))])
row4 = html.Tr([html.Td("Label4"), html.Td(
    daq.BooleanSwitch(
        id='emps_from_departments',
        on=True,
    )
)])

table_body = [html.Tbody([row1, row2, row3, row4])]

table = dbc.Table(table_body, bordered=False, borderless=True, style={'vertical-align': 'middle'})

It looks OK, but layout is to complicated for such a simple requirement.

Best regards.