panel.ui.base module#

The base classes the Material UI components are built on. Subclass these to write a component that participates in the Material design and theming.

class panel.ui.base.MaterialComponent(*, dark_theme, sx, theme_config, use_shadow_dom, loading, align, aspect_ratio, css_classes, design, height, height_policy, margin, max_height, max_width, min_height, min_width, sizing_mode, styles, stylesheets, tags, visible, width, width_policy, name)[source]#

Bases: ReactComponent

Baseclass for all MaterialComponents which defines the bundle location, the JS dependencies and theming support via the ThemedTransform.

Methods

api([jslink, sizing_mode])

Returns an interactive component for exploring the API of the widget.

controls([parameters, jslink])

Creates a set of widgets which allow manipulating the parameters on this instance.

preview([width, height, border])

Render the page as an iframe.

save(filename[, title, resources, template, ...])

Saves Panel objects to file.

server_doc([doc, title, location])

Returns a serveable bokeh Document with the panel attached

Parameter Definitions

Parameters inherited from:

panel.viewable.Layoutable: align, aspect_ratio, css_classes, design, height, min_width, min_height, max_width, max_height, margin, styles, stylesheets, tags, width, width_policy, height_policy, sizing_mode, visible

panel.custom.ReactComponent: use_shadow_dom

loading = Boolean(allow_refs=True, default=False, label='Loading')

If True displays a loading spinner on top of the component.

dark_theme = Boolean(default=False, label='Dark theme')

Whether to use dark theme. If not specified, will default to Panel’s global theme setting.

theme_config = Dict(allow_None=True, class_=<class 'dict'>, label='Theme config', nested_refs=True)

Options to configure the ThemeProvider. See https://mui.com/material-ui/customization/theme-overview/ for more information.

sx = Dict(allow_None=True, class_=<class 'dict'>, label='Sx')

A dictionary of CSS styles to apply to the component. The keys are the CSS class names and the values are the styles. The CSS class names are generated by the component and can be found in the component’s documentation.

api(jslink: bool = False, sizing_mode='stretch_width', **kwargs) → Viewable[source]#

Returns an interactive component for exploring the API of the widget.

Parameters:
jslink: bool

Whether to use jslinks instead of Python based links. This does not allow using all types of parameters.

sizing_mode: str

Sizing mode for the component.

kwargs: dict

Additional arguments to pass to the component.

controls(parameters: list[str] | None = None, jslink: bool = True, **kwargs) → Viewable[source]#

Creates a set of widgets which allow manipulating the parameters on this instance. By default all parameters which support linking are exposed, but an explicit list of parameters can be provided.

Parameters:
parameters: list(str) | None

An explicit list of parameters to return controls for.

jslink: bool

Whether to use jslinks instead of Python based links. This does not allow using all types of parameters.

kwargs: dict

Additional kwargs to pass to the Param pane(s) used to generate the controls widgets.

Returns:
A layout of the controls
preview(width: int | None = 800, height: int | None = 600, border: str = '1px solid #ccc', **kwargs)[source]#

Render the page as an iframe.

Since the Page component assumes it is the root component this approach provides a way to see a preview of the rendered page.

Parameters:
width: int

The width of the iframe.

height: int

The height of the iframe.

border: str

The border of the iframe.

kwargs: dict

Additional keyword arguments to pass to the HTML pane.

Returns:
HTML

An HTML pane containing the rendered page.

save(filename: str | PathLike | IO[Any], title: str | None = None, resources: Resources | None = None, template: str | Template | None = None, template_variables: dict[str, Any] | None = None, **kwargs) → None[source]#

Saves Panel objects to file.

Parameters:
filename: str or file-like object

Filename to save the plot to

title: string

Optional title for the plot

resources: bokeh resources

One of the valid bokeh.resources (e.g. CDN or INLINE)

template:

passed to underlying io.save

template_variables:

passed to underlying io.save

embed: bool

Whether the state space should be embedded in the saved file.

max_states: int

The maximum number of states to embed

max_opts: int

The maximum number of states for a single widget

embed_json: boolean (default=True)

Whether to export the data to json files

json_prefix: str (default=’’)

Prefix for the auto-generated json directory

