Dynamic styled tabs

Panel
1

I am trying to create tabs that I could change the tab colors dynamically.

I know I can:

import panel as pn
css = """
.bk.bk-tab:nth-of-type(1) {
    color: white;
    background-color: blue;
}
.bk.bk-tab:nth-of-type(2) {
    color: white;
    background-color: red;
}
.bk.bk-tab:nth-of-type(3) {
    color: white;
    background-color: lime;
}
"""
pn.extension(raw_css=[css])
tabs = pn.Tabs(('One', pn.pane.Str('1')), ("Two", pn.pane.Str('2')), ('Three', pn.pane.Str('3')))

But I am looking for a way to set each tab color directly and be able to change it later on

fir example something like passing Str or any other Pane/Widget

2

I commonly use an dummy html pane to send css commands. Here you have an example. In this case, there is some strange behavior, due to the original style return when you change of tab. Maybe someone has a better solution, but I do not know exactly how the css is managed.

    import panel as pn

    css = """
    .bk.bk-tab:nth-of-type(1) {
        color: white;
        background-color: blue;
    }
    .bk.bk-tab:nth-of-type(2) {
        color: white;
        background-color: red;
    }
    .bk.bk-tab:nth-of-type(3) {
        color: white;
        background-color: lime;
    }
    """
    pn.extension(raw_css=[css])
    tabs = pn.Tabs(('One', pn.pane.Str('1')), ("Two", pn.pane.Str('2')), ('Three', pn.pane.Str('3')))



    cp_color = pn.widgets.ColorPicker(name='Color Picker', value='#99ef78', width=150)
    cp_background = pn.widgets.ColorPicker(name='Color Picker', value='#99ef78',width=150)

    tab_number = pn.widgets.IntSlider(name='Integer Slider', start=1, end=3, step=1, value=1)

    css_code = pn.pane.HTML('')


    @pn.depends(cp_color, cp_background, tab_number, watch=True)
    def update_color(color, background, tab_number):
        css1 = f"""
        <style>
        .bk.bk-tab:nth-of-type({tab_number}) {{
            color: {color} !important;
            background-color: {background} !important;
        }}
        </style>
        """
        css_code.object = css1 
        return 0


    pn.Row( pn.Column(cp_color,
                 cp_background,
                 tab_number),
             tabs, 
             css_code).show()

color_picker

1 Like
3

Thank you for the elaborate example!

This is mainly using my original approach, but I am searching a way to change a specific tab’s color from my application.

i saught to find a API based idea, either tabs[i].color, or adding class to a specific class to each tabs.

My case is to be able to generate colored tabs and be able to change each tab color on some cases

1 Like
4

Hi @ItamarShDev

Have your tried overriding some of the existing bokeh css? For example custom styling of the active tab.

You can find the existing bokeh css definitions here https://github.com/bokeh/bokeh/blob/branch-2.3/bokehjs/src/less/tabs.less. They are actually .less format and not .css. Might need a bit getting used to.

image
image521×773 22.3 KB

1 Like
5

Yes, I do it currently.

What i was searching for is a way to set each tab in a specific color. let’s say blue-green-red.

Something like an api or a class add/remove