Bootstrap checklist: two text colors for an option

Dash Python
1

In python, using the dash bootstrap checklist components (here, using LUMEN theme), I achieved the following nice looking checklist:
Checklist.
Each option in the checklist shows the number of degrees and then between the brackets the number of datapoints that will remain if the option is selected (96 for all options). I think it would look even better if the ‘(96)’ part of each option was a different color (I prefer blue), to indicate it is a different type of info.
Is it possible to have two different text colors in a checklist option? And how do you do it? Thanks in advance.

2

Hello @Noone234,

I do not think that you can add separate components inside the label on dbc.

You could however switch to dmc, and use a CheckboxGroup:

3

I can confirm that, the label is interpreted as string always. I tried using html tags, but it didn’t work out. There might be a really hacky way using css based on a SO post I saw.

4

I should use dmc more often, it has a lot of nice components/features!

import dash_mantine_components as dmc
from dash import html, Output, Input, callback
import dash

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dmc.CheckboxGroup(
            id="checkbox-group",
            label="Select your favorite framework/library",
            description="This is anonymous",
            orientation="vertical",
            withAsterisk=True,
            offset="md",
            mb=10,
            children=[
                dmc.Checkbox(
                    label=html.Div(
                        [
                            html.Span(
                                "Rea",
                                style={'color': 'red'}
                            ),
                            html.Span(
                                "ct",
                                style={'color': 'blue',  'font-weight': 'bold'}
                            )
                        ]
                    ), value="react"),
                dmc.Checkbox(label="Vue", value="vue"),
                dmc.Checkbox(label="Svelte", value="svelte"),
                dmc.Checkbox(label="Angular", value="angular"),
            ],
        ),
        dmc.Text(id="checkbox-group-output"),
    ]
)


@callback(Output("checkbox-group-output", "children"), Input("checkbox-group", "value"))
def checkbox(value):
    return ", ".join(value) if value else None


if __name__ == '__main__':
    app.run(debug=True)

creates:
image1
mred css

4 Likes
5

Thanks for the great response. That helps a lot. Those components look great. Can I make them match stylistically with the LUMEN bootstrap theme? I’d like the dashboard to look coherent :slight_smile:

6

Hi @Noone234, I#m not entirely sure concerning the styling, but maybe @AnnMarieW could share her thoughts on this :upside_down_face:

7

You should be able to add “dbc” to the class name and it will apply styling of bootstrap to it.

If you need more than that, you’ll need to add some custom css.

Or, add the corresponding class name that dbc used with the same style item.

1 Like
8

@Noone234

It would be cool if @jinnyzor suggestion of using the “dbc” class would work, but currently, that only applies Bootstrap themes to dash-core-components and the DataTable (More info here. )

You can apply Bootstrap classes to the labels of the dmc checkboxes - for example:

                    label=html.Div(
                        [
                            html.Span(
                                "Rea",
                            
                                className="text-warning ",
                            ),
                            html.Span(
                                "ct",                            
                                className="text-primary fw-bold "
                            )
                        ]
                    )

However, if you would like the checkbox itself to have the colors of the Bootstrap theme, I think you would need to create a custom colors in the MantineProvider component

2 Likes
9

Thanks for the clear answer!

10

:tada: Just FYI - In the next release of dash-boostrap-components (v1.4.0) you will be able to include components in the labels of:

  • dbc.RadioItems
  • dbc.Checklist ,
  • dbc.RadioButton
  • dbc.Checkbox
  • dbc.Switch
2 Likes
11

That is fantastic! I guess the easiest thing for me to do then is to wait for that next release!

12

The prerelease is available if you would like to take it for a spin:

pip install dash-bootstrap-components==1.4.0-rc1

13

Thanks for the tip. I’m afraid I have to wait for official release (for various reasons).

Maybe one other question. The AccordionItem ‘title’ property probably has the same logic right? I can only use string variables? I’m asking because I would like to use a bootstrap icon in it, but I think I can’t. Thank you so much for your help!

14

Just got released:

2 Likes