Tabs prettification

Hello,

I want to customize Tabs/TabPanel view so that it looks a bit better on the page.

Some MRE:

from bokeh.models import Div, TabPanel, Tabs
from bokeh.plotting import show
from bokeh.layouts import layout

level0 = [1, 2]
level1 = [1, 2, 3]
level2 = [1, 2, 3, 4]

tab_colors = ["red", "blue", "green"]

# short label
label = "Lorem ipsum" 
# long label
#label = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."

tabs0 = list()
for l0 in level0:
    tabs1 = list()
    for l1 in level1:
        tabs2 = list()
        for l2 in level2:
            tabs2.append(TabPanel(child=Div(text='Lorem ipsum'),
                                  title=f"{l0}.{l1}.{l2} {label} at level 2"))
        tabs1.append(TabPanel(child=Tabs(tabs=tabs2),
                              title=f"{l0}.{l1} {label} at level 1"))
    tabs0.append(TabPanel(child=Tabs(tabs=tabs1),
                          title=f"{l0} {label} at level 0"))

show(Tabs(tabs=tabs0))

I have few questions:

1. The main question is, how to access (some accepted way) the CSS properties of Tabs/TabPanel?

2. If label is a short string, then it fits completely on the page. But if the text is long enough, then it no longer fits on the page:

   label is short	label is long
   short-labeled-tabs1161×222 42.8 KB	long-labeled-tabs1132×232 52.6 KB

   It would be more beautiful if the text and the location of TabPanel labels automatically adjusted to the width of the page (text width and tab height or at least moving the “out-of-page” tab’s label to the next line).

3. By default active tabs are marked with a bold bar above the text. It would be more presentable if the active tab label was colored with the appropriate color (tab_colors) or appropriate text was colored or smth else. For example, something like this

   

   short-labeled-tabs-colored1152×291 112 KB

@dinya

1. CSS styling of tabs has been asked before. There is one answer on Stack Overflow (SO).
2. 3.: I recommend you to add a feature request on Github

@Jonas_Grave_Kristens Thanks a lot.

2. 3.: I recommend you to add a feature request on Github

I added:

1. [FEATURE] Tab labels are fitted to the width of the page · Issue #13751 · bokeh/bokeh · GitHub
2. [FEATURE] Coloring of active tabs · Issue #13752 · bokeh/bokeh · GitHub

3. By default active tabs are marked with a bold bar above the text. It would be more presentable if the active tab label was colored with the appropriate color (tab_colors) or appropriate text was colored or smth else.

Example of recipe after Jonas_Grave_Kristens answer

from bokeh.models import Div, TabPanel, Tabs
from bokeh.plotting import show
from bokeh.layouts import layout

level0 = [1, 2]
level1 = [1, 2, 3]
level2 = [1, 2, 3, 4]

label = "Lorem ipsum" 

stylesheet = """
:host(.bk-Tabs) .bk-header {{
  border-bottom: 1px solid {tabcolor};
  .bk-active {{
    color: {tabcolor};
    border-color: {tabcolor};
    background-color: lightgray;
  }}
}}
"""

tabs0 = list()
for l0 in level0:
    tabs1 = list()
    for l1 in level1:
        tabs2 = list()
        for l2 in level2:
            tabs2.append(TabPanel(child=Div(text='Lorem ipsum'),
                                  title=f"{l0}.{l1}.{l2} {label} at level 2"))
        tabs1.append(TabPanel(child=Tabs(tabs=tabs2, stylesheets=[stylesheet.format(**dict(tabcolor="green"))]),
                              title=f"{l0}.{l1} {label} at level 1"))
    tabs0.append(TabPanel(child=Tabs(tabs=tabs1, stylesheets=[stylesheet.format(**dict(tabcolor="blue"))]),
                          title=f"{l0} {label} at level 0"))

show(Tabs(tabs=tabs0, stylesheets=[stylesheet.format(**dict(tabcolor="red"))]))

short-labeled-tabs-colored-done907×162 31.7 KB

“Tabs labels are fitted to the width of the page” is still a challenge for CSS-ninja.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.