save_path: str (default=’./’)

The path to save json files to

load_path: str (default=None)

The path or URL the json files will be loaded from.

progress: boolean (default=True)

Whether to report progress

embed_states: dict (default={})

A dictionary specifying the widget values to embed for each widget

as_png: boolean (default=None)

To save as a .png. If None save_png will be true if filename is string and ends with png.

server_doc(doc: Document | None = None, title: str | None = None, location: bool | Location | None = True) → Document[source]#

Returns a serveable bokeh Document with the panel attached

Parameters:
docbokeh.Document (optional)

The bokeh Document to attach the panel to as a root, defaults to bokeh.io.curdoc()

titlestr

A string title to give the Document

locationboolean or panel.io.location.Location

Whether to create a Location component to observe and set the URL location.

Returns:
docbokeh.Document

The bokeh document the panel was attached to

class panel.ui.base.MaterialLayout(*objects, **params)[source]#

Bases: MaterialComponent, SizingModeMixin

Parameter Definitions

Parameters inherited from:

panel.viewable.Layoutable: align, aspect_ratio, css_classes, design, height, min_width, min_height, max_width, max_height, styles, stylesheets, tags, width, width_policy, height_policy, sizing_mode, visible

panel.custom.ReactComponent: use_shadow_dom

panel_material_ui.base.MaterialComponent: loading, dark_theme, theme_config, sx

margin = Margin(allow_None=True, allow_refs=True, default=0, label='Margin')

The margin of the layout.

class panel.ui.base.MaterialListLike(*objects, **params)[source]#

Bases: MaterialLayout, ListLike

Parameter Definitions

Parameters inherited from:

panel.layout.base.ListLike: objects

panel.viewable.Layoutable: align, aspect_ratio, css_classes, design, height, min_width, min_height, max_width, max_height, styles, stylesheets, tags, width, width_policy, height_policy, sizing_mode, visible

panel.custom.ReactComponent: use_shadow_dom

panel_material_ui.base.MaterialComponent: loading, dark_theme, theme_config, sx

panel_material_ui.layout.base.MaterialLayout: margin

scroll = Selector(default=False, label='Scroll', names={}, objects=[False, True, 'both-auto', 'y-auto', 'x-auto', 'both', 'x', 'y'])

Whether to add scrollbars if the content overflows the size of the container. If “both-auto”, will only add scrollbars if the content overflows in either directions. If “x-auto” or “y-auto”, will only add scrollbars if the content overflows in the respective direction. If “both”, will always add scrollbars. If “x” or “y”, will always add scrollbars in the respective direction. If False, overflowing content will be clipped. If True, will only add scrollbars in the direction of the container, (e.g. Column: vertical, Row: horizontal).

class panel.ui.base.MaterialNamedListLike(*items: list[Any | tuple[str, Any]], **params: Any)[source]#

Bases: MaterialLayout, NamedListLike

Methods

append(pane)

Appends an object to the tabs.

clear()

Clears the tabs.

extend(panes)

Extends the the tabs with a list.

insert(index, pane)

Inserts an object in the tabs at the specified index.

pop([index])

Pops an item from the tabs by index.

remove(pane)

Removes an object from the tabs.

reverse()

Reverses the tabs.

Parameter Definitions

Parameters inherited from:

panel.layout.base.NamedListLike: objects

panel.viewable.Layoutable: align, aspect_ratio, css_classes, design, height, min_width, min_height, max_width, max_height, styles, stylesheets, tags, width, width_policy, height_policy, sizing_mode, visible

panel.custom.ReactComponent: use_shadow_dom

panel_material_ui.base.MaterialComponent: loading, dark_theme, theme_config, sx

panel_material_ui.layout.base.MaterialLayout: margin

_names = List(bounds=(0, None), default=[], label=' names')

_headers = Children(bounds=(0, None), default=[], item_type=<class 'panel.viewable.Viewable'>, label=' headers')

append(pane: Any) → None[source]#

Appends an object to the tabs.

Parameters:
obj (object): Panel component to add as a tab.
clear() → None[source]#

Clears the tabs.

extend(panes: Iterable[Any]) → None[source]#

Extends the the tabs with a list.

