@since 4.0.0
@since 4.0.0
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 an id and either an aria-label describing the dialog or an
aria-labelledby id that points to an element describing this dialog.
Simple Example
import { ReactElement, useState } from "react";
import { Button } from "@react-md/button";
import {
Dialog,
DialogHeader,
DialogTitle,
DialogContent,
DialogFooter,
} from "@react-md/dialog";
import { Typography } from "@react-md/typography";
function Example(): ReactElement {
const [visible, setVisible] = useState(false);
const hide = (): void => {
setVisible(false);
};
return (
<>
<Button onClick={() => setVisible(!visible)}>
Show Dialog
</Button>
<Dialog
aria-labelledby="dialog-title"
id="simple-dialog"
visible={visible}
onRequestClose={hide}
>
<DialogHeader>
<DialogTitle id="dialog-title">Simple Dialog</DialogTitle>
</DialogHeader>
<DialogContent>
<Typography margin="none">This is some text in a dialog.</Typography>
</DialogContent>
<DialogFooter>
<Button onClick={hide}>
Close
</Button>
</DialogFooter>
</Dialog>
</>
);
}
This component is used to render the main content within a dialog. There are
really only benefits when using the component alongside the DialogHeader
and/or DialogFooter since it is set up so only the content will scroll
while the header and footer will be "fixed".
This component doesn't do anything to complex. It really just applies custom
styles so that when the DialogContent component is used, the header will be
"fixed" to the top of the dialog while the content scrolls. It also applies
some minimal padding.
This component adds some base styles to an <h2> element for a title within
a Dialog.
The FixedDialog is a wrapper for the Dialog component that can be used to
be fix itself to another element. Another term for this component might be a
"Pop out Dialog".
This component is used to help with handling nested dialogs by:
This should be added to the root of your app if you would like to enable this feature.
Generated using TypeDoc
An optional alignment for the content within the footer. Since the majority of dialog footers are used to contain action buttons, the default alignment is near the end.
@since 3.1.0