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
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
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
API Reference
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.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