Various kinds of layout components.
Box
Bases: bokeh.models.layouts.LayoutDOM
bokeh.models.layouts.LayoutDOM
Abstract base class for Row and Column. Do not use directly.
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.
children
property type: List ( Instance ( LayoutDOM ) )
List
Instance
LayoutDOM
The list of children, which can be other components including plots, rows, columns, and widgets.
spacing
property type: Int
Int
The gap between children (in pixels).
{ "align": "start", "aspect_ratio": null, "background": null, "children": [], "css_classes": [], "disabled": false, "height": null, "height_policy": "auto", "id": "12436", "js_event_callbacks": {}, "js_property_callbacks": {}, "margin": [ 0, 0, 0, 0 ], "max_height": null, "max_width": null, "min_height": null, "min_width": null, "name": null, "sizing_mode": null, "spacing": 0, "subscribed_events": [], "tags": [], "visible": true, "width": null, "width_policy": "auto" }
Column
Bases: bokeh.models.layouts.Box
bokeh.models.layouts.Box
Lay out child components in a single vertical row.
Children can be specified as positional arguments, as a single argument that is a sequence, or using the children keyword argument.
rows
property type: Either ( Either ( Enum ( Enumeration(auto, min, fit, max) ), Int ), Dict ( Either ( Int , String ), Either ( Either ( Enum ( Enumeration(auto, min, fit, max) ), Int ), Struct , Struct , Struct ) ) )
Either
Enum
Dict
String
Struct
Describes how the component should maintain its rows’ heights.
This is an experimental feature and may change in future. Use it at your own discretion.
{ "align": "start", "aspect_ratio": null, "background": null, "children": [], "css_classes": [], "disabled": false, "height": null, "height_policy": "auto", "id": "12439", "js_event_callbacks": {}, "js_property_callbacks": {}, "margin": [ 0, 0, 0, 0 ], "max_height": null, "max_width": null, "min_height": null, "min_width": null, "name": null, "rows": "auto", "sizing_mode": null, "spacing": 0, "subscribed_events": [], "tags": [], "visible": true, "width": null, "width_policy": "auto" }
GridBox
property type: List ( Either ( Tuple ( Instance ( LayoutDOM ), Int , Int ), Tuple ( Instance ( LayoutDOM ), Int , Int , Int , Int ) ) )
Tuple
A list of children with their associated position in the grid (row, column).
cols
Describes how the grid should maintain its columns’ widths.
Describes how the grid should maintain its rows’ heights.
property type: Either ( Int , Tuple ( Int , Int ) )
Either a number, if spacing is the same for both dimensions, or a pair of numbers indicating spacing in the vertical and horizontal dimensions respectively.
{ "align": "start", "aspect_ratio": null, "background": null, "children": [], "cols": "auto", "css_classes": [], "disabled": false, "height": null, "height_policy": "auto", "id": "12441", "js_event_callbacks": {}, "js_property_callbacks": {}, "margin": [ 0, 0, 0, 0 ], "max_height": null, "max_width": null, "min_height": null, "min_width": null, "name": null, "rows": "auto", "sizing_mode": null, "spacing": 0, "subscribed_events": [], "tags": [], "visible": true, "width": null, "width_policy": "auto" }
HTMLBox
A component which size is determined by its HTML content.
{ "align": "start", "aspect_ratio": null, "background": null, "css_classes": [], "disabled": false, "height": null, "height_policy": "auto", "id": "12446", "js_event_callbacks": {}, "js_property_callbacks": {}, "margin": [ 0, 0, 0, 0 ], "max_height": null, "max_width": null, "min_height": null, "min_width": null, "name": null, "sizing_mode": null, "subscribed_events": [], "tags": [], "visible": true, "width": null, "width_policy": "auto" }
Bases: bokeh.model.Model
bokeh.model.Model
The base class for layoutable components.
align
property type: Either ( Enum ( Align ), Tuple ( Enum ( Align ), Enum ( Align ) ) )
Align
The alignment point within the parent container.
This property is useful only if this component is a child element of a layout (e.g. a grid). Self alignment can be overridden by the parent container (e.g. grid track align).
aspect_ratio
property type: Either ( Enum ( Enumeration(auto) ), Float )
Float
Describes the proportional relationship between component’s width and height.
This works if any of component’s dimensions are flexible in size. If set to a number, width / height = aspect_ratio relationship will be maintained. Otherwise, if set to "auto", component’s preferred width and height will be used to determine the aspect (if not set, no aspect will be preserved).
width / height = aspect_ratio
"auto"
background
property type: Color
Color
Background color of the component.
css_classes
property type: List ( String )
A list of CSS class names to add to this DOM element. Note: the class names are simply added as-is, no other guarantees are provided.
It is also permissible to assign from tuples, however these are adapted – the property will always contain a list.
disabled
property type: Bool
Bool
Whether the widget will be disabled when rendered.
If True, the widget will be greyed-out and not responsive to UI events.
True
height
property type: NonNegativeInt
NonNegativeInt
The height of the component (in pixels).
This can be either fixed or preferred height, depending on height sizing policy.
height_policy
property type: Either ( Auto , Enum ( SizingPolicy ) )
Auto
SizingPolicy
Describes how the component should maintain its height.
Use component’s preferred sizing policy.
"fixed"
Use exactly height pixels. Component will overflow if it can’t fit in the available vertical space.
"fit"
Use component’s preferred height (if set) and allow to fit into the available vertical space within the minimum and maximum height bounds (if set). Component’s height neither will be aggressively minimized nor maximized.
"min"
Use as little vertical space as possible, not less than the minimum height (if set). The starting point is the preferred height (if set). The height of the component may shrink or grow depending on the parent layout, aspect management and other factors.
"max"
Use as much vertical space as possible, not more than the maximum height (if set). The starting point is the preferred height (if set). The height of the component may shrink or grow depending on the parent layout, aspect management and other factors.
This is an experimental feature and may change in future. Use it at your own discretion. Prefer using sizing_mode if this level of control isn’t strictly necessary.
sizing_mode
margin
property type: Tuple ( Int , Int , Int , Int )
Allows to create additional space around the component.
max_height
Minimal height of the component (in pixels) if height is adjustable.
max_width
Minimal width of the component (in pixels) if width is adjustable.
min_height
min_width
property type: Enum ( SizingMode )
SizingMode
How the component should size itself.
This is a high-level setting for maintaining width and height of the component. To gain more fine grained control over sizing, use width_policy, height_policy and aspect_ratio instead (those take precedence over sizing_mode).
width_policy
Possible scenarios:
Component is not responsive. It will retain its original width and height regardless of any subsequent browser window resize events.
"stretch_width"
Component will responsively resize to stretch to the available width, without maintaining any aspect ratio. The height of the component depends on the type of the component and may be fixed or fit to component’s contents.
"stretch_height"
Component will responsively resize to stretch to the available height, without maintaining any aspect ratio. The width of the component depends on the type of the component and may be fixed or fit to component’s contents.
"stretch_both"
Component is completely responsive, independently in width and height, and will occupy all the available horizontal and vertical space, even if this changes the aspect ratio of the component.
"scale_width"
Component will responsively resize to stretch to the available width, while maintaining the original or provided aspect ratio.
"scale_height"
Component will responsively resize to stretch to the available height, while maintaining the original or provided aspect ratio.
"scale_both"
Component will responsively resize to both the available width and height, while maintaining the original or provided aspect ratio.
visible
Whether the component will be visible and a part of a layout.
width
The width of the component (in pixels).
This can be either fixed or preferred width, depending on width sizing policy.
Describes how the component should maintain its width.
Use exactly width pixels. Component will overflow if it can’t fit in the available horizontal space.
Use component’s preferred width (if set) and allow it to fit into the available horizontal space within the minimum and maximum width bounds (if set). Component’s width neither will be aggressively minimized nor maximized.
Use as little horizontal space as possible, not less than the minimum width (if set). The starting point is the preferred width (if set). The width of the component may shrink or grow depending on the parent layout, aspect management and other factors.
Use as much horizontal space as possible, not more than the maximum width (if set). The starting point is the preferred width (if set). The width of the component may shrink or grow depending on the parent layout, aspect management and other factors.
{ "align": "start", "aspect_ratio": null, "background": null, "css_classes": [], "disabled": false, "height": null, "height_policy": "auto", "id": "12447", "js_event_callbacks": {}, "js_property_callbacks": {}, "margin": [ 0, 0, 0, 0 ], "max_height": null, "max_width": null, "min_height": null, "min_width": null, "name": null, "sizing_mode": null, "subscribed_events": [], "tags": [], "visible": true, "width": null, "width_policy": "auto" }
Panel
A single-widget container with title bar and controls.
child
property type: Instance ( LayoutDOM )
The child widget. If you need more children, use a layout widget, e.g. a Column.
closable
Whether this panel is closable or not. If True, an “x” button will appear.
Closing a panel is equivalent to removing it from its parent container (e.g. tabs).
title
property type: String
The text title of the panel.
{ "child": null, "closable": false, "id": "12464", "js_event_callbacks": {}, "js_property_callbacks": {}, "name": null, "subscribed_events": [], "tags": [], "title": "" }
Row
Lay out child components in a single horizontal row.
Describes how the component should maintain its columns’ widths.
{ "align": "start", "aspect_ratio": null, "background": null, "children": [], "cols": "auto", "css_classes": [], "disabled": false, "height": null, "height_policy": "auto", "id": "12468", "js_event_callbacks": {}, "js_property_callbacks": {}, "margin": [ 0, 0, 0, 0 ], "max_height": null, "max_width": null, "min_height": null, "min_width": null, "name": null, "sizing_mode": null, "spacing": 0, "subscribed_events": [], "tags": [], "visible": true, "width": null, "width_policy": "auto" }
Spacer
A container for space used to fill an empty spot in a row or column.
{ "align": "start", "aspect_ratio": null, "background": null, "css_classes": [], "disabled": false, "height": null, "height_policy": "auto", "id": "12470", "js_event_callbacks": {}, "js_property_callbacks": {}, "margin": [ 0, 0, 0, 0 ], "max_height": null, "max_width": null, "min_height": null, "min_width": null, "name": null, "sizing_mode": null, "subscribed_events": [], "tags": [], "visible": true, "width": null, "width_policy": "auto" }
Tabs
A panel widget with navigation tabs.
Example
from bokeh.models import Panel, Tabs from bokeh.io import output_file, show from bokeh.plotting import figure output_file("slider.html") p1 = figure(plot_width=300, plot_height=300) p1.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5) tab1 = Panel(child=p1, title="circle") p2 = figure(plot_width=300, plot_height=300) p2.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="navy", alpha=0.5) tab2 = Panel(child=p2, title="line") tabs = Tabs(tabs=[ tab1, tab2 ]) show(tabs)
active
The index of the active tab.
callback
property type: Instance ( Callback )
Callback
A callback to run in the browser whenever the button is activated.
tabs
property type: List ( Instance ( Panel ) )
The list of child panel widgets.
tabs_location
property type: Enum ( Location )
Location
The location of the buttons that activate tabs.
{ "active": 0, "align": "start", "aspect_ratio": null, "background": null, "callback": null, "css_classes": [], "disabled": false, "height": null, "height_policy": "auto", "id": "12471", "js_event_callbacks": {}, "js_property_callbacks": {}, "margin": [ 0, 0, 0, 0 ], "max_height": null, "max_width": null, "min_height": null, "min_width": null, "name": null, "sizing_mode": null, "subscribed_events": [], "tabs": [], "tabs_location": "above", "tags": [], "visible": true, "width": null, "width_policy": "auto" }
WidgetBox
Bases: bokeh.models.layouts.Column
bokeh.models.layouts.Column
Create a column of bokeh widgets with predefined styling.
{ "align": "start", "aspect_ratio": null, "background": null, "children": [], "css_classes": [], "disabled": false, "height": null, "height_policy": "auto", "id": "12644", "js_event_callbacks": {}, "js_property_callbacks": {}, "margin": [ 0, 0, 0, 0 ], "max_height": null, "max_width": null, "min_height": null, "min_width": null, "name": null, "rows": "auto", "sizing_mode": null, "spacing": 0, "subscribed_events": [], "tags": [], "visible": true, "width": null, "width_policy": "auto" }