Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Page Builder great again #1230

Merged
merged 2 commits into from
Dec 10, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Make Page Builder great again
FabienLelaquais committed Dec 10, 2024
commit 7115454234f9751e985c2c7be6ec97c6a575db8b
20 changes: 10 additions & 10 deletions docs/refmans/gui/viselements/generic/charts/advanced.md_template
Original file line number Diff line number Diff line change
@@ -457,15 +457,20 @@ bar above the chart and force the Box select tool.
Here is the definition of the chart and text controls:

!!! example "Definition"
=== "Python"

```python
import taipy.gui.builder as tgb
...
tgb.chart("{data}", selected="{selected_indices}", layout="{layout}", plot_config="{config}")
```
=== "Markdown"

```
## Mean of <|{len(selected_indices)}|raw|> selected points: <|{mean_value}|format=%.2f|raw|>

<|{data}|chart|selected={selected_indices}|layout={layout}|plot_config={config}|>
```

=== "HTML"

```html
@@ -479,14 +484,6 @@ Here is the definition of the chart and text controls:
plot_config="{config}">{data}</taipy:chart>
```

=== "Python"

```python
import taipy.gui.builder as tgb
...
tgb.chart("{data}", selected="{selected_indices}", layout="{layout}", plot_config="{config}")
```

And here is what the resulting page looks like:
<figure>
<img src="../advanced-selection-d.png" class="visible-dark" />
@@ -585,13 +582,16 @@ def range_changed(state, x1, x2, x3):
[TODO]

!!! example "Page content"
=== "Python"

```python
[TODO]
```
=== "Markdown"

```
[TODO]
```

=== "HTML"

```html
49 changes: 18 additions & 31 deletions docs/refmans/gui/viselements/generic/dialog.md_template
Original file line number Diff line number Diff line change
@@ -16,9 +16,17 @@ Buttons can be generated automatically within the dialog, based on the dialog co

To add elements to a dialog, you must use block syntax in your code:
!!! example "Definition"

=== "Python"
```python
import taipy.gui.builder as tgb
...
with tgb.dialog("{is_opened}")
# more visual elements
# e.g.
tgb.text("Hello")
tgb.button("Confirm")
```
=== "Markdown"

```
<|{is_opened}|dialog|
... more visual elements
@@ -27,7 +35,6 @@ To add elements to a dialog, you must use block syntax in your code:
<|Confirm|button|>
|>
```

=== "HTML"

```html
@@ -39,18 +46,6 @@ To add elements to a dialog, you must use block syntax in your code:
</taipy:dialog>
```

=== "Python"

```python
import taipy.gui.builder as tgb
...
with tgb.dialog("{is_opened}")
# more visual elements
# e.g.
tgb.text("Hello")
tgb.button("Confirm")
```

In this example, the dialog is opened or closed based on the value of the *is_opened* variable. The
dialog contains a text element and a button labeled "Confirm."

@@ -79,23 +74,7 @@ This function closes the dialog by setting its [*open*](#p-open) property to Fal
Here is the definition of the dialog that references the *show_dialog* variable and the *hide()*
callback function:
!!! example "Definition"

=== "Markdown"

```
<|{show_dialog}|dialog|on_action=hide|>
```

Note that

=== "HTML"

```html
<taipy:dialog on_action="hide">{show_dialog}</taipy:dialog>
```

=== "Python"

```python
import taipy.gui.builder as tgb
...
@@ -107,6 +86,14 @@ callback function:
`tgb.dialog("{show_dialog}", on_action=lambda s: s.assign("show_dialog", False))`<br/>
With this line, the dialog action is defined as a lambda function that sets *show_dialog* to
False, effectively closing the dialog. The *hide()* is not needed any longer.
=== "Markdown"
```
<|{show_dialog}|dialog|on_action=hide|>
```
=== "HTML"
```html
<taipy:dialog on_action="hide">{show_dialog}</taipy:dialog>
```

To open the dialog, the *show_dialog* variable must be set to True. This can be done using a
callback function triggered by another control (e.g., a button).<br/>
17 changes: 7 additions & 10 deletions docs/refmans/gui/viselements/generic/expandable.md_template
Original file line number Diff line number Diff line change
@@ -18,7 +18,14 @@ collapsed.
The content of `expandable` can be specified as the block content.

!!! example "Definition"
=== "Python"

```python
import taipy.gui.builder as tgb
...
with tgb.expandable("Title")
tgb.text("{some_content}")
```
=== "Markdown"

```
@@ -28,7 +35,6 @@ The content of `expandable` can be specified as the block content.
...
|>
```

=== "HTML"

