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

Pane is a block control.

Properties¶

Name	Type	Default	Description
`open`^(★)	`bool` dynamic	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 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. If this property is not set, no function is called when this pane is closed.
`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 False, the pane covers the page where it appeared and disappears if the user clicks in the page. If True, the pane appears next to the page. Note that the parent section of the pane must have the flex display mode set. See below for an example using the `persistent` property.
`partial`	`Partial`		A Partial object that holds the content of the block. This should not be defined if page is set.
`page`	`str`		The page name to show as the content of the block. This should not be defined if partial is set.
`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`	`bool` dynamic	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` dynamic		The list of CSS class names that will be associated with the generated HTML Element. These class names will be added to the default `taipy-<element_type>`.
`hover_text`	`str` dynamic		The information that is displayed when the user hovers over this element.

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

Styling¶

All the pane blocks are generated with the "taipy-pane" CSS class. You can use this class name to select the pane blocks on your page and apply style.

Usage¶

Showing or hiding a pane¶

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

Definition

MarkdownHTMLPython

<|{show}|pane|>

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

import taipy.gui.builder as tgb
...
tgb.pane("{show}")

Choosing where the pane appears¶

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

Definition

MarkdownHTMLPython

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

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

import taipy.gui.builder as tgb
...
tgb.pane("{show}", anchor="left")

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.

The parent element must have the flex display mode in CSS. To achieve this using the Markdown syntax, you can leverage the d-flex class provided in the Stylekit.

Here is a full example of how to do this:

from taipy.gui import Gui

show_pane=True

page="""
<|d-flex|
<|{show_pane}|pane|persistent|width=100px|
Pane content
|>
This button can be pressed to open the persistent pane:
<|Open|button|on_action={lambda s: s.assign("show_pane", True)}|>
|>
"""

Gui(page=page).run()

The pane is initially opened. If you close it, the bound variable show_pane is updated (set to False).
Pressing the button sets the variable show_pane to True using a lambda callback, which opens the pane again.

Pane as block element¶

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

Definition

MarkdownHTMLPython

<|{show}|pane|
...
<|{some_content}|>
...
|>

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

import taipy.gui.builder as tgb
...
with tgb.pane("{show}")
    tgb.text("{some_content}")

Pane with page¶

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

Definition

MarkdownHTMLPython

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

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

import taipy.gui.builder as tgb
...
tgb.pane("{show}", page="page_name")

Pane with partial¶

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

Definition

MarkdownHTMLPython

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

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

import taipy.gui.builder as tgb
...
tgb.pane("{show}", partial="{partial}")