panel.custom module#

class panel.custom.AnyWidgetComponent(*, 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

The AnyWidgetComponent allows you to create custom Panel components in the style of an AnyWidget component. Specifically this component type creates shims that make it possible to reuse AnyWidget ESM code as is, without having to adapt the callbacks to use Bokeh APIs.

Reference: https://panel.holoviz.org/reference/custom_components/AnyWidgetComponent.html

Example:

import param
import panel as pn

pn.extension()

class CounterWidget(pn.custom.AnyWidgetComponent):
    _esm = """
    function render({ model, el }) {
    let count = () => model.get("value");
    let btn = document.createElement("button");
    btn.innerHTML = `count is ${count()}`;
    btn.addEventListener("click", () => {
        model.set("value", count() + 1);
        model.save_changes();
    });
    model.on("change:value", () => {
        btn.innerHTML = `count is ${count()}`;
    });
    el.appendChild(btn);
    }
    export default { render };
    """
    value = param.Integer()

CounterWidget().servable()

Methods

send(msg)

Sends a custom event containing the provided message to the frontend.

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.viewable.Viewable: loading

send(msg: dict)[source]#

Sends a custom event containing the provided message to the frontend.

Parameters:

msg: dict

class panel.custom.JSComponent(*, 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: ReactiveESM

The JSComponent allows you to create custom Panel components using Javascript and CSS without the complexities of Javascript build tools.

A JSComponent subclass provides bi-directional syncing of its parameters with arbitrary HTML elements, attributes and properties. The key part of the subclass is the _esm variable. Use this to define a render function as shown in the example below.

Reference: https://panel.holoviz.org/reference/custom_components/JSComponent.html

Example:

import panel as pn
import param

pn.extension()

class CounterButton(pn.custom.JSComponent):

    value = param.Integer()

    _esm = """
    export function render({ model }) {
        let btn = document.createElement("button");
        btn.innerHTML = `count is ${model.value}`;
        btn.addEventListener("click", () => {
            model.value += 1
        });
        model.on('value', () => {
            btn.innerHTML = `count is ${model.value}`;
        })
        return btn
    }
    """

CounterButton().servable()

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.viewable.Viewable: loading

class panel.custom.PyComponent(*, 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: Viewable, Layoutable

The PyComponent combines the convenience of Viewer components that allow creating custom components by declaring a __panel__ method with the ability of controlling layout and styling related parameters directly on the class. Internally the PyComponent will forward layout parameters to the underlying object, which is created lazily on render.

Reference: https://panel.holoviz.org/reference/custom_components/PyComponent.html

Example:

import panel as pn
import param

pn.extension()

class CounterButton(pn.custom.PyComponent, pn.widgets.WidgetBase):

    value = param.Integer(default=0)

    def __panel__(self):
        return pn.widgets.Button(
            name=self._button_name, on_click=self._on_click
        )

    def _on_click(self, event):
        self.value += 1

    @param.depends("value")
    def _button_name(self):
        return f"count is {self.value}"

CounterButton().servable()

Methods

select([selector])

Iterates over the Viewable and any potential children in the applying the Selector.

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.viewable.Viewable: loading

select(selector: type | Callable[[Viewable], bool] | None = None) → list[Viewable][source]#

Iterates over the Viewable and any potential children in the applying the Selector.

Parameters:

selector: type or callable or None: The selector allows selecting a subset of Viewables by declaring a type or callable function to filter by.

Returns:

viewables: list(Viewable)

class panel.custom.ReactComponent(*, 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: ReactiveESM

The ReactComponent allows you to create custom Panel components using React without the complexities of Javascript build tools.

A ReactComponent subclass provides bi-directional syncing of its parameters with arbitrary HTML elements, attributes and properties. The key part of the subclass is the _esm variable. Use this to define a render function as shown in the example below.

Reference: https://panel.holoviz.org/reference/custom_components/ReactComponent.html

Example:

import panel as pn
import param

class CounterButton(pn.custom.ReactComponent):

    value = param.Integer()

    _esm = """
    export function render({model}) {
    const [value, setValue] = model.useState("value");
    return (
        <button onClick={e => setValue(value+1)}>
        count is {value}
        </button>
    )
    }
    """

CounterButton().servable()

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.viewable.Viewable: loading

class panel.custom.ReactiveESM(*, 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: ReactiveCustomBase

The ReactiveESM classes allow you to create custom Panel components using HTML, CSS and/ or Javascript and without the complexities of Javascript build tools.

A ReactiveESM subclass provides bi-directional syncing of its parameters with arbitrary HTML elements, attributes and properties. The key part of the subclass is the _esm variable. Use this to define a render function as shown in the example below.

Example:

import panel as pn
import param

pn.extension()

class CounterButton(pn.custom.ReactiveESM):

    value = param.Integer()

    _esm = """
    export function render({ model }) {
        let btn = document.createElement("button");
        btn.innerHTML = `count is ${model.value}`;
        btn.addEventListener("click", () => {
            model.value += 1
        });
        model.on('value', () => {
            btn.innerHTML = `count is ${model.value}`;
        })
        return btn
    }
    """

CounterButton().servable()

Methods

`on_event`(event, callback)	Registers a callback to be executed when the specified DOM event is triggered.
`on_msg`(callback)	Registers a callback to be executed when a message event containing arbitrary data is received.

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.viewable.Viewable: loading

on_event(event: str, callback: Callable) → None[source]#

Registers a callback to be executed when the specified DOM event is triggered.

Parameters:

event: str: Name of the DOM event to add an event listener to.
callback: callable: A callable which will be given the DOMEvent object.

on_msg(callback: Callable) → None[source]#

Registers a callback to be executed when a message event containing arbitrary data is received.

Parameters:

event: str: Name of the DOM event to add an event listener to.
callback: callable: A callable which will be given the msg data.

class panel.custom.ReactiveESMMetaclass(name: str, bases: tuple[type, ...], dict_: Mapping[str, Any])[source]#: Bases: ReactiveMetaBase