```html
@@ -39,15 +45,6 @@ The content of `expandable` can be specified as the block content.
</taipy:expandable>
```

=== "Python"

```python
import taipy.gui.builder as tgb
...
with tgb.expandable("Title")
tgb.text("{some_content}")
```

## Expandable with page

The content of the expandable can be specified as an existing page name using the [*page*](#p-page)
17 changes: 7 additions & 10 deletions docs/refmans/gui/viselements/generic/indicator.md_template
Original file line number Diff line number Diff line change
@@ -42,15 +42,21 @@ The properties [*width*](#p-width) and [*height*](#p-height) can be specified, d
the value of [*orientation*](#p-orientation).

!!! example "Definition"
=== "Python"

```python
import taipy.gui.builder as tgb
...
tgb.indicator("{Value 1}", value="{val1}", width="50vw")
tgb.indicator("{Value 2}", value="{val2}", orientation="vertical", width="50vw")
```
=== "Markdown"

```
<|Value 1|indicator|value={val1}|width=50vw|>

<|Value 2|indicator|value={val2}|orientation=vertical|height=50vh|>
```

=== "HTML"

```html
@@ -59,15 +65,6 @@ the value of [*orientation*](#p-orientation).
<taipy:indicator value="{val2}" orientation="vertical" height="50vh">Value 2</taipy:indicator>
```

=== "Python"

```python
import taipy.gui.builder as tgb
...
tgb.indicator("{Value 1}", value="{val1}", width="50vw")
tgb.indicator("{Value 2}", value="{val2}", orientation="vertical", width="50vw")
```

# Styling

All the indicator controls are generated with the "taipy-indicator" CSS class. You can use this
93 changes: 37 additions & 56 deletions docs/refmans/gui/viselements/generic/layout.md_template
Original file line number Diff line number Diff line change
@@ -11,19 +11,22 @@ If the _columns_ property contains only digits and spaces, it is considered as f
The default layout contains 2 columns in desktop mode and 1 column in mobile mode.

!!! example "Definition"

=== "Python"
```python
import taipy.gui.builder as tgb
...
with tgb.layout()
tgb.text("{some_content}")
```
=== "Markdown"

```
<|layout|

<|{some_content}|>

|>
```

=== "HTML"

```html
<taipy:layout>

@@ -32,22 +35,21 @@ The default layout contains 2 columns in desktop mode and 1 column in mobile mod
</taipy:layout>
```

## Specifying gap

The *gap* between adjacent cells is set by default to 0.5rem and can be specified using the
[*gap*](#p-gap) property.

!!! example "Definition"
=== "Python"

```python
import taipy.gui.builder as tgb
...
with tgb.layout()
with tgb.layout(gap="20px")
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*](#p-gap) property.

!!! example "Definition"

=== "Markdown"

```
@@ -68,23 +70,26 @@ The *gap* between adjacent cells is set by default to 0.5rem and can be specifie
</taipy:layout>
```

=== "Python"

```python
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.

!!! example "Definition"

=== "Python"
```python
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")
```
=== "Markdown"

```
<|layout|columns=50px 1fr 50px|

@@ -99,9 +104,7 @@ You can use the `fr` CSS unit so that the middle column use all the available sp
...
|>
```

=== "HTML"

```html
<taipy:layout columns="50px 1fr 50px">
<taipy:part>
@@ -120,31 +123,27 @@ You can use the `fr` CSS unit so that the middle column use all the available sp
</taipy:layout>
```

=== "Python"
## Different layout for desktop and mobile devices

The [*columns[mobile]*](#p-columns[mobile]) property allows to specify a different layout when
running on a mobile device.

!!! example "Definition"
=== "Python"
```python
import taipy.gui.builder as tgb
...
with tgb.layout(columns="50px 1fr 50px")
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")
tgb.text("3rd column content or 2nd row 1st column on mobile")
with tgb.part()
tgb.text("1st column and second row content")
tgb.text("1st column and second row content or 2nd row 2nd column on mobile")
```

## Different layout for desktop and mobile devices

The [*columns[mobile]*](#p-columns[mobile]) property allows to specify a different layout when
running on a mobile device.

!!! example "Definition"

=== "Markdown"

```
<|layout|columns=50px 1fr 50px|columns[mobile]=1 1|

@@ -159,9 +158,7 @@ running on a mobile device.
...
|>
```

=== "HTML"

```html
<taipy:layout columns="50px 1fr 50px" columns[mobile]="1 1">
<taipy:part>
@@ -180,22 +177,6 @@ running on a mobile device.
</taipy:layout>
```

=== "Python"

```python
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
Loading