样式化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

    内联样式表等同于 type="text/css">${css}。

  • ImportedStyleSheet

    导入的样式表等同于 rel="stylesheet" href="${url}">。

  • GlobalInlineStyleSheet

    类似于 InlineStyleSheet 但附加到 元素。

  • GlobalImportedStyleSheet

    类似于 ImportedStyleSheet 但附加到 元素。

全局变量仅附加到 一次，以便相同的样式表模型可以在各种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])
On this page