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 |
---|---|---|---|
(★) |
bool dynamic |
False | If True, this pane is visible on the page. |
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).
If this property is not set, no function is called when this pane is closed. |
|
anchor |
str |
"left" | Anchor side of the pane. |
persistent |
bool |
False | If False, the pane covers the page where it appeared and disappears if the user clicks in the page. |
width |
str |
"30vw" | Width, in CSS units, of this pane. |
height |
str |
"30vh" | Height, in CSS units, of this pane. |
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. |
|
partial |
taipy.gui.Partial |
A Partial object that holds the content of the block. |
|
on_change |
Union[str, Callable] |
A function or the name of a function that is triggered when the value is updated.
|
|
active |
bool dynamic |
True | Indicates if this component is active. |
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. |
|
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:
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:
The pane can also be shown beside the page setting the persistent property, as detailed in the examples below:
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:
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:
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:
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:
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>;
}