向“散景标签”小部件添加自定义样式

时间:2020-03-06 18:31:57

标签: css bokeh python-3.7

有没有一种方法可以向bokeh选项卡小部件添加自定义样式,特别是我想更改每个Panel小部件下title属性的字体大小和颜色。我尝试了各种不同的方式将样式添加到我正在处理的项目的tabs小部件中,但是似乎没有任何效果。我已经尝试过使用Change style of tabs in bokeh plothttps://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 %}
"""]))

3 个答案:

答案 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')