Skip to content
taipy

6 - Page layouts

You can download the code for Step 6 or all the steps here.

For Notebooks

The Notebook is available here. In Taipy GUI, the process to execute a Jupyter Notebook is different from executing a Python Script. It is important to check the Notebook content and see the documentation.

Step 6: Page layout

You have successfully built a comprehensive forecasting application capable of making predictions for multiple days with various parameters in just a few steps. Nevertheless, there is room for substantial improvement in the page's layout. We'll introduce three new helpful controls to enhance the page's visual appeal. These controls are:

  • part: creates a group of text/visual elements. A useful property of part is render. If set to False, it will not display the part. This allows the developer to hide a group of visual elements dynamically.

    <|part|render={bool_variable}|
Text
Or visual elements...
|>

  • layout: creates invisible columns where you can put your texts and visual elements. The columns property indicates the width and number of columns. Here, we create three columns of the same width.

    <|layout|columns=1 1 1|
Button in first column <|Press|button|>

Second column

Third column
|>

    Layout

  • expandable: creates a block that can expand or shrink.

    expandable

Back to the code

page = """
<|toggle|theme|>

# Getting started with Taipy GUI

<|layout|columns=1 1|
<|
My text: <|{text}|>

Enter a word:
<|{text}|input|>
<|Analyze|button|on_action=local_callback|>
|>


<|Table|expandable|
<|{dataframe}|table|width=100%|>
|>
|>

<|layout|columns=1 1 1|
## Positive <|{np.mean(dataframe['Score Pos'])}|text|format=%.2f|raw|>

## Neutral <|{np.mean(dataframe['Score Neu'])}|text|format=%.2f|raw|>

## Negative <|{np.mean(dataframe['Score Neg'])}|text|format=%.2f|raw|>
|>

<|{dataframe}|chart|type=bar|x=Text|y[1]=Score Pos|y[2]=Score Neu|y[3]=Score Neg|y[4]=Overall|color[1]=green|color[2]=grey|color[3]=red|type[4]=line|>
"""

Layout