Skip to content

pane

A side pane.

The pane block allows you to display text and controls on top of the current page or in an area that slides next to it.

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 Union[str, Callable]

A function or 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).
This function is invoked with the following parameters:

  • state (State): the state instance.
  • id (optional[str]): the identifier of the close button if it has one.

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

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.

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

show_button bool False

If True and when the pane is closed, a button allowing the pane to be opened is shown.

page str

The page name to show as the content of the block.
This should not be defined if partial is set.

partial taipy.gui.Partial

A Partial object that holds the content of the block.
This should not be defined if page is set.

on_change Union[str, Callable]

A function or the name of a function that is triggered when the value is updated.
This function is invoked with the following parameters:

  • 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 is 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 are associated with the generated HTML Element.
These class names are added to the default taipy-pane class name.

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.

Details

The pane block can hold any number of visual elements or be defined as a registered page or partial.
The open property indicates whether the pane is visible or hidden.

When made visible, the pane window appears on top of the source page:

Pane is closed
Pane is opened

The pane is typically closed when the user clicks outside the area of the pane (triggering the on_close callback).

Note that if the page is defined so that the pane is initially hidden, your code must provide a way to set the open property to True to show it.
You can set the show_button property to True to get a button the user can click to open the pane:

Closed pane with open button

The pane can also be shown beside the page setting the persistent property, as detailed in the examples below:

Pane is closed
Pane is opened next to the page

Usage

Showing or hiding a pane

Here is a simple application that shows a page with a button that a user can click to open the pane.

The default property, open, indicates whether the pane is visible or not.
We will keep the state of the pane in a variable called show_pane:

show_pane = False

Here is the definition of the main page of the application:

Definition

page = """
# The **pane** block

<|{show_pane}|pane|
Here is the content of the pane.
|>

This is the content of the page.

<|Show pane|button|>
"""
import taipy.gui.builder as tgb
...
with tgb.Page() as page:
    tgb.text("# The **pane** block", mode="md")

    with tgb.pane("{show_pane}"):
        tgb.text("Here is the content of the pane.")

    tgb.text("This is the content of the page.")

    tgb.button("Show pane")

We define the on_action callback function so that it sets show_pane to True:

def on_action(state):
    state.show_pane = True

Here is how the page shows before and after the open button is pressed:

Before open
After open

The pane closes when the user clicks on the original page area.

Showing or hiding (simplified)

The previous section explains how to use the on_action callback to open the pane when a button is pressed. Because the action is so simple (setting a variable to True), this can be simplified using a lambda definition as the button's action.

Here is an alternative page definition:

Definition

page = """
# The **pane** block

<|{show_pane}|pane|
Here is the content of the pane.
|>

This is the content of the page.

<|Show pane|button|on_action={lambda s: s.assign("show_pane", True)}|>
"""
import taipy.gui.builder as tgb
...
with tgb.Page() as page:
    tgb.text("# The **pane** block", mode="md")

    with tgb.pane("{show_pane}"):
        tgb.text("Here is the content of the pane.")

    tgb.text("This is the content of the page.")

    tgb.button("Show pane", on_action=lambda s: s.assign("show_pane", True))

We set the on_action property of the button control to a lambda function that sets the variable show_pane to true, so the definition of the callback function is no longer needed.

Choosing where the pane appears

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

Here is a simple page definition demonstrating the use of this property:

Definition

page = """
<|{show_pane}|pane|anchor=top|height=50px|
Here is some text that is displayed at the top of the page in a pane.
|>

# Main page content

This is the content of the page.
"""
import taipy.gui.builder as tgb
...
with tgb.Page() as page:
    with tgb.pane("{show_pane}", anchor="top", height="50px"):
        tgb.text("Here is a some text that is displayed at the top of the page in a pane.")

    tgb.text("# Main page content", mode="md")

    tgb.text("This is the content of the page.")

With the anchor property set to "top", here is how the page appears when the pane is visible:

Pane anchored to the top

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.

Styling constraint

The parent element of the pane must have its display CSS property set to flex. A simple way to achieve this is to encapsulate the page content in a part block and leverage the d-flex class provided in the Stylekit.

Here is a little example demonstrating the use of this property.
The visibility of the pane is stored in the show_pane variable:

