Dialog
The dialog.root contains all the parts of a dialog.
The dialog.trigger wraps the control that will open the dialog.
The dialog.content contains the content of the dialog.
The dialog.title is a title that is announced when the dialog is opened.
The dialog.description is a description that is announced when the dialog is opened.
The dialog.close wraps the control that will close the dialog.
In context examples
ExpandCollapse
ExpandCollapse
Events when the Dialog opens or closes
The on_open_change event is called when the open state of the dialog changes. It is used in conjunction with the open prop, which is passed to the event handler.
Number of times dialog opened or closed: 0
Dialog open: false
ExpandCollapse
Check out the menu docs for an example of opening a dialog from within a dropdown menu.
Form Submission to a Database from a Dialog
This example adds new users to a database from a dialog using a form.
- It defines a User model with name and email fields.
- The
add_user_to_dbmethod adds a new user to the database, checking for existing emails. - On form submission, it calls the
add_user_to_dbmethod. - The UI component has:
- A button to open a dialog
- A dialog containing a form to add a new user
- Input fields for name and email
- Submit and Cancel buttons
ExpandCollapse
API Reference
rx.dialog.root
Root component for Dialog.
Props
| Prop | Type | Description |
|---|---|---|
open | bool | The controlled open state of the dialog. |
default_open | bool | The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. |
rx.dialog.trigger
Trigger an action or event, to open a Dialog modal.
Props
No component specific props
Event Triggers
See the full list of default event triggersrx.dialog.title
Title component to display inside a Dialog modal.
Props
No component specific props
Event Triggers
See the full list of default event triggersrx.dialog.content
Content component to display inside a Dialog modal.
sizeProps
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
size | "1""2""3""4" | DialogContent size "1" - "4". |
rx.dialog.description
Description component to display inside a Dialog modal.
Props
No component specific props
Event Triggers
See the full list of default event triggersrx.dialog.close
Close button component to close an open Dialog modal.
Props
No component specific props