Parameters:
objects (list): List of panel components to add as tabs.
insert(index: int, pane: Any) → None[source]#

Inserts an object in the tabs at the specified index.

Parameters:
index (int): Index at which to insert the object.
object (object): Panel components to insert as tabs.
pop(index: int = -1) → Viewable[source]#

Pops an item from the tabs by index.

Parameters:
index (int): The index of the item to pop from the tabs.
remove(pane: Viewable) → None[source]#

Removes an object from the tabs.

Parameters:
obj (object): The object to remove from the tabs.
reverse() → None[source]#

Reverses the tabs.

class panel.ui.base.MaterialPaneBase(object=None, **params)[source]#

Bases: MaterialComponent

Parameter Definitions

Parameters inherited from:

panel.viewable.Layoutable: align, aspect_ratio, css_classes, design, height, min_width, min_height, max_width, max_height, margin, styles, stylesheets, tags, width, width_policy, height_policy, sizing_mode, visible

panel.custom.ReactComponent: use_shadow_dom

panel_material_ui.base.MaterialComponent: loading, dark_theme, theme_config, sx

object = Parameter(allow_None=True, label='Object')

The object to be rendered by the pane.

class panel.ui.base.MaterialUIComponent(*, dark_theme, sx, theme_config, use_shadow_dom, loading, align, aspect_ratio, css_classes, design, height, height_policy, margin, max_height, max_width, min_height, min_width, sizing_mode, styles, stylesheets, tags, visible, width, width_policy, name)[source]#

Bases: MaterialComponent

MaterialUIComponent provides an interface for users to build custom Material UI components using Panel.

The MaterialUIComponent is a subclass of MaterialComponent and uses the Material UI shims to provide a React interface to the Material UI library.

References:

Parameter Definitions

Parameters inherited from:

panel.viewable.Layoutable: align, aspect_ratio, css_classes, design, height, min_width, min_height, max_width, max_height, margin, styles, stylesheets, tags, width, width_policy, height_policy, sizing_mode, visible

panel.custom.ReactComponent: use_shadow_dom

panel_material_ui.base.MaterialComponent: loading, dark_theme, theme_config, sx

class panel.ui.base.MaterialWidget(*, attached, description, disabled, dark_theme, sx, theme_config, use_shadow_dom, loading, align, aspect_ratio, css_classes, design, height, height_policy, margin, max_height, max_width, min_height, min_width, sizing_mode, styles, stylesheets, tags, visible, width, width_policy, label, value, name)[source]#

Bases: MaterialComponent, WidgetBase

MaterialWidget is a base class for all Material UI widgets.

Methods

focus()

Sends a message to the frontend to focus the widget.

from_param(parameter, **params)

Construct a widget from a Parameter and link the two bi-directionally.

Parameter Definitions

Parameters inherited from:

panel.widgets.base.WidgetBase: value

panel.viewable.Layoutable: align, aspect_ratio, css_classes, design, height, min_width, min_height, max_width, max_height, styles, stylesheets, tags, width_policy, height_policy, sizing_mode, visible

panel.custom.ReactComponent: use_shadow_dom

panel_material_ui.base.MaterialComponent: loading, dark_theme, theme_config, sx

label = String(allow_refs=True, default='', label='Label')

The label for the widget.

margin = Margin(allow_None=True, allow_refs=True, default=(5, 10), label='Margin')

Margin around the widget.

width = Integer(allow_None=True, allow_refs=True, bounds=(0, None), default=300, inclusive_bounds=(True, True), label='Width')

Width of the widget.

attached = Children(bounds=(0, None), default=[], item_type=<class 'panel.viewable.Viewable'>, label='Attached')

Elements that are attached to this object but are not direct children.

description = String(default='', label='Description')

Tooltip text to display when hovering over the widget.

disabled = Boolean(default=False, label='Disabled')

Whether the widget is disabled.

focus()[source]#

Sends a message to the frontend to focus the widget.

classmethod from_param(parameter: param.Parameter, **params) → T[source]#

Construct a widget from a Parameter and link the two bi-directionally.

Parameters:
parameter: param.Parameter

A parameter to create the widget from.

Returns:
Widget instance linked to the supplied parameter