show_pane = False

The page definition is slightly more complex than in the case where the pane overlaps the main page:

Definition

page = """
<|d-flex|
<|{show_pane}|pane|persistent|show_button|width=150px|
Here is the content of the pane.
|>
<|
# Main page
Here is the content of the page.
|>
|>
import taipy.gui.builder as tgb
...
with tgb.Page() as page:
    with tgb.part("d-flex"):
        with tgb.pane("{show_pane}", persistent=True, show_button=True, width="150px"):
            tgb.text("Here is the content of the pane.")
        with tgb.part():
            tgb.text("# Main page", mode="md")
            tgb.text("Here is the content of the page.")

Note that the pane block has its show_button property set to True so we don't have to create another control to open the pane.
Also note that the entire page is embedded in a "d-flex" part to make if possible to leverage the setting of the persistent property to True.
Finally, the main page's content is defined within a neutral part to ensure its proper layout.

Here is how the page appears when the pane is opened or closed:

Closed pane
Opened pane

Pane from a page definition

The content of the pane can be specified as an existing page using the page property, which can be set to a page name. This can be useful when the pane content definition is complex or if your application needs to reuse the pane definition.

Here is a situation where this feature would be helpful.
We will create an Interest Calculator application: a user can provide an initial invested amount and the number of periods to be accounted for, and the user will want to see the accumulated amount after those periods.
The user can also specify the interest rate using a control displayed only in a retractable pane: this value is assumed to change rather rarely and its control would waste valuable space on the main page.

The variables used in the application are declared as follows:

initial_investment = 100
periods = 0
final_amount = initial_investment
rate = 5
show_rate = False

The point of the application is to show what would be the future value of the investment (in final_amount), starting with an amount of initial_investment invested at an interest rate of rate percent per period, accumulated for periods periods.
The pane visibility is stored in the variable show_rate.

We need to define two pages:

Definition

rate_page = """
Rate (in %):
<|{rate}|number|>
"""

page = """
<|{show_rate}|pane|show_button|page=_rate_pane|>

# Interest Calculator
Initial amount: <|{initial_investment}|number|>

Periods: <|{periods}|number|min=0|max=50|>

Final amount: <|{final_amount}|text|format=%.2f|>
"""
import taipy.gui.builder as tgb
...
with tgb.Page() as rate_page:
    tgb.text("Rate (in %):")
    tgb.number("{rate}")

with tgb.Page() as page:
    tgb.text("# Interest Calculator", mode="md")

    tgb.pane("{show_rate}", show_button=True, page="_rate_pane")

    tgb.text("Initial amount: ", inline=True)
    tgb.number("{initial_investment}")

    tgb.text("Periods", inline=True)
    tgb.number("{periods}", min=0, max=50)

    tgb.text("Final amount: ", inline=True)
    tgb.text("{final_amount}", format="%.2f", inline=True)

The pane block has its show_button property set to True so we don't need to explicitly create a button to show the pane.
Note how, in the definition of the pane control, we reference the page name "_rate_pane". This name, along with the main application page name "main", is registered when creating then starting the GUI service:

    pages = {
        "main": page,
        "_rate_pane": rate_page,
    }
    Gui(pages=pages).run()

We create a callback function that computes the accumulated earnings and updates final_amount accordingly:

def on_change(state, var_name: str):
    progress = pow(1 + state.rate / 100, state.periods)
    state.final_amount = state.initial_investment * progress

With the pane opened, the resulting page looks like this:

Pane defined as a page

When the initial amount and number of periods are set, the user can evaluate the future value of the investment. To change the interest rate, the user must click the pane button to open it, and set the interest rate as required.

Pane as a partial

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

The control definition will then look like this:

Definition

<|{show_pane}|pane|partial={partial}|>
<taipy:pane partial="{partial}">{show_pane}</taipy:pane>
import taipy.gui.builder as tgb
...
tgb.pane("{show_pane}", partial="{partial}")

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.

The pane area leverages the CSS style "MuiDrawer-paper".
For example, you can change the pane background color and double the font size in the pane with the following CSS rule:

.taipy-pane .MuiDrawer-paper {
  background: <color>;
  font-size: <font-size>;
}

No style
background: red; font-size: 2em;