bokeh.models.widgets.markups¶

Various kinds of markup (static content) widgets.

Warning

The explicit purpose of these Bokeh Models is to embed raw HTML text for a browser to execute. If any portion of the text is derived from untrusted user inputs, then you must take appropriate care to sanitize the user input prior to passing to Bokeh.

class Div(**kwargs)[source]¶

Bases: bokeh.models.widgets.markups.Markup

A block (div) of text.

This Bokeh model corresponds to an HTML <div> element.

Example

from bokeh.io import output_file, show
from bokeh.models.widgets import Div

output_file("div.html")

div = Div(text="""Your <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>-supported text is initialized with the <b>text</b> argument.  The
remaining div arguments are <b>width</b> and <b>height</b>. For this example, those values
are <i>200</i> and <i>100</i> respectively.""",
width=200, height=100)

show(div)

render_as_text¶

property type: Bool

Whether the contents should be rendered as raw text or as interpreted HTML. The default value is False, meaning contents are rendered as HTML.

JSON Prototype

{
  "align": "start",
  "aspect_ratio": null,
  "background": null,
  "css_classes": [],
  "default_size": 300,
  "disabled": false,
  "height": null,
  "height_policy": "auto",
  "id": "14497",
  "js_event_callbacks": {},
  "js_property_callbacks": {},
  "margin": [
    5,
    5,
    5,
    5
  ],
  "max_height": null,
  "max_width": null,
  "min_height": null,
  "min_width": null,
  "name": null,
  "orientation": "horizontal",
  "render_as_text": false,
  "sizing_mode": null,
  "style": {},
  "subscribed_events": [],
  "tags": [],
  "text": "",
  "visible": true,
  "width": null,
  "width_policy": "auto"
}

class Markup(**kwargs)[source]¶

Bases: bokeh.models.widgets.widget.Widget

Base class for Bokeh models that represent HTML markup elements.

Markups include e.g., <div>, <p>, and <pre>.

Note

This is an abstract base class used to help organize the hierarchy of Bokeh model types. It is not useful to instantiate on its own.

style¶

property type: Dict ( String , Any )

Raw CSS style declaration. Note this may be web browser dependent.

text¶

property type: String

The text or HTML contents of the widget.

Note

If the HTML content contains elements which size depends on on external, asynchronously loaded resources, the size of the widget may be computed incorrectly. This is in particular an issue with images (<img>). To remedy this problem, one either has to set explicit dimensions using CSS properties, HTML attributes or model’s width and height properties, or inline images’ contents using data URIs.

JSON Prototype

{
  "align": "start",
  "aspect_ratio": null,
  "background": null,
  "css_classes": [],
  "default_size": 300,
  "disabled": false,
  "height": null,
  "height_policy": "auto",
  "id": "14501",
  "js_event_callbacks": {},
  "js_property_callbacks": {},
  "margin": [
    5,
    5,
    5,
    5
  ],
  "max_height": null,
  "max_width": null,
  "min_height": null,
  "min_width": null,
  "name": null,
  "orientation": "horizontal",
  "sizing_mode": null,
  "style": {},
  "subscribed_events": [],
  "tags": [],
  "text": "",
  "visible": true,
  "width": null,
  "width_policy": "auto"
}

class Paragraph(**kwargs)[source]¶

Bases: bokeh.models.widgets.markups.Markup

A block (paragraph) of text.

This Bokeh model corresponds to an HTML <p> element.

Example

from bokeh.io import output_file, show
from bokeh.models.widgets import Paragraph

output_file("div.html")

p = Paragraph(text="""Your text is initialized with the 'text' argument.  The
remaining Paragraph arguments are 'width' and 'height'. For this example, those values
are 200 and 100 respectively.""",
width=200, height=100)

show(p)

JSON Prototype

{
  "align": "start",
  "aspect_ratio": null,
  "background": null,
  "css_classes": [],
  "default_size": 300,
  "disabled": false,
  "height": null,
  "height_policy": "auto",
  "id": "14504",
  "js_event_callbacks": {},
  "js_property_callbacks": {},
  "margin": [
    5,
    5,
    5,
    5
  ],
  "max_height": null,
  "max_width": null,
  "min_height": null,
  "min_width": null,
  "name": null,
  "orientation": "horizontal",
  "sizing_mode": null,
  "style": {},
  "subscribed_events": [],
  "tags": [],
  "text": "",
  "visible": true,
  "width": null,
  "width_policy": "auto"
}

class PreText(**kwargs)[source]¶

Bases: bokeh.models.widgets.markups.Paragraph

A block (paragraph) of pre-formatted text.

This Bokeh model corresponds to an HTML <pre> element.

Example

from bokeh.io import output_file, show
from bokeh.models.widgets import PreText

output_file("div.html")

pre = PreText(text="""Your text is initialized with the 'text' argument.

The remaining Paragraph arguments are 'width' and 'height'. For this example,
those values are 500 and 100 respectively.""",
width=500, height=100)

show(pre)

JSON Prototype

{
  "align": "start",
  "aspect_ratio": null,
  "background": null,
  "css_classes": [],
  "default_size": 300,
  "disabled": false,
  "height": null,
  "height_policy": "auto",
  "id": "14507",
  "js_event_callbacks": {},
  "js_property_callbacks": {},
  "margin": [
    5,
    5,
    5,
    5
  ],
  "max_height": null,
  "max_width": null,
  "min_height": null,
  "min_width": null,
  "name": null,
  "orientation": "horizontal",
  "sizing_mode": null,
  "style": {},
  "subscribed_events": [],
  "tags": [],
  "text": "",
  "visible": true,
  "width": null,
  "width_policy": "auto"
}