Добавление пользовательских стилей в виджет Bokeh Tabs

Question

Есть ли способ добавить пользовательский стиль в виджет вкладок bokeh, в частности, я хочу изменить размер шрифта и цвет для свойства заголовка в каждом виджете Panel. Я пробовал различные способы добавления стилей к виджету вкладок в проекте, над которым я работаю, но, похоже, ничего не работает. Я пробовал с этим подходом Изменить стиль вкладок в боке-графике , https://discourse.bokeh.org/t/change-design-of-tab-panes/2767/7, и ни один из подходов, похоже, не работает. Я также устал использовать css классы, но, похоже, они не работают с виджетом Tabs.

Я бы предпочел сохранить текущую структуру проекта; который в данном случае является просто python файлом, который импортирует различные классы, относящиеся к проекту. Мне было интересно, лучше ли реорганизовать код для этого приложения Bokeh, чтобы оно работало с индексом. html и стилями. 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 %}
"""]))

Answer 1

Я бы предпочел сохранить текущую структуру проекта; который в данном случае представляет собой просто python файл

Это возможно, но код станет настолько запутанным и ненадежным, что это того не стоит.

Я был Интересно, лучше ли сделать рефакторинг кода для этого приложения Bokeh, чтобы оно работало с индексом. html и стилями. css page

Да, это именно то, что и предполагалось в приложениях каталога ( в отличие от однофайловых приложений).

или если будет лучше использовать другой подход.

Вам решать, что лучше, но вы можете Обязательно напишите в одном файле заявку для этого случая. Проблема в том, что вам придется вручную делать все леса, которые bokeh serve делает для вас. Как следствие, вам также придется запускать ваше приложение как просто python app.py.

Answer 2

Решается следующим образом

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

Answer 3

Решение в первой добавленной вами ссылке ( введите описание ссылки здесь ) сработало для меня. Мне пришлось включить {% block postamble%} ... {% endblock%} в самый конец заголовка Django базы шаблона. html. Мне также удалось заставить его работать с Jupyter. Как вы применили решение в этом посте?