DOM 元素样式#

Bokeh 有几种不同的机制可以在输出中包含 CSS 样式。

样式#

可以使用 Styles 类直接配置 DOM 元素的内联样式属性。

style = Styles(
    display="grid",
    grid_template_columns="auto auto",
    column_gap="10px",
)
grid = Div(style=style)

样式表#

也可以在生成的输出中定义和包含样式表。Bokeh 提供了一些不同的变体，可用于将 CSS 规则应用于 Bokeh 输出中的 DOM 对象。

InlineStyleSheet

等效于 <style type="text/css">${css}</style> 的内联样式表。
ImportedStyleSheet

等效于 <link rel="stylesheet" href="${url}"> 的导入样式表。
GlobalInlineStyleSheet

类似于 InlineStyleSheet，但附加到 <head> 元素。
GlobalImportedStyleSheet

类似于 ImportedStyleSheet，但附加到 <head> 元素。

全局变体仅附加到 <head> 一次，以便各种 UI 组件可以有效地共享相同的样式表模型。

例如

from bokeh.models import InlineStyleSheet, Slider

stylesheet = InlineStyleSheet(css=".bk-slider-title { background-color: lightgray; }")

slider = Slider(value=10, start=0, end=100, step=0.5, stylesheets=[stylesheet])