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:
-
The main question is, how to access (some accepted way) the CSS properties of
Tabs
/TabPanel
? -
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: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). -
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