dialog
v4.9.10arrow_drop_down
The id(s) of the element(s) that describe the dialog.
The id(s) of the element(s) that label the dialog.
Dialog children, usually the included sub-components.
If true, clicking the backdrop will not fire the onClose callback.
If true, hitting escape will not fire the onClose callback.
If true, the dialog will be full-screen
If true, the dialog stretches to maxWidth.
Notice that the dialog width grow is limited by the default margin.
Determine the max-width of the dialog.
The dialog width grows with the size of the screen.
Set to false to disable maxWidth.
Callback fired when the backdrop is clicked.
Callback fired when the component requests to be closed.
Callback fired before the dialog enters.
Callback fired when the dialog has entered.
Callback fired when the dialog is entering.
Callback fired when the escape key is pressed,
disableKeyboard is false and the modal is in focus.
Callback fired before the dialog exits.
Callback fired when the dialog has exited.
Callback fired when the dialog is exiting.
If true, the Dialog is open.
The component used to render the body of the dialog.
Props applied to the Paper element.
Determine the container for scrolling the dialog.
The component used for the transition. Follow this guide to learn more about the requirements for this component.
The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Props applied to the Transition element.
Dialogs are overlaid modal paper based components with a backdrop. Demos:
API:
- Dialog API
- inherits Modal API
Dialogs are overlaid modal paper based components with a backdrop.
| Name | Type | Description |
|---|---|---|
aria-describedby | string | The id(s) of the element(s) that describe the dialog. |
aria-labelledby | string | The id(s) of the element(s) that label the dialog. |
BackdropProps | object | |
children | node | Dialog children, usually the included sub-components. |
classes | object | Override or extend the styles applied to the component. See CSS API below for more details. |
className | string | |
disableBackdropClick | bool | If |
disableEscapeKeyDown | bool | If |
fullScreen | bool | If |
fullWidth | bool | If Notice that the dialog width grow is limited by the default margin. |
maxWidth | 'lg' | 'md' | 'sm' | 'xl' | 'xs' | false | Determine the max-width of the dialog.
The dialog width grows with the size of the screen.
Set to |
onBackdropClick | function | Callback fired when the backdrop is clicked. |
onClose | function | The event source of the callback. |
onEnter | function | Callback fired before the dialog enters. |
onEntered | function | Callback fired when the dialog has entered. |
onEntering | function | Callback fired when the dialog is entering. |
onEscapeKeyDown | function | Callback fired when the escape key is pressed,
|
onExit | function | Callback fired before the dialog exits. |
onExited | function | Callback fired when the dialog has exited. |
onExiting | function | Callback fired when the dialog is exiting. |
open (required) | bool | If |
PaperComponent | elementType | The component used to render the body of the dialog. |
PaperProps | object | Props applied to the |
scroll | 'body' | 'paper' | Determine the container for scrolling the dialog. |
TransitionComponent | elementType | The component used for the transition. Follow this guide to learn more about the requirements for this component. |
transitionDuration | number | {"appear":"number","enter":"number","exit":"number"} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
TransitionProps | object | Props applied to the |