`pane`¶

A side pane.

Pane allows showing some content on top of the current page. The pane is closed when the user clicks outside the area of the pane (triggering a on_close action).

Properties¶

Name	Type	Default	Description
`open`^(★)	bool	False	If True, this pane is visible on the page. If False, the pane is hidden.
`on_close`	Callback		The name of a function that is be triggered when this pane is closed (if the user clicks outside of it or presses the Esc key). All parameters of that function are optional: state (`State`): the state instance. id (optional[str]): the identifier of the button. action (optional[str]): the name of the action that provoked the change. If this property is not set, no function is called when this pane is closed.
`partial`	Partial		A Partial object that holds the content of the dialog. This should not be defined if page is set.
`page`	str		The page name to show as the content of the dialog. This should not be defined if partial is set.
`anchor`	str	"left"	Anchor side of the pane. Valid values are "left", "right", "top", or "bottom".
`width`	str	"30vw"	Width, in CSS units, of this pane. This is used only if anchor is "left" or "right".
`height`	str	"30vh"	Height, in CSS units, of this pane. This is used only if anchor is "top" or "bottom".
`persistent`	bool	False	If True, the pane appears next to the page. If False, the pane covers the page where it appeared.
`on_change`	Callback		The name of a function that is triggered when the value is updated. The parameters of that function are all optional: state (`State`): the state instance. var_name (str): the variable name. value (any): the new value.
`active`	dynamic(bool)	True	Indicates if this component is active. An inactive component allows no user interaction.
`id`	str		The identifier that will be assigned to the rendered HTML component.
`properties`	dict[str, any]		Bound to a dictionary that contains additional properties for this element.
`class_name`	str		List of CSS class names that will be associated with the generated HTML Element. This class names will be added to the default `taipy-<element_type>`.
`hover_text`	dynamic(str)		Information that is displayed when the user hovers over this element.

^(★)open is the default property for this visual element.

Usage¶

Showing or hiding a pane¶

The default property, open, indicates whether the pane is visible or not:

Page content

Markdown

<|{show}|pane|>

HTML

<taipy:pane>{show}</taipy:pane>

Choosing where the pane appears¶

The anchor property defines on which side of the display the pane is shown.

Page content

Markdown

<|{show}|pane|anchor=left|>

HTML

<taipy:pane anchor="left">{show}</taipy:pane>

Showing the pane beside the page content¶

The pane is shown beside the page content instead of over it if the persistent property evaluates to True.

Page content

Markdown

<|{show}|pane|persistent|>

HTML

<taipy:pane persistent="True">{show}</taipy:pane>

Pane as block element¶

The content of the pane can be specified directly inside the pane block.

Page content

Markdown

<|{show}|pane|
    ...
    <|{some content}|>
    ...
|>

HTML

<taipy:pane open={show}>
    ...
    <taipy:text>{some content}</taipy:text>
    ...
</taipy:pane>

Pane with page¶

The content of the pane can be specified as an existing page name using the page property.

Page content

Markdown

<|{show}|pane|page=page_name|>

HTML

<taipy:pane page="page_name">{show}</taipy:pane>

Pane with partial¶

The content of the pane can be specified as a Partial instance using the partial property.

Page content

Markdown

<|{show}|pane|partial={partial}|>

HTML

<taipy:pane partial="{partial}">{show}</taipy:pane>