`dialog`

A modal dialog.

Dialog allows showing some content over the current page. The dialog is closed when the user presses the Cancel or Validate buttons, or clicks outside the area of the dialog (triggering a Cancel action).

Properties¶

Name	Type	Default	Description
`open`^(★)	`bool`	False	If True, the dialog is visible. If False, it is hidden.
`on_action`	`Callback`		Name of a function triggered when a button is pressed. The parameters of that function are all optional: state (`State`): the state instance. id (str): the identifier of the dialog. payload (dict): the details on this callback's invocation. This dictionary has the following keys: action: the name of the action that triggered this callback. args: a list where the first element contains the index of the selected label.
`close_label`	`str`	"Close"	The tooltip of the top-right close icon button. In the on_action function, args will hold -1.
`labels`	`str\|list[str]`		A list of labels to show in a row of buttons at the bottom of the dialog. The index of the button in the list is reported as args in the on_action function (-1 for the close icon).
`width`	`str\|int\|float`		The width, in CSS units, of this dialog. (CSS property)
`height`	`str\|int\|float`		The height, in CSS units, of this dialog. (CSS property)
`partial`	`Partial`		A Partial object that holds the content of the block. This should not be defined if page is set.
`page`	`str`		The page name to show as the content of the block. This should not be defined if partial is set.
`active`	`bool` dynamic	True	Indicates if this component is active. An inactive component allows no user interaction.
`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.
`class_name`	`str` dynamic		The list of CSS class names that will be associated with the generated HTML Element. These class names will be added to the default `taipy-<element_type>`.
`hover_text`	`str` dynamic		The information that is displayed when the user hovers over this element.

^(★)open is the default property for this visual element.

Styling¶

All the dialogs are generated with the "taipy-dialog" CSS class. You can use this class name to select the dialogs on your page and apply style.

Usage¶

Showing or hiding a dialog¶

The default property, open, indicates whether the dialog is visible or not:

Definition

MarkdownHTMLPython

<|{show_dialog}|dialog|on_action={lambda s: s.assign("show_dialog", False)}|>

<taipy:dialog on_action="{lambda s: s.assign('show_dialog', False)}">{show_dialog}</taipy:dialog>

import taipy.gui.builder as tgb
...
tgb.dialog("{show_dialog}", on_action="{lambda s: s.assign('show_dialog', False)}")

With another action that would have previously shown the dialog with:

def button_action(state, id):
    state.show_dialog = True

Specifying labels and actions¶

Several properties let you specify the buttons to show, and the action (callback functions) triggered when buttons are pressed:

Definition

MarkdownHTMLPython

<|{show_dialog}|dialog|title=Dialog Title|page_id=page1|on_action=dialog_action|labels=Validate;Cancel|>

<taipy:dialog title="Dialog Title" page_id="page1" on_action="dialog_action" labels="Validate;Cancel">{show_dialog}</taipy:dialog>

import taipy.gui.builder as tgb
...
tgb.dialog("{show_dialog}", title="Dialog Title", page_id="page1", on_action=dialog_action, labels="Validate;Cancel")

The implementation of the dialog callback could be:

def dialog_action(state, id, payload):
    with state as st:
        ...
        # depending on payload["args"][0]: -1 for close icon, 0 for Validate, 1 for Cancel
        ...
        st.show_dialog = False

Dialog as block element¶

The content of the dialog can be specified directly inside the dialog block.

Definition

MarkdownHTMLPython

<|{show_dialog}|dialog|
    ...
    <|{some_content}|>
    ...
|>

<taipy:dialog open={show_dialog}>
    ...
    <taipy:text>{some_content}</taipy:text>
    ...
</taipy:dialog>

```python import taipy.gui.builder as tgb ... with tgb.dialog("{show_dialog}"): ... tgb.text("{some_content}") ...

Dialog with page¶

The content of the dialog can be specified as an existing page name using the page property.

Definition

MarkdownHTMLPython

<|{show_dialog}|dialog|page=page_name|>

<taipy:dialog page="page_name">{show_dialog}</taipy:dialog>

import taipy.gui.builder as tgb
...
tgb.dialog("{show_dialog}", page="page_name")

Dialog with partial¶

The content of the dialog can be specified as a Partial instance using the partial property.

Definition

MarkdownHTMLPython

<|{show_dialog}|dialog|partial={partial}|>

<taipy:dialog partial="{partial}">{show_dialog}</taipy:dialog>

import taipy.gui.builder as tgb
...
tgb.dialog("{show_dialog}", partial="{partial}")