layouts#

Various kinds of layout components.

class Column(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

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.

class FlexBox(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

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#: The list of children, which can be other components including plots, rows, columns, and widgets.

spacing#: The gap between children (in pixels).

class GridBox(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

A CSS grid-based grid container.

children#: A list of children with their associated position in the grid (row, column).

class GroupBox(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

A panel that allows to group UI elements.

checkable#: Whether to allow disabling this group (all its children) via a checkbox in the UI. This allows to broadcast disabled state across multiple UI controls that support that state.

child#: The child UI element. This can be a single UI control, widget, etc., or a container layout like Column or Row, or a combitation of layouts.

title#: The title text of the group. If not provided, only the frame will be showed.

class HBox(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

A CSS grid-based horizontal box.

children#: A list of children with their associated position in the horizontal box (optional; column number, span).

cols#: Describes how the grid should maintain its columns’ widths.

spacing#: The gap between children (in pixels).

class LayoutDOM(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

The base class for layoutable components.

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.

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#

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

property background#

disabled#

Whether the widget will be disabled when rendered.

If True, the widget will be greyed-out and not responsive to UI events.

flow_mode#: Defines whether the layout will flow in the block or inline dimension.

height#

The height of the component (in pixels).

This can be either fixed or preferred height, depending on height sizing policy.

height_policy#

Describes how the component should maintain its height.

"auto": 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.

Note

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.

margin#: Allows to create additional space around the component. The values in the tuple are ordered as follows - Margin-Top, Margin-Right, Margin-Bottom and Margin-Left, similar to CSS standards. Negative margin values may be used to shrink the space from any direction.

max_height#: Maximal height of the component (in pixels) if height is adjustable.

max_width#: Maximal width of the component (in pixels) if width is adjustable.

min_height#: Minimal height of the component (in pixels) if height is adjustable.

min_width#: Minimal width of the component (in pixels) if width is adjustable.

resizable#: Whether the layout is interactively resizable, and if so in which dimensions.

sizing_mode#

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

Possible scenarios:

"inherit": The sizing mode is inherited from the parent layout. If there is no parent layout (or parent is not a layout), then this value is treated as if no value for sizing_mode was provided.
"fixed": 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.

width#

The width of the component (in pixels).

This can be either fixed or preferred width, depending on width sizing policy.

width_policy#

Describes how the component should maintain its width.

"auto": Use component’s preferred sizing policy.
"fixed": Use exactly width pixels. Component will overflow if it can’t fit in the available horizontal space.
"fit": 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.
"min": 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.
"max": 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.

Note

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.

class Row(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

Lay out child components in a single horizontal row.

Children can be specified as positional arguments, as a single argument that is a sequence, or using the children keyword argument.

class ScrollBox(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

A panel that allows to scroll overflowing UI elements.

child#: The child UI element. This can be a single UI control, widget, etc., or a container layout like Column or Row, or a combitation of layouts.

horizontal_scrollbar#: The visibility of the horizontal scrollbar.

vertical_scrollbar#: The visibility of the vertical scrollbar.

class Spacer(*args: Any, id: ID | None = None, **kwargs: Any)[source]#: A container for space used to fill an empty spot in a row or column.

class TabPanel(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

A single-widget container with title bar and controls.

child#: 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).

disabled#: Whether the widget is responsive to UI events.

title#: The text title of the panel.

tooltip#: A tooltip with plain text or rich HTML contents, providing general help or description of a widget’s or component’s function.

class Tabs(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

A panel widget with navigation tabs.

Example

from bokeh.models import TabPanel, Tabs, Tooltip
from bokeh.models.layouts import Row
from bokeh.plotting import figure, show

p1 = figure(width=300, height=300)
p1.scatter([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)

p2 = figure(width=300, height=300)
p2.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="navy", alpha=0.5)

p3 = figure(width=300, height=300)
p3.scatter([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)

p4 = figure(width=300, height=300)
p4.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="navy", alpha=0.5)

tabs0 = Tabs(tabs=[
    TabPanel(child=p1, title="circle"),
    TabPanel(child=p2, title="line"),
])

tabs1 = Tabs(tabs=[
    TabPanel(child=p1, title="circle", tooltip=Tooltip(content="This is the first tab.", position="bottom_center")),
    TabPanel(child=p2, title="line", tooltip=Tooltip(content="This is the second tab.", position="bottom_center")),
])

show(Row(tabs0, tabs1))

active#: The index of the active tab.

link_layouts#

Configures whether layouts across panels are linked together.

Linking layouts allows for example to align plot axes between different tabs. Note that this can negatively impact UI performance if many complex layouts are involved.

tabs#: The list of child panel widgets.

tabs_location#: The location of the buttons that activate tabs.

class VBox(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

A CSS grid-based vertical box.

children#: A list of children with their associated position in the vertical box (optional; row number, span).

rows#: Describes how the grid should maintain its rows’ heights.

spacing#: The gap between children (in pixels).