Skip to content

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.
If False, the part is hidden and its content is not displayed.

class_name(★) dynamic(str)

A list of CSS class names, separated by white spaces, that will be associated with the generated HTML Element.
These class names are added to the default taipy-part.

page dynamic(str)

The page to show as the content of the block (page name if defined or an URL in an iframe).
This should not be defined if partial is set.

height dynamic(str)

The height, in CSS units, of this block.

partial Partial

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

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 a layout 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 a layout 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 a layout 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 a layout 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:

Embedding an external web page

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}" />