更改散景图中选项卡的样式

Question

我想知道是否有办法更改散景图上生成的选项卡的属性。更改如增加文本字体、更改选项卡宽度等。以下是用于生成带有两个选项卡的绘图的简单代码。

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

您可以覆盖默认的散景选项卡样式，如下所示（适用于散景 v1.1.0）。

请注意，Bokeh CSS 库实现可能会在即将发布的版本中发生变化。

下面找到的 css 样式适用于 v1.1.0，但不向后兼容 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)

结果：