A dialog is used to show important content above all other elements within the page. This is normally used for alerts, confirmations, or just temporary content. The dialog within react-md also has the additional features for accessibility:
To complete the dialog accessibility requirements, every dialog must provide
id and either an
aria-label describing the dialog or an
id that points to an element describing this dialog.
A full page dialog is really just as it seems: a dialog that covers the entire page. These sorts of dialogs are good to use when you want to display a lot of information temporarily but don't need to transition to a different page. Some good examples of this are:
The example below will open a full screen preview of the image when it has been clicked.
Another common example for dialogs is to show a list of items and close the
dialog when clicked. Since there is additional padding on the
component and the
List component, you will want to just use the
component on its own in the dialog as well as update some padding values to
match the dialog.
An alert dialog variant should be used when assistive technologies should
immediately bring the user's attention to the dialog. This pattern is normally
used for confirmation dialogs. To create an alert dialog, the only change
required is to add a new prop:
Since you most likely want the user to press one of the actions in this dialog
instead of being able to close it by clicking the overlay or the escape key, you
can enable the
modal prop to disable this behavior. The
modal prop usually
goes hand-in-hand with updating the
role to be
"alertdialog", but it can be
used with a normal dialog as well.
You can also create dialogs that are fixed to other elements using the
FixedDialog component. This is generally used alongside badges and buttons to
show some additional information that can't be shown in a tooltip.
This dialog will be the same as other dialogs except for:
disableScrollLockprop is enabled by default
classNamesare updated to be a scaling animation instead of transform
disableScrollLock prop is enabled by default, the dialog will
attempt to stay visible within the viewport while the user scrolls and then
automatically hide once it can no longer stay in the viewport. This is kind of
nice, but the drawback is that the page will scroll back to the
element due to normal
Dialog focus behavior.
Another term for this component might be a
Dialogs can also be nested fairly easily since they use the @react-md/portal API behind the scenes so that the last created dialog will be shown over all the other dialogs. However, since each dialog creates its own overlay, the background will start getting darker and darker as more dialogs appear on the page and pressing the escape key will close all dialogs by default.
To fix this, there is an export component:
you can add near the root of your app to automatically fix these problems. Once
the component has been added to your app, the
Dialog will check to see if it
is the last created dialog. If it is not, it will disable the escape key close
functionality as well as temporarily hide its own overlay so the screen doesn't