更改bokeh图中选项卡的样式

Question

I would like to know if there is a way to change the properties of tabs produced on a bokeh plot. Changes like increasing the text font, changing the tab width and so on. The following is a simple code for producing a plot with two tabs.

from bokeh.models.widgets import Panel, Tabs
from bokeh.io import output_file, show
from bokeh.plotting import figure

output_file("slider.html")

p1 = figure(plot_width=300, plot_height=300)
p1.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
tab1 = Panel(child=p1, title="circle")

p2 = figure(plot_width=300, plot_height=300)
p2.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="navy", alpha=0.5)
tab2 = Panel(child=p2, title="line")

tabs = Tabs(tabs=[ tab1, tab2 ])

show(tabs)

Answer 1

You can override the default Bokeh tabs styles like shown below (works for Bokeh v1.1.0).

Please note that Bokeh CSS library implementation may change in upcoming versions.

The css styles found below will work for v1.1.0 but are not backwards compatible with v1.0.4

from bokeh.plotting import save, figure
from bokeh.models import Paragraph, Panel, Tabs, Column

template = """
{% block postamble %}
<style>
.bk-root .bk-tab {
    background-color: cyan;
    width: 200px;
    color: red;
    font-style: italic;
}

.bk-root .bk-tabs-header .bk-tab.bk-active{
background-color: yellow;
color: blue;
font-style: normal;
font-weight: bold;
}

.bk-root .bk-tabs-header .bk-tab:hover{
background-color: yellow
}

</style>
{% endblock %}
"""

p = Paragraph(text = "Another tab", width = 600)

plot = figure()
plot.line(x = [1, 2], y = [3, 4])
tabs = [Panel(title = 'Tab1', child = plot)]
tabs.append(Panel(title = 'Tab2', child = p))

save(Column(Tabs(tabs = tabs, width = 600)), template = template)

Result: