有没有一种方法可以向bokeh选项卡小部件添加自定义样式,特别是我想更改每个Panel小部件下title属性的字体大小和颜色。我尝试了各种不同的方式将样式添加到我正在处理的项目的tabs小部件中,但是似乎没有任何效果。我已经尝试过使用Change style of tabs in bokeh plot,https://discourse.bokeh.org/t/change-design-of-tab-panes/2767/7这种方法,但似乎没有一种方法可行。 我也对使用CSS类感到厌倦,但似乎它们无法与Tabs小部件一起使用。
我最好保持项目的当前结构;在这种情况下,它只是一个单一的python文件,该文件导入与项目有关的不同类。我想知道是否最好将此Bokeh应用程序的代码重构,使其与index.html和styles.css页面一起使用,或者使用其他方法是否更好。
我在下面附加了代码块:
from bokeh.models import (
TextInput,
Button,
Paragraph,
Div,
)
from bokeh.models import (
Label,
FileInput,
Select,
CheckboxGroup,
Panel,
Tabs,
RangeTool,
CustomJS,
)
from bokeh.plotting import show, figure, curdoc
from bokeh.models import ColumnDataSource,
from bokeh.layouts import layout, column, row
from bokeh.models.widgets import (
DataTable,
DateFormatter,
TableColumn,
HTMLTemplateFormatter,
)
from bokeh.models.widgets import Div
from tornado import gen
from functools import partial
# Layout
tab_dashboard = Panel(
child=layout(
[
column(select_site, div_value),
[div1, div2, div3, div4],
data_table,
button_download,
],
),
title="Export",
)
tab_import = Panel(
child=layout(
[
[column(Div(text="Upload CSV file"), button_upload, div_value)],
[div1, div2, div3, div4],
data_table,
button_import,
],
),
title="Import",
)
tabs = Tabs(tabs=[tab_dashboard, tab_import, tab_settings], margin=[20, 0, 0, 0])
# add the layout to curdoc
doc.add_root(layout(textStatus, tabs, sizing_mode="stretch_both"))
编辑:我还尝试了以下使用css_classes的代码段,但是当我调用bokeh serve --show app.py
时它们不显示任何内容。
tab_import = Panel(
child=layout(
[
[column(Div(text="Upload CSV file"), button_upload, div_value)],
[div1, div2, div3, div4],
data_table,
button_import,
],
),
title="Import",
)
tabs = Tabs(tabs=[tab_dashboard, tab_import, tab_settings], margin=[20, 0, 0, 0], css_classes=["""
{% 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 %}
"""])
# add the layout to curdoc
doc.add_root(layout(textStatus, tabs, sizing_mode="stretch_both"))
tabs = Tabs(tabs=[tab_dashboard, tab_import, tab_settings], margin=[20, 0, 0, 0])
# add the layout to curdoc
doc.add_root(layout(textStatus, tabs, sizing_mode="stretch_both", css_classes=["""
{% 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 %}
"""]))
答案 0 :(得分:0)
您添加的第一个链接(Mohamed Magdy)中的解决方案对我有用。我必须在Django模板base.html标题的末尾添加{%block postamble%} ... {%endblock%}。我还设法使其与Jupyter一起使用。您是如何在该帖子中应用解决方案的?
答案 1 :(得分:0)
我最好保持项目的当前结构;在这种情况下,它只是一个单一的python文件
这是可能的,但是代码将变得非常复杂和不可靠,以至于不值得。
我想知道为这个Bokeh应用程序重构代码是否更好,使其与index.html和styles.css页面一起使用
是的,这正是目录应用程序(而不是单个文件应用程序)的预期用途。
或者最好使用其他方法。
由您决定什么更好,但是对于这种情况,您绝对可以编写单个文件应用程序。问题是您将必须手动完成bokeh serve
为您完成的所有脚手架。因此,您还必须仅以python app.py
的身份运行应用。
答案 2 :(得分:0)
通过执行以下操作解决
divTemplate = Div(text="""
<style>
.bk.sent-later {
font-size: 20px;
}
</style>
""")
tabs = Tabs(tabs=[tab_dashboard, tab_import, tab_settings], margin=[20, 0, 0, 0])
tabs.css_classes.append('sent-later')