layout
Organizes its children into cells in a regular grid.
The columns property follows the CSS standard syntax. If the columns property contains only digits and spaces, it is considered as flex-factor unit: "1 1" => "1fr 1fr"
Properties¶
Name | Type | Default | Description |
---|---|---|---|
(★) |
str |
"1 1" | The list of weights for each column.
The creation of multiple same size columns can be simplified by using the multiply sign eg. "5*1" is equivalent to "1 1 1 1 1". |
columns[mobile] |
str |
"1" | The list of weights for each column, when displayed on a mobile device. |
gap |
str |
"0.5rem" | The size of the gap between the columns. |
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. |
(★)columns
is the default property for this visual element.
Usage¶
Default layout¶
The default layout contains 2 columns in desktop mode and 1 column in mobile mode.
Definition
<|layout|
<|{some_content}|>
|>
<taipy:layout>
<taipy:text>{some_content}</taipy:text>
</taipy:layout>
import taipy.gui.builder as tgb
...
with tgb.layout()
tgb.text("{some_content}")
Specifying gap¶
The gap between adjacent cells is set by default to 0.5rem and can be specified using the gap property.
Definition
<|layout|gap=20px|
...
<|{some_content}|>
...
|>
<taipy:layout gap="20px">
...
<taipy:text>{some_content}</taipy:text>>
...
</taipy:layout>
import taipy.gui.builder as tgb
...
with tgb.layout(gap="20px")
tgb.text("{some_content}")
Layout with a central "greedy" column¶
You can use the fr
CSS unit so that the middle column use all the available space.
Definition
<|layout|columns=50px 1fr 50px|
<|1st column content|>
<|2nd column content|>
<|3rd column content|>
<|1st column and second row content|>
...
|>
<taipy:layout columns="50px 1fr 50px">
<taipy:part>
<taipy:text>1st column content</taipy:text>
</taipy:part>
<taipy:part>
<taipy:text>2nd column content</taipy:text>
</taipy:part>
<taipy:part>
<taipy:text>3rd column content</taipy:text>
</taipy:part>
<taipy:part>
<taipy:text>1st column and second row content</taipy:text>
</taipy:part>
...
</taipy:layout>
import taipy.gui.builder as tgb
...
with tgb.layout(columns="50px 1fr 50px")
with tgb.part()
tgb.text("1st column content")
with tgb.part()
tgb.text("2nd column content")
with tgb.part()
tgb.text("3rd column content")
with tgb.part()
tgb.text("1st column and second row content")
Different layout for desktop and mobile devices¶
The columns[mobile] property allows to specify a different layout when running on a mobile device.
Definition
<|layout|columns=50px 1fr 50px|columns[mobile]=1 1|
<|1st column content|>
<|2nd column content|>
<|3rd column content or 2nd row 1st column on mobile|>
<|1st column and second row content or 2nd row 2nd column on mobile|>
...
|>
<taipy:layout columns="50px 1fr 50px" columns[mobile]="1 1">
<taipy:part>
<taipy:text>1st column content</taipy:text>
</taipy:part>
<div>
<taipy:text>2nd column content</taipy:text>
</div>
<taipy:part>
<taipy:text>3rd column content or 2nd row 1st column on mobile</taipy:text>
</taipy:part>
<taipy:part>
<taipy:text>1st column and second row content or 2nd row 2nd column on mobile</taipy:text>
</taipy:part>
...
</taipy:layout>
import taipy.gui.builder as tgb
...
with tgb.layout(columns="50px 1fr 50px", columns__mobile="1 1")
with tgb.part()
tgb.text("1st column content")
with tgb.part()
tgb.text("2nd column content")
with tgb.part()
tgb.text("3rd column content or 2nd row 1st column on mobile")
with tgb.part()
tgb.text("1st column and second row content or 2nd row 2nd column on mobile")
Styling¶
All the layout blocks are generated with the "taipy-layout" CSS class. You can use this class name to select the layout blocks on your page and apply style.
Stylekit support¶
The Stylekit provides specific classes that you can use to style layout blocks:
- align-columns-top
Aligns the content to the top of each column. - align-columns-center
Aligns the content to the center of each column. - align-columns-bottom
Aligns the content to the bottom of each column. - align-columns-stretch
Gives all columns the height of the highest column.
Additional classes are defined for the part
block element when inserted in
a layout block. Please see the section on styling for parts
for more details.