Dialog

The Dialog component is a versatile modal dialog implementation designed for displaying content in a layer above the application. It supports features like customizable titles, actions, and full-screen mode.

---

Python Dash Example

Below is an example of how to use the Dialog component in a Python Dash application.

import dash
from dash import html, dcc, Output, Input
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

dash._dash_renderer._set_react_version('18.2.0')

app.layout = dmc.YipitMUIProvider([
    dmc.Box(
        sx={"padding": 4},
        children=[
          dmc.Button("Open Dialog", id="open-button"),
          dmc.Dialog(
              id="example-dialog",
              open=False,
              title="Example Dialog",
              children=dmc.Typography("This is an example of the Dialog component."),
              actions=dmc.Box([
                  dmc.Button("Close", id="close-button")
              ])
          )
        ]
    )
])

@app.callback(
    Output("example-dialog", "open"),
    [Input("open-button", "n_clicks"), Input("close-button", "n_clicks")],
    prevent_initial_call=True
)
def toggle_dialog(open_clicks, close_clicks):
    ctx = dash.callback_context

    if not ctx.triggered:
        return dash.no_update

    button_id = ctx.triggered[0]['prop_id'].split('.')[0]

    if button_id == "open-button":
        return True
    elif button_id == "close-button":
        return False

    return dash.no_update

if __name__ == "__main__":
    app.run_server(debug=True)

---

Props Table

Below are the updated props for the Dialog component:

Prop	Type	Default	Description
open	boolean	false	Controls the open state of the dialog.
title	React.ReactNode	None	Title of the dialog.
fullScreen	boolean	false	If true, the dialog will be full-screen.
fullWidth	boolean	false	If true, the dialog will take up the full width.
maxWidth	false or Breakpoint	'sm'	Determines the max-width of the dialog.
onBackdropClick	() => void	None	Callback fired when the backdrop is clicked.
scroll	'paper' or 'body'	'paper'	Determines the scroll behavior of the dialog.
onClose	() => void	None	Callback fired when the dialog is closed.
actions	React.ReactNode	None	Actions to display in the dialog.

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Dialog Documentation