part¶
Displays its children in a block.
The part
block is used to group visual elements into a single element.
This allows to show or hide them in one action and be placed as a unique element in a
Layout
cell.
There is a simplified Markdown syntax to create a part
, where the element name is optional:
<|
just before the end of the line indicates the beginning of a part
element;
|>
at the beginning of a line indicates the end of the part
definition.
Properties¶
Name | Type | Default | Description |
---|---|---|---|
render |
dynamic(bool) | True | If True, this part is visible on the page. |
(★) |
dynamic(str) | A list of CSS class names, separated by white spaces, that will be associated with the generated HTML Element. |
|
page |
dynamic(str) | The page to show as the content of the block (page name if defined or an URL in an iframe). |
|
height |
dynamic(str) | The height, in CSS units, of this block. |
|
partial |
Partial | A Partial object that holds the content of the block. |
|
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. |
|
hover_text |
dynamic(str) | The information that is displayed when the user hovers over this element. |
(★)class_name
is the default property for this visual element.
Styling¶
All the part blocks are generated with the "taipy-part" CSS class. You can use this class name to select the part blocks on your page and apply style.
Stylekit support¶
The Stylekit provides specific classes that you can use to style part blocks:
- align-item-top
If this part block is inside alayout
block, this CSS class aligns the part content to the top of the layout column it belongs to. - align-item-center
If this part block is inside alayout
block, this CSS class vertically aligns the part content to the center of the layout column it belongs to. - align-item-bottom
If this part block is inside alayout
block, this CSS class vertically aligns the part content to the bottom of the layout column it belongs to. - align-item-stretch
If this part block is inside alayout
block, this CSS class gives the part the same height as the highest item in the row where this part appears in the layout.
The Stylekit also has several classes that can be used to style part blocks,
as described in the Styled Sections
documentation.
Because the default property of the part block is class_name, you can use the
Markdown short syntax for parts:
<|card|
...
(card content)
...
|>
Creates a part
that has the card class defined
in the Stylekit.
Usage¶
Grouping controls¶
The most straightforward use of the part
block is to group different visual elements in a single
element to make it easy to manipulate.
Page content
<|
...
<|{Some Content}|>
...
|>
<taipy:part>
...
<taipy:text>{Some Content}</taipy:text>
...
</taipy:part>
Showing and hiding controls¶
If you set the render property to False, the part
is not rendered
at all:
Page content
<|part|don't render|
...
<|{Some Content}|>
...
|>
<taipy:part render="False">
...
<taipy:text>{Some Content}</taipy:text>
...
</taipy:part>
If the value of render is bound to a Boolean value, the part
will show or hide its
elements according to the value of the bound variable.
Styling parts¶
The default property name of the part
block is class_name. This allows setting
a CSS class to a part
with a very simple Markdown syntax:
Markdown content
<|css-class|
...
(part content)
...
|>
This creates a part
block that is applied the css-class CSS class defined in the
application stylesheets.
Part showing a page¶
The content of the part can be specified as an existing page name or an URL using the page property.
You can embed an existing Taipy GUI page within another page using the page property,
setting it to a page name.
If your application has registered the page_name page, you can show it on another page using the
following page definition:
Page content
<|part|page=page_name|>
<taipy:part page="page_name"/>
You can also embed an external web page, setting the page property to the URL
(starting with http://
or https://
) you want to render:
Page content
Here is the Wikipedia home page:
<|part|page=https://www.wikipedia.org/|height=500px|>
<p>Here is the Wikipedia home page:</p>
<taipy:part page="https://www.wikipedia.org/" height="500px"/>
The resulting page will be displayed as this:


Note that you may have to tune the value of the height property since the external
page controls the layout if you omit it. This would be set to a CSS dimension value (typically
"100%" when the part appears inside a layout
block).
Part showing a partial¶
The content of the part can be specified as a Partial
instance using the partial
property.
Page content
<|part|partial={partial}|>
<taipy:part partial="{partial}" />